Aurora Background
Velora's signature drifting aurora gradient backdrop.
- 0.6 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Spring release
Northern lights for your hero
A slow, drifting gradient that sits behind any headline.
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/aurora-background.jsonAdds components/velora/aurora-background.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
intensityOverall opacity of the aurora blobs | "subtle" | "medium" | "vivid" | "medium" |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The drift animation is off; the three blurred colour blobs rest at their default positions, so the glow is unchanged but static.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative; the wrapper is aria-hidden and ignored by assistive tech.