"use client"; import { useEffect, useState, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // ─── Data ──────────────────────────────────────────────────────────────────── interface Slide { label: string; headline: string; sub: string; stat: string; statLabel: string; accent: string; bg: string; } const SLIDES: Slide[] = [ { label: "01 — Clarity", headline: "Make it\nunderstood.", sub: "Great typography doesn't ask for attention. It earns comprehension.", stat: "0.3s", statLabel: "to first impression", accent: "#f59e0b", bg: "from-amber-500/5 to-transparent", }, { label: "02 — Weight", headline: "Heavy lifts\nlighter loads.", sub: "Contrast in weight creates visual hierarchy without a single line of color.", stat: "94%", statLabel: "recall rate", accent: "#6366f1", bg: "from-indigo-500/5 to-transparent", }, { label: "03 — Space", headline: "What's left\nout speaks.", sub: "Whitespace is not empty. It is the silence that gives words their weight.", stat: "2.4×", statLabel: "readability boost", accent: "#10b981", bg: "from-emerald-500/5 to-transparent", }, { label: "04 — Motion", headline: "Text that\nbreathed first.", sub: "Animation is not decoration. It is punctuation for the eye.", stat: "60fps", statLabel: "always smooth", accent: "#f43f5e", bg: "from-rose-500/5 to-transparent", }, ]; // ─── Letter split morph ─────────────────────────────────────────────────────── function MorphChar({ char, delay, exit, accent, }: { char: string; delay: number; exit: boolean; accent: string; }) { if (char === "\n") return
; if (char === " ") return ; return ( {char} ); } function AnimatedHeadline({ text, exit, accent, }: { text: string; exit: boolean; accent: string; }) { const chars = text.split(""); let charIndex = 0; return (

{chars.map((char, i) => { if (char === "\n") return
; const idx = charIndex++; return ( ); })}

); } // ─── Animated counter ───────────────────────────────────────────────────────── function StatBadge({ stat, label, accent, visible, }: { stat: string; label: string; accent: string; visible: boolean; }) { return ( {stat} {label} ); } // ─── Progress dots ──────────────────────────────────────────────────────────── function NavDots({ total, active, accent, onSelect, }: { total: number; active: number; accent: string; onSelect: (i: number) => void; }) { return (

{Array.from({ length: total }).map((_, i) => ( ))}

); } // ─── Main ───────────────────────────────────────────────────────────────────── export default function FluidTextMorph() { const [index, setIndex] = useState(0); const [exiting, setExiting] = useState(false); const [statVisible, setStatVisible] = useState(false); const timer = useRef | null>(null); const AUTO = 4200; const slide = SLIDES[index]; const goTo = (next: number) => { if (exiting || next === index) return; setStatVisible(false); setExiting(true); setTimeout(() => { setIndex(next); setExiting(false); setTimeout(() => setStatVisible(true), 500); }, 450); }; const next = () => goTo((index + 1) % SLIDES.length); useEffect(() => { setStatVisible(false); const t = setTimeout(() => setStatVisible(true), 700); return () => clearTimeout(t); }, [index]); useEffect(() => { timer.current = setTimeout(next, AUTO); return () => { if (timer.current) clearTimeout(timer.current); }; }, [index, exiting]); return (

{/* Accent gradient bg */} {/* Accent line top */} {/* Content */}

{/* Top row */}

{slide.label} { if (timer.current) clearTimeout(timer.current); goTo(i); }} />

{/* Headline */}

{/* Bottom row */}

{/* Sub copy */} {slide.sub} {/* Stat */}

{/* Click zones */}

); }