Glow Wave Bars

"use client";

import { useRef, useState } from "react";
import { motion, useAnimationFrame } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  GlowWaveBars                                                       */
/* ------------------------------------------------------------------ */

interface GlowWaveBarsProps {
  /** Number of bars [Optional, default: 24] */
  barCount?: number;
  /** Gradient stops, bottom to top — keep ONE hue family [Optional] */
  colors?: string[];
  /** Max bar height as a fraction of the container [Optional, default: 0.92] */
  maxHeightRatio?: number;
  minHeightRatio?: number;
  /** Undulation speed [Optional, default: 0.5] */
  speed?: number;
  gap?: number;
  /** Per-bar blur in px for a soft glow [Optional, default: 0] */
  blur?: number;
  background?: string;
  className?: string;
}

/** Two offset sine waves under an arch envelope — organic, never twitchy. */
function barHeight(
  index: number,
  total: number,
  time: number,
  minH: number,
  maxH: number,
): number {
  const norm = index / (total - 1);
  const arch = Math.sin(norm * Math.PI);
  const phase1 = (index / total) * Math.PI * 2;
  const phase2 = (index / total) * Math.PI * 5.3;
  const wave =
    0.5 + 0.25 * Math.sin(time * 1.1 + phase1) + 0.25 * Math.sin(time * 0.7 + phase2);
  const blended = arch * 0.65 + wave * 0.35;
  return minH + blended * (maxH - minH);
}

/**
 * A skyline of bars breathing under two offset sine waves and an arch
 * envelope: the center runs tall, the edges stay low, and every bar shares
 * one bottom-to-top gradient that fades to transparent so the crowns glow
 * like light through mist. One hue family — the wave is the show, not a
 * rainbow.
 * @param {number} barCount - Bars across the container [Optional, default: 24]
 * @param {string[]} colors - Gradient stops bottom to top [Optional]
 */
export function GlowWaveBars({
  barCount = 24,
  colors = ["#dbeafe", "#93c5fd", "#3b82f6", "#1d4ed8", "#00000000"],
  maxHeightRatio = 0.92,
  minHeightRatio = 0.18,
  speed = 0.5,
  gap = 3,
  blur = 0,
  background = "#050608",
  className,
}: GlowWaveBarsProps) {
  const [heights, setHeights] = useState<number[]>(() =>
    Array.from({ length: barCount }, (_, i) =>
      barHeight(i, barCount, 0, minHeightRatio, maxHeightRatio),
    ),
  );
  const timeRef = useRef(0);

  useAnimationFrame((_, delta) => {
    timeRef.current += (delta / 1000) * speed;
    const t = timeRef.current;
    setHeights(
      Array.from({ length: barCount }, (_, i) =>
        barHeight(i, barCount, t, minHeightRatio, maxHeightRatio),
      ),
    );
  });

  const gradientStops = colors
    .map((c, i) => `${c} ${Math.round((i / (colors.length - 1)) * 100)}%`)
    .join(", ");
  const gradient = `linear-gradient(to top, ${gradientStops})`;

  return (
    <div
      className={cn("relative h-full w-full overflow-hidden", className)}
      style={{ background }}
    >
      <div className="absolute inset-0 flex items-end">
        {heights.map((fraction, i) => (
          <div
            key={i}
            className="flex h-full flex-1 items-end"
            style={{ padding: `0 ${gap / 2}px` }}
          >
            <motion.div
              className="w-full rounded-t-full"
              style={{
                height: `${fraction * 100}%`,
                background: gradient,
                filter: blur > 0 ? `blur(${blur}px)` : undefined,
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}