"use client"; import { useMemo, type ReactNode } from "react"; import { motion } from "framer-motion"; import { ArrowRight, MoveUpRight } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; type BeamConfig = { side: "left" | "right"; color: string; core: string; rotate: number; delay: number; }; const BEAMS: BeamConfig[] = [ { side: "left", color: "rgba(124, 108, 255, 0.34)", core: "rgba(169, 157, 255, 0.55)", rotate: 24, delay: 0, }, { side: "right", color: "rgba(91, 140, 255, 0.30)", core: "rgba(147, 190, 255, 0.5)", rotate: -24, delay: 1.6, }, ]; function Beam({ side, color, core, rotate, delay }: BeamConfig) { const isLeft = side === "left"; return (

{/* soft ambient halo of the beam */} {/* bright inner core */}

); } export function SpotlightNew({ children, className, }: { children?: ReactNode; className?: string; }) { // Deterministic, seeded dust motes so a static preview still feels alive. const motes = useMemo(() => { const seeded = (i: number, n: number) => Math.abs(Math.sin((i + 1) * n)); return Array.from({ length: 16 }, (_, i) => ({ id: i, left: Math.round(seeded(i, 12.9898) * 96) + 2, top: Math.round(seeded(i, 78.233) * 62) + 4, size: Math.round((1 + seeded(i, 3.17) * 2) * 10) / 10, drift: Math.round(6 + seeded(i, 5.41) * 14), delay: Math.round(seeded(i, 9.7) * 60) / 10, duration: Math.round(7 + seeded(i, 2.13) * 6), opacity: Math.round((0.18 + seeded(i, 4.02) * 0.42) * 100) / 100, })); }, []); return (

{/* fine grid, faded toward the center top like a real hero backdrop */}

{/* the two sweeping beams */} {BEAMS.map((b) => ( ))} {/* warm bloom where the beams cross near the top */}

{/* drifting dust motes */} {motes.map((m) => ( ))} {/* bottom fade so the scene melts into the card */}

{children}

); } export default function Demo() { const container = { hidden: {}, show: { transition: { staggerChildren: 0.12, delayChildren: 0.1 }, }, }; const item = { hidden: { opacity: 0, y: 18, filter: "blur(6px)" }, show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.9, ease: EASE }, }, }; return ( Hero spotlight Light that moves the way
attention {" "} does Two wide beams drift across a fine grid, breathing on a slow loop. A clean, oversized backdrop for launches and landing heroes. ); }

Spotlight

Light that moves the wayattention does

Light that moves the way
attention does