Browse components
Spark Waves
Glowing sine waves braid across the stage and shed drifting sparks from their crests. Canvas 2D.
Installation
npx shadcn@latest add @glint-ui/spark-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/spark-waves.json
Usage
import { SparkWaves } from "@/components/ui/spark-waves";
<div className="relative h-96">
<SparkWaves colors={["#22d3ee", "#a78bfa", "#f472b6"]} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#22d3ee","#a78bfa","#f472b6"] | One color per wave. |
| waves | number | 3 | Number of waves. |
| amplitude | number | 70 | Wave height in px. |
| speed | number | 1 | Animation speed multiplier. |
| sparkRate | number | 1 | How eagerly the crests shed sparks. |
| lineWidth | number | 1.5 | Core line width in px. |
| className | string | — | Extra classes for the root element. |