"use client"; import { createScope, createTimeline, utils } from "animejs"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; type KineticWordRotatorProps = { words: string[]; prefix?: string; suffix?: string; interval?: number; /** Controlled paused state. Leave undefined to let the built-in control own it. */ paused?: boolean; defaultPaused?: boolean; onPausedChange?: (paused: boolean) => void; /** Renders the built-in pause control. Only hide it when you provide your own pause mechanism. */ showControl?: boolean; /** Sentence read by assistive technology. Defaults to the prefix, first word, and suffix. */ accessibleText?: string; /** Forces reduced motion: the loop stops on the current word, as it does for the OS preference. */ reducedMotion?: boolean; className?: string; }; const reducedMotionQuery = "(prefers-reduced-motion: reduce)"; function subscribeToReducedMotion(onChange: () => void) { const query = window.matchMedia(reducedMotionQuery); query.addEventListener?.("change", onChange); return () => query.removeEventListener?.("change", onChange); } function getReducedMotion() { return window.matchMedia(reducedMotionQuery).matches; } function getServerReducedMotion() { return false; } export function KineticWordRotator({ words, prefix = "", suffix = "", interval = 2200, paused, defaultPaused = false, onPausedChange, showControl = true, accessibleText, reducedMotion = false, className = "", }: KineticWordRotatorProps) { const root = useRef(null); const activeIndex = useRef(0); const [internalPaused, setInternalPaused] = useState(defaultPaused); const prefersReducedMotion = useSyncExternalStore(subscribeToReducedMotion, getReducedMotion, getServerReducedMotion); const isPaused = paused ?? internalPaused; const canRotate = words.length > 1 && !reducedMotion && !prefersReducedMotion; const running = canRotate && !isPaused; const wordCount = words.length; const wordsKey = words.join("|"); const togglePaused = () => { const next = !isPaused; if (paused === undefined) setInternalPaused(next); onPausedChange?.(next); }; useEffect(() => { if (!root.current || wordCount < 2) return; const scope = createScope({ root }).add(() => { const nodes = utils.$(".netter-rotating-word"); if (activeIndex.current >= nodes.length) activeIndex.current = 0; nodes.forEach((node, index) => { utils.set(node, index === activeIndex.current ? { opacity: 1, y: "0%" } : { opacity: 0, y: "70%" }); }); if (!running) return; const rotate = () => { const current = activeIndex.current; const next = (current + 1) % nodes.length; utils.set(nodes[next], { y: "70%" }); createTimeline({ defaults: { duration: 460, ease: "out(4)" } }) .add(nodes[current], { opacity: 0, y: "-70%" }, 0) .add(nodes[next], { opacity: 1, y: "0%" }, 0); activeIndex.current = next; }; const timer = window.setInterval(rotate, interval); return () => window.clearInterval(timer); }); return () => scope.revert(); }, [wordsKey, wordCount, interval, running]); const sentence = accessibleText ?? prefix + (words[0] ?? "") + suffix; return ( {sentence} {showControl && canRotate ? ( ) : null} ); }