A grid of dots breathes in a ripple, a traveling wave or a diagonal sweep, each dot swelling and glowing as the crest passes. Reads like a voice or audio engine at work.
Composing voiceover
Narrator: Iris, warm · 0:42
“Every great trip starts with a single list.”
npx shadcn@latest add https://hyperblur.dev/r/loader-dot-field.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-dot-field.tsx.
import { LoaderDotField } from "@/components/hyperblur/loader-dot-field"
<LoaderDotField pattern="ripple" label="Composing voiceover" />| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | 13 | Number of columns, from 2 to 32. |
| rows | number | 5 | Number of rows, from 1 to 16. |
| dot | number | 5 | Dot diameter in pixels. |
| gap | number | 7 | Space between dots in pixels. |
| pattern | "ripple" | "wave" | "diagonal" | "ripple" | How the crest moves through the grid. |
| color | string | "#2f7bff" | Resting color of the dots. |
| accent | string | "#bcd6ff" | Color and glow of a dot at the crest. |
| speed | number | 1.8 | Seconds for one full cycle. |
| label | string | Visible caption under the grid. Without it, Loading is announced to screen readers only. |