"use client"; import React, { useRef } from "react"; import { motion, useInView, useReducedMotion } from "motion/react"; export interface SpringyTextProps { text: string; as?: "h1" | "h2" | "h3" | "h4" | "p"; className?: string; wordClassName?: string; letterClassName?: string; staggerDelay?: number; enterFrom?: "top" | "bottom"; exitTo?: "bottom" | "top"; once?: boolean; threshold?: number; } export function SpringyText({ as: Tag = "h2", ...rest }: SpringyTextProps) { // Keyed on Tag so switching the wrapper element (e.g. h2 -> h1) fully // remounts this subtree instead of swapping the host element type under a // persistent ref. Without this, `useInView`'s IntersectionObserver stays // bound to the old (now-detached) node and `inView` gets stuck permanently // false, leaving every letter invisible. return ; } function SpringyTextBody({ text, as: Tag = "h2", className, wordClassName, letterClassName, staggerDelay = 15, enterFrom = "top", exitTo = "bottom", once = false, threshold = 0.3, }: SpringyTextProps) { const containerRef = useRef(null); const reduced = useReducedMotion(); const inView = useInView(containerRef as React.RefObject, { amount: threshold, once, }); const scrollDir = useRef<"down" | "up">("down"); React.useEffect(() => { let lastScrollY = window.scrollY; let ticking = false; const updateScrollDir = () => { const scrollY = window.scrollY; if (Math.abs(scrollY - lastScrollY) > 2) { scrollDir.current = scrollY > lastScrollY ? "down" : "up"; lastScrollY = scrollY > 0 ? scrollY : 0; } ticking = false; }; const onScroll = () => { if (!ticking) { window.requestAnimationFrame(updateScrollDir); ticking = true; } }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const words = text.split(" "); let charIndex = 0; const wordsWithChars = words.map((word) => { return word.split("").map((char) => { return { char, index: charIndex++ }; }); }); const totalChars = charIndex; const enterY = enterFrom === "top" ? -80 : 80; const exitY = exitTo === "bottom" ? 80 : -80; return React.createElement( Tag as React.ElementType, { ref: containerRef, className, "aria-label": text, }, wordsWithChars.map((wordChars, wordIdx) => ( {wordIdx < wordsWithChars.length - 1 && " "} )) ); } function WordCluster({ wordChars, wordClassName, letterClassName, reduced, inView, enterY, exitY, scrollDirection, totalChars, staggerDelay, }: { wordChars: Array<{ char: string; index: number }>; wordClassName?: string; letterClassName?: string; reduced: boolean | null; inView: boolean; enterY: number; exitY: number; scrollDirection: "down" | "up"; totalChars: number; staggerDelay: number; }) { const [activeLetterIndex, setActiveLetterIndex] = React.useState(null); const [hoverOffsetPx, setHoverOffsetPx] = React.useState(0); return ( {wordChars.map(({ char, index }, localIndex) => { const stiffness = 200 + (index % 3) * 40; const damping = index % 4 === 0 ? 13 : 10 + (index % 4) * 2; const mass = 0.6 + (index % 5) * 0.08; const isForward = scrollDirection === "down"; const staggerIndex = isForward ? index : totalChars - index - 1; const delay = inView ? (staggerIndex * staggerDelay) / 1000 : (staggerIndex * staggerDelay * 0.5) / 1000; return ( ); })} ); } function Letter({ char, localIndex, activeIndex, hoverOffsetPx, setActiveIndex, setHoverOffsetPx, letterClassName, reduced, inView, enterY, exitY, stiffness, damping, mass, baseDelay, }: { char: string; localIndex: number; activeIndex: number | null; hoverOffsetPx: number; setActiveIndex: React.Dispatch>; setHoverOffsetPx: React.Dispatch>; letterClassName?: string; reduced: boolean | null; inView: boolean; enterY: number; exitY: number; stiffness: number; damping: number; mass: number; baseDelay: number; }) { const [activeDelay, setActiveDelay] = React.useState(baseDelay); React.useEffect(() => { setActiveDelay(baseDelay); }, [baseDelay]); const handlePointerEnter = (e: React.PointerEvent) => { if (reduced || !inView) return; setActiveDelay(0); const rect = e.currentTarget.getBoundingClientRect(); const centerY = rect.top + rect.height / 2; const offset = e.clientY < centerY ? rect.height * 0.28 : -rect.height * 0.28; setActiveIndex(localIndex); setHoverOffsetPx(offset); }; const handlePointerLeave = () => { if (reduced || !inView) return; setActiveDelay(0); setActiveIndex(null); setHoverOffsetPx(0); }; let interactiveOffset = 0; if (activeIndex === localIndex) { interactiveOffset = hoverOffsetPx; } else if (activeIndex !== null && Math.abs(activeIndex - localIndex) === 1) { interactiveOffset = hoverOffsetPx / 2; } else if (activeIndex !== null && Math.abs(activeIndex - localIndex) === 2) { interactiveOffset = hoverOffsetPx / 4; } else if (activeIndex !== null && Math.abs(activeIndex - localIndex) === 3) { interactiveOffset = hoverOffsetPx / 8; } return ( {char} ); } export default SpringyText;