Aurora Bars
Animated bars with aurora-inspired gradient effects and smooth transitions.
Installation
File Structure
aurora-bars.tsx
Usage
import { AuroraBars } from "@/components/unlumen-ui/aurora-bars";
<AuroraBars />;API Reference
AuroraBars
| Prop | Type | Default | Description |
|---|---|---|---|
barCount? | number | 24 | Number of vertical bars rendered. |
colors? | string[] | ["#ffd6eb","#ff9acb","#ff5aa6","#ff2d78","#00000000"] | Gradient color stops applied bottom → top. |
maxHeightRatio? | number | 0.92 | Maximum bar height as fraction of container (0–1). |
minHeightRatio? | number | 0.18 | Minimum bar height as fraction of container (0–1). |
speed? | number | 0.5 | Animation speed multiplier (higher = faster). |
gap? | number | 3 | Gap between bars in pixels. |
blur? | number | 0 | Blur applied to each bar in pixels (soft glow). |
background? | string | "#000000" | Background color behind all bars. |
className? | string | - | Additional className for the outer wrapper. |
Notes
- Motion: the component uses
useAnimationFramefrommotion/reactand computes heights using a small procedural noise function (two sine waves blended with an arch envelope) so the bars undulate organically. - Gradient: colors are converted into a single
linear-gradient(to top, ...)string applied to each bar; supply any valid CSS color strings. - Performance: rendering is cheap — bars are simple divs with animated heights; prefer moderate
barCountvalues on low-end devices. - Visual tweaks:
bluradds a soft glow overlap, and a radial vignette darkens corners for depth.
Credits
Credit to @SannaGranqvistX for the original idea. The original is available for purchase on Framer
Keep in mind
Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.