The SparklingGrid component creates an animated grid of dots that ripples outward on mount and sparkles at random, ideal for dynamic, atmospheric backgrounds.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/sparkling-grid.jsonEverything Sparkling Grid accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 30 | Spacing between dots, in pixels |
| sparkleFrequency | number | 0.03 | Chance (0-1) that a dot sparkles on each of its ticks |
| className | string | '' | Additional CSS classes. Set a text colour here to recolour the dots, which inherit currentColor |