"use client"; import { useCallback, useEffect, useState } from "react"; import { AnimatePresence, motion, type Variants } from "framer-motion"; import { Play, Pause, Volume2, Settings, Maximize2, X } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; // Mock clip length used to render the ticking timecode (3:42). const TOTAL_SECONDS = 222; function formatTime(seconds: number): string { const m = Math.floor(seconds / 60); const s = Math.floor(seconds % 60); return `${m}:${s.toString().padStart(2, "0")}`; } // Deterministic pseudo-random so server and client render the same particles. const seed = (i: number, n: number) => Math.abs(Math.sin((i + 1) * n)); const r2 = (n: number) => Math.round(n * 100) / 100; const PARTICLES = Array.from({ length: 14 }, (_, i) => ({ x: r2(5 + seed(i, 12.9898) * 90), y: r2(8 + seed(i, 78.233) * 82), size: r2(1 + seed(i, 37.719) * 2.4), opacity: r2(0.16 + seed(i, 4.117) * 0.4), drift: r2(-6 - seed(i, 51.2) * 12), duration: r2(3.4 + seed(i, 9.71) * 4), delay: r2(seed(i, 22.4) * 4), })); const backdropVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, }; const panelVariants: Variants = { hidden: { opacity: 0, scale: 0.9, y: 14 }, visible: { opacity: 1, scale: 1, y: 0 }, }; /** * Pure CSS-art "footage": layered gradients, a slow aurora sweep, drifting * orbs and floating motes. `progress` (0..1) nudges a soft playhead of light * across the frame so the player reads as if it were actually running. */ function VideoScene({ progress = 0 }: { progress?: number }) { return (

{PARTICLES.map((p, i) => ( ))} {/* horizon glow */}

{/* progress playhead of light, only while a clip is running */} {progress > 0 && (

)} {/* vignette */}

); } /** Circular glass play button with two expanding pulse rings. */ function PlayBadge({ size = 66 }: { size?: number }) { const icon = Math.round(size * 0.34); return (

{[0, 1].map((i) => ( ))}

); } type HeroVideoDialogProps = { title?: string; channel?: string; duration?: string; /** Controlled open state. Omit for uncontrolled usage. */ open?: boolean; onOpenChange?: (open: boolean) => void; className?: string; }; /** * A video thumbnail rendered entirely in CSS (no real media) that scales open * into a centered mock player over a frosted backdrop. Supply `open` / * `onOpenChange` to drive it, or leave them off for a self-managing trigger. * The dialog paints itself `absolute inset-0`, so its nearest positioned * ancestor should be `relative` (the demo container handles this). */ export function HeroVideoDialog({ title = "How we ship 60fps interfaces", channel = "Lumenite Engineering", duration = "3:42", open, onOpenChange, className, }: HeroVideoDialogProps) { const [internalOpen, setInternalOpen] = useState(false); const isOpen = open ?? internalOpen; const setOpen = useCallback( (next: boolean) => { if (open === undefined) setInternalOpen(next); onOpenChange?.(next); }, [open, onOpenChange], ); const [progress, setProgress] = useState(0.03); const [playing, setPlaying] = useState(true); // Fresh playback each time the dialog opens. useEffect(() => { if (isOpen) { setProgress(0.03); setPlaying(true); } }, [isOpen]); // Advance the mock scrubber while open and playing; loop at the end. useEffect(() => { if (!isOpen || !playing) return; const id = window.setInterval(() => { setProgress((p) => { const next = p + 0.006; return next >= 1 ? 0 : next; }); }, 60); return () => window.clearInterval(id); }, [isOpen, playing]); // Escape to close. useEffect(() => { if (!isOpen) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [isOpen, setOpen]); const playedPct = `${Math.round(progress * 100)}%`; const bufferedPct = `${Math.min(100, Math.round(progress * 100) + 16)}%`; const currentTime = Math.round(TOTAL_SECONDS * progress); return ( <> setOpen(true)} aria-label={`Play video: ${title}`} whileHover={{ scale: 1.012 }} whileTap={{ scale: 0.99 }} transition={{ type: "spring", stiffness: 320, damping: 24 }} className={cn( "group relative block aspect-video w-full max-w-[440px] overflow-hidden rounded-2xl border border-white/10 bg-black text-left shadow-[0_30px_80px_-30px_rgba(0,0,0,0.9)]", className, )} > {/* thin bright top edge */}

{/* center play affordance */}

{/* caption + duration chip */}

{title}

{channel}

{duration}

{isOpen && ( setOpen(false)} variants={backdropVariants} transition={{ duration: 0.3, ease: EASE }} className="absolute inset-0 cursor-default bg-black/70 backdrop-blur-xl" />

Hero Video Dialog