127 Components
Aurora
BackgroundsmacOS-inspired northern lights background using 3 to 5 large 60px blurred color blobs with screen blend mode drifting on offset keyframe loops.
Aurora · Screen Blend
Northern Lights Diffusion
Multi-layered radial blobs with 60px Gaussian blur and mix-blend-mode: screen drifting on offset harmonic keyframe loops.
#10B981 · #06B6D4 · #8B5CF6 · #3B82F6
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/aurora-background.json"
Props
TypeScript props supported by <AuroraBackground />.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#10B981", "#06B6D4", "#8B5CF6", "#3B82F6"] | Array of 3 to 5 hex or RGB color strings for the aurora blobs. |
| speed | number | 1 | Speed multiplier for the keyframe drift cycle. |
| intensity | number | 0.75 | Overall opacity intensity of the aurora layer (0.2 to 1). |
| children | React.ReactNode | — | Optional foreground content rendered above the aurora. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Uses `filter: blur(60px)` and `mix-blend-mode: screen` across 4 offset radial color layers.
- Pure CSS keyframe drift with zero JavaScript per-frame overhead.
- Includes Borealis, Sonoma, and Polar color palette presets in the interactive preview.
Keyboard & Accessibility
- Marks decorative aurora blob layers with `aria-hidden='true'`.
- Maintains high foreground text contrast over the dark `#04060E` base canvas.
- Preset selector buttons are keyboard focusable.