GitHub - idleCyrex/topolines: Animated topographic contour backgrounds for React. One component, zero dependencies, drawn on the GPU. · GitHub
/" data-turbo-transient="true" />
Skip to content
Search or jump to...
Search code, repositories, users, issues, pull requests...
-->
Search
Clear
Search syntax tips
Provide feedback
--><br>We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted
Cancel
Submit feedback
Saved searches
Use saved searches to filter your results more quickly
-->
Name
Query
To see all available qualifiers, see our documentation.
Cancel
Create saved search
Sign in
/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up
Appearance settings
Resetting focus
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
idleCyrex
topolines
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>3 Commits<br>3 Commits
src
src
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
package.json
package.json
tsconfig.json
tsconfig.json
tsup.config.ts
tsup.config.ts
View all files
Repository files navigation
topolines
Animated topographic contour backgrounds. One React component, zero dependencies, drawn on the GPU.
Install
npm i topolines
React quick start
}">import { Topolines } from "topolines/react";
export default function Hero() {<br>return Topolines seed="topolines" color="#F2EFE6" style={{ position: "fixed", inset: 0 }} />;
Vanilla quick start
import { TopoField } from "topolines";
const field = new TopoField(document.getElementById("host")!, {<br>seed: "topolines",<br>color: "#F2EFE6",<br>});
// later<br>field.pause();<br>field.destroy();
Props (TopolinesOptions)
Prop<br>Type<br>Default<br>Description
seed<br>string<br>"topo"<br>Seeds the noise offset. Same seed renders the same field.
speed<br>number<br>0.012<br>Animation speed of the field over time.
scale<br>number<br>1.15<br>Zoom level of the contour field.
levels<br>number<br>11<br>Number of contour bands.
lineWidth<br>number<br>1.2<br>Line thickness of each contour.
opacity<br>number<br>0.16<br>Overall opacity of the drawn lines.
color<br>string<br>"#C3D82C"<br>Line color. Accepts any CSS color.
drift<br>[number, number]<br>[0.004, 0.002]<br>Constant x/y drift applied to the field per frame.
warp<br>number<br>0.18<br>Amount of domain warp applied to the noise.
scrollPan<br>[number, number]<br>[0, 0]<br>Extra pan offset, in the same space as drift, useful for pinned sections.
colorStops<br>{ at: number; color: string }[] | undefined<br>undefined<br>Color keyframes interpolated by getProgress().
getPanScroll<br>() => [number, number] | undefined<br>undefined<br>Overrides the pan offset per frame, for example to freeze pan across a pinned section.
getProgress<br>() => number | undefined<br>document scroll progress<br>Drives colorStops. Defaults to the page scroll fraction.
maxDpr<br>number<br>1.5<br>Caps device pixel ratio used for rendering.
interactive<br>boolean<br>false<br>Enables the cursor bump: contour rings bloom around the pointer.
mouseStrength<br>number<br>0.35<br>Strength of the cursor bump when interactive is on.
mouseRadius<br>number<br>0.35<br>Radius of the cursor bump when interactive is on.
fallback<br>ReactNode<br>null<br>Rendered instead of the canvas when WebGL is unsupported (React only).
className<br>string | undefined<br>undefined<br>Class applied to the host element (React only).
style<br>CSSProperties | undefined<br>undefined<br>Style applied to the host element (React only).
Notes
SSR-safe. No window/document access at module load, safe to import in a Next.js server component tree.
Pauses automatically when the canvas is offscreen or the tab is hidden, and resumes when visible again.
Respects prefers-reduced-motion: renders one static frame instead of animating.
Requires WebGL1 with the OES_standard_derivatives extension. Check ahead of time with isSupported(), or pass a fallback to the React component for automatic handling.
If the environment lacks support, the component mounts nothing and reports isSupported() === false / a TopoField instance with .ok === false.
Docs and interactive playground: https://topolines.idlee.xyz<br>Source: https://github.com/idleCyrex/topolines
License
MIT. Includes a simplex noise implementation from webgl-noise, by Ashima Arts and Stefan Gustavson (MIT). See LICENSE.
About<br>Animated topographic contour backgrounds for React. One component, zero dependencies, drawn on the GPU.<br>topolines.idlee.xyz/<br>Topics<br>background-animationcontour-linescreative-codingnextjsreactshadertopographic-maptypescriptwebgl<br>Resources<br>Readme<br>License<br>Activity<br>Stars<br>1 star<br>Watchers<br>0 watching<br>Forks<br>0 forks<br>Report repository
Releases
Packages
Contributors
Languages
You can’t perform that action at this...