'use client'; import * as React from 'react'; import { motion, type Transition } from 'motion/react'; import { useIsInView, type UseIsInViewOptions, } from '@/hooks/use-is-in-view'; const formatCharacter = (char: string) => (char === ' ' ? '\u00A0' : char); const CHAR_STYLE: React.CSSProperties = { position: 'absolute', display: 'inline-block', backfaceVisibility: 'hidden', }; type RollingTextProps = Omit, 'children'> & { text: string; transition?: Transition; delay?: number; } & UseIsInViewOptions; function RollingText({ ref, text, inView = false, inViewMargin = '0px', inViewOnce = true, transition = { duration: 0.5, delay: 0.1, ease: 'easeOut' }, delay = 0, ...props }: RollingTextProps) { const { ref: localRef, isInView } = useIsInView( ref as React.Ref, { inView, inViewOnce, inViewMargin, }, ); const parts = React.useMemo(() => text.split(/(\s+)/), [text]); const stepDelay = transition?.delay ?? 0; let charIdx = 0; return ( {parts.map((part, wi) => { if (/^\s+$/.test(part)) { return {part}; } const chars = Array.from(part); return ( {chars.map((char, ci) => { const thisIdx = charIdx++; const charDelay = delay / 1000 + thisIdx * stepDelay; return ( ); })} ); })} {text} ); } export { RollingText, type RollingTextProps };