Aurora Bars

1"use client";
2 
3import * as React from "react";
4import { motion, useAnimationFrame } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export interface AuroraBarsProps {
9  /** @default 24 */
10  barCount?: number;
11  /** gradient color stops, bottom to top — @default ["#ff2d78", "#c04aff", "#4a6fff", "#0a1aff", "#00000000"] */
12  colors?: string[];
13  /** max bar height as fraction of container height — @default 0.92 */
14  maxHeightRatio?: number;
15  /** min bar height as fraction of container height — @default 0.18 */
16  minHeightRatio?: number;
17  /** undulation speed — @default 0.5 */
18  speed?: number;
19  /** @default 3 */
20  gap?: number;
21  /** px blur per bar, creates soft glow — @default 0 */
22  blur?: number;
23  /** @default "#000000" */
24  background?: string;
25  className?: string;
26}
27 
28/** two sine waves per bar for organic movement */
29function barHeight(
30  index: number,
31  total: number,
32  time: number,
33  minH: number,
34  maxH: number,
35): number {
36  // Arch envelope: tallest in the centre, shorter on edges
37  // arch envelope: tallest in centre, shorter on edges
38  const norm = index / (total - 1);
39  const arch = Math.sin(norm * Math.PI);
40 
41  const phase1 = (index / total) * Math.PI * 2;
42  const phase2 = (index / total) * Math.PI * 5.3;
43 
44  const wave =
45    0.5 +
46    0.25 * Math.sin(time * 1.1 + phase1) +
47    0.25 * Math.sin(time * 0.7 + phase2);
48 
49  const blended = arch * 0.65 + wave * 0.35;
50 
51  return minH + blended * (maxH - minH);
52}
53 
54export function AuroraBars({
55  barCount = 24,
56  colors = ["#ffd6eb", "#ff9acb", "#ff5aa6", "#ff2d78", "#00000000"],
57  maxHeightRatio = 0.92,
58  minHeightRatio = 0.18,
59  speed = 0.5,
60  gap = 3,
61  blur = 0,
62  background = "#000000",
63  className,
64}: AuroraBarsProps) {
65  const containerRef = React.useRef<HTMLDivElement>(null);
66  const [heights, setHeights] = React.useState<number[]>(() =>
67    Array.from({ length: barCount }, (_, i) =>
68      barHeight(i, barCount, 0, minHeightRatio, maxHeightRatio),
69    ),
70  );
71 
72  const timeRef = React.useRef(0);
73 
74  useAnimationFrame((_, delta) => {
75    timeRef.current += (delta / 1000) * speed;
76    const t = timeRef.current;
77    setHeights(
78      Array.from({ length: barCount }, (_, i) =>
79        barHeight(i, barCount, t, minHeightRatio, maxHeightRatio),
80      ),
81    );
82  });
83 
84  const gradientStop = colors
85    .map((c, i) => `${c} ${Math.round((i / (colors.length - 1)) * 100)}%`)
86    .join(", ");
87  const gradient = `linear-gradient(to top, ${gradientStop})`;
88 
89  return (
90    <div
91// … truncated