"use client"; import { animate, createScope, stagger } from "animejs"; import { useEffect, useRef, useSyncExternalStore } from "react"; const reducedMotionQuery = "(prefers-reduced-motion: reduce)"; function subscribeToReducedMotion(callback: () => void) { const query = window.matchMedia(reducedMotionQuery); query.addEventListener("change", callback); return () => query.removeEventListener("change", callback); } function usePrefersReducedMotion(force?: boolean) { const prefersReducedMotion = useSyncExternalStore( subscribeToReducedMotion, () => window.matchMedia(reducedMotionQuery).matches, () => false ); return Boolean(force) || prefersReducedMotion; } type AnimeStaggerWordmarkProps = { word?: string; className?: string; /** Shows the replay button when motion is allowed. */ showReplay?: boolean; /** Renders the final wordmark with no animation, even when the OS allows motion. */ reducedMotion?: boolean; }; export function AnimeStaggerWordmark({ word = "Harbor", className = "", showReplay = true, reducedMotion, }: AnimeStaggerWordmarkProps) { const root = useRef(null); const scopeRef = useRef | null>(null); const shouldReduceMotion = usePrefersReducedMotion(reducedMotion); const letters = Array.from(word); useEffect(() => { if (!root.current || shouldReduceMotion) return; const scope = createScope({ root }).add((self) => { const play = () => { animate(".wordmark-letter", { opacity: [0, 1], y: ["1rem", "0rem"], rotate: [-8, 0], delay: stagger(45), duration: 520, ease: "out(4)", }); }; self?.add("replay", play); play(); }); scopeRef.current = scope; return () => { scope.revert(); scopeRef.current = null; }; }, [shouldReduceMotion, word]); return (

{word}

{showReplay && !shouldReduceMotion ? ( ) : null}

); }