A lightweight React background animation with continuously moving lines that can flow upward or downward using a configurable direction prop.
npm i framer-motionThis component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
| Property | Default Value | Description |
|---|---|---|
| lineCount | 200 | The total number of lines rendered on the screen. |
| color | "#737373" | The color of the lines (accepts hex, rgb, or Tailwind color codes). |
| thickness | 1 | The width or thickness of each line (in pixels). |
| speed | 10 | Controls the movement speed of the lines (higher number = faster). |
| heightMin | 120 | The minimum height a line can randomly be (in pixels). |
| heightMax | 370 | The maximum height a line can randomly be (in pixels). |
| opacityMin | 0.15 | The minimum opacity limit for the faintest lines. |
| opacityMax | 0.6 | The maximum opacity limit for the most visible lines. |
| direction | "bottom-to-top" | The direction of the line movement. Accepts "bottom-to-top" or "top-to-bottom". |