Browse components
Line Waves
Dozens of fine horizontal lines weaving into flowing silk-like waves that bulge away from the cursor. Canvas 2D.
Installation
npx shadcn@latest add @glint-ui/line-wavesFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/line-waves.json
Usage
import { LineWaves } from "@/components/ui/line-waves";
<div className="relative h-96">
<LineWaves count={36} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 36 | Number of lines. |
| colorA | string | "#22d3ee" | Top line color. |
| colorB | string | "#a78bfa" | Bottom line color. |
| amplitude | number | 48 | Wave height in px. |
| speed | number | 1 | Animation speed multiplier. |
| lineWidth | number | 1 | Stroke width in px. |
| interactive | boolean | true | Lines bulge away from the cursor. |
| bulgeRadius | number | 140 | Bulge radius in px. |
| className | string | — | Extra classes for the root element. |