Aurora Background
betaSlow, blurred light behind content: streaked curtains hung from the top, or soft colour fields that wander — CSS only, paused off-screen.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
- 2 looks in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add aurora-backgroundnpm packages installed: class-variance-authority.
import { AuroraBackground } from "@/components/ui/aurora-background";Default
Glow
Custom Colours
<AuroraBackground>
| Prop | Type | Default |
|---|---|---|
blurSoftness, as a blur radius in pixels. Default 48 for | number | — |
colorsThe colours of the light, tokens ( | readonly string[] | DEFAULT_COLORS |
fade | "none" | "edges" | "bottom" | "top" | "none" |
intensityHow strong the light is, 0–1. Default 0.6. | number | 0.6 |
ref | Ref<HTMLDivElement> | — |
speedDrift speed multiplier. Default 1; 0 holds the light still. | number | 1 |
variant | "curtain" | "glow" | "curtain" |
Plus every attribute of <div> except ref.
Pure decoration: the light is aria-hidden and takes no pointer events, and children render above it in their own layer, keeping their roles, focus order and hit areas. It animates only by transform and pauses while off-screen. Under reduced motion it stands still on its last frame; in forced-colours mode it is removed. Colours are theme tokens, but blurred light still lowers the contrast of text laid over it — lower `intensity`, or set text on a surface, where the light is bright.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes