Light Beams

npm install motion

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type LightBeamsProps = {
  children?: ReactNode;
  /** Number of vertical lines. */
  count?: number;
  /** Seconds for a beam to fall the full height. */
  duration?: number;
  /** Colour of the falling light. */
  color?: string;
  className?: string;
};

// fixed pseudo-random offsets so beams look scattered but render identically on server and client
const scatter = (index: number) => ((index * 7919) % 100) / 100;

export function LightBeams({ children, count = 9, duration = 3.2, color = "#5FAEB4", className = "" }: LightBeamsProps) {
  const reduceMotion = useReducedMotion();

  return (
    <div className={`relative isolate overflow-hidden bg-[#0C1010] ${className}`}>
      <div aria-hidden className="absolute inset-0 -z-10 flex justify-evenly">
        {Array.from({ length: count }, (_, index) => (
          <div key={index} className="relative h-full w-px bg-white/[0.06]">
            {!reduceMotion && (
              <motion.span
                className="absolute -left-px h-24 w-[3px] rounded-full"
                style={{ background: `linear-gradient(to bottom, transparent, ${color})`, boxShadow: `0 0 12px ${color}` }}
                initial={{ top: "-25%" }}
                animate={{ top: "110%" }}
                transition={{
                  duration: duration * (0.8 + scatter(index) * 0.6),
                  delay: scatter(index + 3) * duration,
                  repeat: Infinity,
                  repeatDelay: scatter(index + 5) * duration,
                  ease: "easeIn",
                }}
              />
            )}
          </div>
        ))}
      </div>
      {/* fade the top and bottom so beams appear and vanish softly */}
      <div aria-hidden className="absolute inset-0 -z-10 bg-[linear-gradient(to_bottom,#0C1010,transparent_25%,transparent_75%,#0C1010)]" />
      {children}
    </div>
  );
}