Aurora
betaSoft northern-lights background: folding light curtains drawn in a shader with premultiplied alpha, so it glows on dark and washes on light.
Aurora on the canvas colour
minimal
Presets, intensity, stars
Every preset, intensity, stars and pause.
full
Sign-in hero
Headline and Buttons over the aurora, finished with Grain.
composition
Your agents worked through the night.
Sign in to review 14 finished tasks and 2 waiting for approval.
Installation
npx shadcn@latest add https://kuro.abstergo.fyi/r/aurora.jsonCopies the source into components/kura/aurora with its dependencies (kura-theme, kura-merge-refs, kura-shader-color, shader-canvas, use-reduced-motion, utils). Tokens come from the kura-theme item.
When to use it
Use it for
- A sign-in, landing or 'welcome back' screen that should feel calm and a little magical.
- A night-themed hero or a header band above an agent dashboard.
- A background that must sit on top of an existing surface colour (it is transparent where there is no light).
Reach for something else when
- A colourful blob background filling the whole area — use mesh-gradient.
- Showing that an agent is busy — use border-beam or thinking-indicator.
- A voice agent's presence — use agent-orb.
- Behind dense UI or long text: the curtains move; keep content short and centred.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | "signal" | "polar" | "ember" | "mist" | readonly [string, string, string] | "signal" | A preset, or three CSS colours `[lower edge, middle, upper fringe]`. signal uses the theme accent; polar is classic green-teal-blue. |
| intensity | number | 0.8 | Brightness of the curtains, 0–1. |
| speed | number | 1 | Animation speed multiplier. 0 renders a still frame. |
| stars | boolean | true | Twinkling stars behind the curtains. Only drawn when the background is dark. |
| paused | boolean | false | Freeze the animation on the current frame. |
| maxDpr | number | 1.5 | Device-pixel-ratio cap. |
| children | React.ReactNode | — | Content rendered on top, in normal flow. |
All native attributes of the root element, className and ref pass through.
Anatomy
- AuroraRoot container (`relative isolate overflow-hidden`). Give it a size and a background colour. `data-state` = animating | still.
data-slot="aurora" - ShaderCanvasTransparent WebGL layer behind the children (aria-hidden).
data-slot="aurora-canvas" - FallbackBlurred CSS radial gradients shown when WebGL2 is unavailable.
data-slot="aurora-fallback"
Accessibility
- Decorative and aria-hidden; children keep their semantics.
- The curtains sit mostly in the lower half; place text near the top or centre and check contrast in both themes.
- Reduced motion: Renders one still frame (no drift, no twinkle). Theme changes redraw it.
Notes for agents
- The canvas is transparent: set a background on the root (`bg-kura-canvas`, `bg-kura-surface-sunken`) — the aurora is light added on top of it.
- Give the root a height (`h-72`, `min-h-96`, `aspect-video`).
- Lift children above the canvas automatically (they are in flow); lift them above a `<Grain />` overlay with `relative z-10`.
- On light themes the curtains render as a deeper watercolour wash; check both themes.