"use client"; import { animate, createScope, stagger } from "animejs"; import { useEffect, useRef, useState, 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; } const defaultGlyphs = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789"; type AnimeScrambleHeadlineProps = { text?: string; /** Characters shown while a position is still scrambled. */ glyphs?: string; className?: string; /** Shows the final text with no entrance or scramble, even when the OS allows motion. */ reducedMotion?: boolean; }; export function AnimeScrambleHeadline({ text = "Quarterly report locked at 17:42", glyphs = defaultGlyphs, className = "", reducedMotion, }: AnimeScrambleHeadlineProps) { const root = useRef(null); const timerRef = useRef(null); const [scrambled, setScrambled] = useState(null); const shouldReduceMotion = usePrefersReducedMotion(reducedMotion); const visible = shouldReduceMotion ? text : scrambled ?? text; useEffect(() => { if (!root.current || shouldReduceMotion) return; const scope = createScope({ root }).add(() => { animate(".scramble-char", { opacity: [0, 1], y: ["0.65rem", "0rem"], delay: stagger(18), duration: 420, ease: "out(3)", }); }); return () => { scope.revert(); if (timerRef.current) window.clearInterval(timerRef.current); timerRef.current = null; }; }, [shouldReduceMotion, text]); function runScramble() { if (shouldReduceMotion) return; if (timerRef.current) window.clearInterval(timerRef.current); const characters = Array.from(text); let frame = 0; timerRef.current = window.setInterval(() => { frame += 1; if (frame > characters.length * 2) { if (timerRef.current) window.clearInterval(timerRef.current); timerRef.current = null; setScrambled(null); return; } setScrambled( characters .map((character, index) => { if (character === " ") return " "; return index < frame / 2 ? character : glyphs.charAt(Math.floor(Math.random() * glyphs.length)) || character; }) .join("") ); }, 28); } return ( ); }