The Aurora component drifts three soft bands of colour behind your content on different periods, so the layer keeps rearranging itself instead of looping visibly. Pure CSS gradients and transforms, no canvas.
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/aurora.jsonEverything Aurora accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| from | string | 'var(--brand)' | Colour the ribbons start from. Any CSS colour |
| via | string | 'var(--accent-pink)' | Colour they pass through at their brightest |
| speed | number | 14 | Seconds for one drift cycle (higher is slower) |
| blur | number | 72 | How far the ribbons are softened, in pixels |
| intensity | number | 0.55 | Overall opacity of the layer, 0 to 1 |
| className | string | '' | Additional CSS classes for styling |
Three ribbons on different periods, so the field never settles into a pattern.