"use client"; import * as React from "react"; import { animate, AnimatePresence, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { cn } from "@/lib/utils"; /* ── types ───────────────────────────────────────────────────── */ export type ArcRevealGreeting = { /** Greeting text in the target script */ text: string; /** Optional `lang` attribute applied to the span (helps screen readers / font rendering) */ lang?: string; }; export interface ArcRevealHeroProps { /** Greetings cycled before the arc reveal. */ greetings?: ArcRevealGreeting[]; /** How long each greeting is held on screen (ms). */ greetingHold?: number; /** Duration of the curved curtain reveal (ms). */ revealDuration?: number; /** Outer `

` class. Receives the *post-reveal* surface. */ className?: string; /** Class for the intro (pre-reveal) overlay surface. */ introClassName?: string; /** Class for the cycled greeting ``. */ greetingClassName?: string; /** Class for the wrapper around `children` (the revealed content). */ revealClassName?: string; /** * Optional `sessionStorage` key — when set, the intro plays only once per * session for the same key. Leave unset to replay on every mount. */ storageKey?: string; /** Content shown after the curtain reveal (the "landing"). */ children?: React.ReactNode; } /* ── defaults ────────────────────────────────────────────────── */ const DEFAULT_GREETINGS: ArcRevealGreeting[] = [ { text: "Quiet." }, { text: "Sharp." }, { text: "Calm." }, { text: "Crafted." }, { text: "Considered." }, { text: "Composed." }, { text: "Honest." }, { text: "Ready." }, ]; type Phase = "intro" | "reveal" | "done"; /* ── component ───────────────────────────────────────────────── */ export function ArcRevealHero({ greetings = DEFAULT_GREETINGS, greetingHold = 620, revealDuration = 1500, className, introClassName, greetingClassName, revealClassName, storageKey, children, }: ArcRevealHeroProps) { const prefersReducedMotion = useReducedMotion(); const [phase, setPhase] = React.useState("intro"); const [index, setIndex] = React.useState(0); // Drive the arc shape from a single 0→1 progress. // The curve is a quadratic bezier with a fixed concavity (control point // sits 25 viewBox units below the chord), translated upward over time: // t=0 → chord at y=110 (off-screen below) → no curtain visible // t=1 → chord at y=-30 (off-screen above) → full-screen curtain const progress = useMotionValue(0); const arcPath = useTransform(progress, (p: number) => { const edge = 110 - p * 140; const control = edge + 25; return `M 0 ${edge} Q 50 ${control} 100 ${edge} L 100 110 L 0 110 Z`; }); // Honor reduced-motion + replay-suppression on mount. React.useEffect(() => { if (prefersReducedMotion) { setPhase("done"); return; } if (storageKey && typeof window !== "undefined") { try { if (window.sessionStorage.getItem(storageKey) === "done") { setPhase("done"); } } catch { /* sessionStorage can throw in private mode — fall through */ } } }, [prefersReducedMotion, storageKey]); // Greeting cycle. React.useEffect(() => { if (phase !== "intro") return; const isLast = index >= greetings.length - 1; if (isLast) { const t = window.setTimeout(() => setPhase("reveal"), greetingHold + 220); return () => window.clearTimeout(t); } const t = window.setTimeout(() => setIndex((i) => i + 1), greetingHold); return () => window.clearTimeout(t); }, [phase, index, greetingHold, greetings.length]); // Drive the curtain reveal. React.useEffect(() => { if (phase !== "reveal") return; const controls = animate(progress, 1, { duration: revealDuration / 1000, ease: [0.85, 0, 0.15, 1], onComplete: () => { if (storageKey && typeof window !== "undefined") { try { window.sessionStorage.setItem(storageKey, "done"); } catch { /* ignore */ } } setPhase("done"); }, }); return () => controls.stop(); }, [phase, progress, revealDuration, storageKey]); const showOverlay = phase !== "done"; const current = greetings[Math.min(index, greetings.length - 1)]; return (

{children}

{showOverlay && ( {/* Cycled greeting */}

{phase === "intro" && current && ( {current.text} )}

{/* Rising curved curtain */} )}

); } export default ArcRevealHero;