"use client"; import { useState, useEffect, useCallback, useRef, useLayoutEffect, } from "react"; interface HeroTitleAnimationProps { className?: string; } export function HeroTitleAnimation({ className }: HeroTitleAnimationProps) { const [phase, setPhase] = useState< "measuring" | "fade-in" | "move" | "reveal" | "highlight" | "done" >("measuring"); const [brandOffsetX, setBrandOffsetX] = useState(0); const [titleOffsetY, setTitleOffsetY] = useState(0); const [ready, setReady] = useState(false); const measureBrandRef = useRef(null); const containerRef = useRef(null); const timersRef = useRef([]); const brandWords = ["Make", "your", "websites"]; const highlightWords = ["feel", "premium", "instantly"]; const titleCx = "flex flex-wrap items-baseline justify-center gap-x-[0.1em] gap-y-2 md:gap-y-3 text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-foreground leading-[1.15]"; /* ─── Measure BEFORE first paint ─── */ useLayoutEffect(() => { const brand = measureBrandRef.current; const container = containerRef.current; if (!brand || !container) return; const brandRect = brand.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); const brandCenterX = brandRect.left + brandRect.width / 2; const containerCenterX = containerRect.left + containerRect.width / 2; setBrandOffsetX(containerCenterX - brandCenterX); const brandMidY = brandRect.top - containerRect.top + brandRect.height / 2; const containerMidY = containerRect.height / 2; setTitleOffsetY(containerMidY - brandMidY); setReady(true); }, []); const clearTimers = useCallback(() => { timersRef.current.forEach(clearTimeout); timersRef.current = []; }, []); const startSequence = useCallback(() => { clearTimers(); setPhase("fade-in"); timersRef.current.push(setTimeout(() => setPhase("move"), 1200)); timersRef.current.push(setTimeout(() => setPhase("reveal"), 1800)); timersRef.current.push(setTimeout(() => setPhase("highlight"), 2500)); timersRef.current.push(setTimeout(() => setPhase("done"), 3100)); }, [clearTimers]); useEffect(() => { if (!ready) return; startSequence(); return clearTimers; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ready]); useEffect(() => clearTimers, [clearTimers]); /* ─── Derived flags ─── */ const brandVisible = phase !== "measuring"; const brandMoved = phase === "move" || phase === "reveal" || phase === "highlight" || phase === "done"; const showReveal = phase === "reveal" || phase === "highlight" || phase === "done"; const showHighlight = phase === "highlight" || phase === "done"; return (

{/* ── Hidden sizing layer ── */} {/* ── Visible animated title ── */}

{/* "Built for Your Foundation" — fades in centered, then slides to position /} {brandWords.map((w, i) => ( {w} ))} {/ "of Design Engineering" — reveals together, only "Design Engineering" gets highlight /} {/ Highlight sub-group /} {/ Highlight box sweeps left → right */} {highlightWords.map((word, i) => ( {word} ))}

); }

{brandWords.map((w, i) => ( {w} ))} {highlightWords.map((w, i) => ( {w} ))}