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

PropTypeDefault
barCount?
number
24
colors?
string[]
["#ffd6eb","#ff9acb","#ff5aa6","#ff2d78","#00000000"]
maxHeightRatio?
number
0.92
minHeightRatio?
number
0.18
speed?
number
0.5
gap?
number
3
blur?
number
0
background?
string
"#000000"
className?
string
-

Notes

  • Motion: the component uses useAnimationFrame from motion/react and 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 barCount values on low-end devices.
  • Visual tweaks: blur adds 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