idlecyrex/topolines

Topolines is a small library that creates animated, topographic-style contour line backgrounds for websites. Think of those elevation maps you see for mountains and valleys, with curving lines showing the terrain. The library renders a single React component that fills a container with gently shifting, animated contour lines. It has zero dependencies and does its drawing on the GPU for smooth performance. You can use it in several ways. If you build React apps, you import the component and drop it into a page, passing options like color, animation speed, and a seed string that determines the pattern. The same seed always produces the same field of lines. You can also use it outside of React as a plain TypeScript class called TopoField, or even load it through a script tag with no build tools or package manager required. The README provides short code snippets for each of these scenarios. The component offers a range of settings. You can control how many contour bands appear, how thick the lines are, the zoom level, and the overall opacity. A drift setting moves the field slowly over time, and a warp setting bends the noise for more organic shapes. You can tie color changes to scroll position, make the lines respond to the cursor with an interactive bump effect, and cap the pixel ratio to manage rendering load. A fallback option lets you show alternate content if the user's browser cannot handle the graphics required. The library is built to be considerate of real-world conditions. It works with server-side rendering setups like Next.js without breaking, pauses animation when the canvas scrolls offscreen or the browser tab is hidden, and respects the system setting that asks for reduced motion by showing a single static frame. It requires a specific graphics capability in the browser, and provides a helper function to check for that support ahead of time. The project is released under the MIT license and includes a noise generation implementation originally from an open-source graphics project.