Framer Motion으로 글자가 춤추는 텍스트 로테이션 애니메이션 만들기

const splitIntoCharacters = (text: string): string[] => {
  if (typeof Intl !== 'undefined' && Intl.Segmenter) {
    const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
    return Array.from(segmenter.segment(text), segment => segment.segment);
  }
  return Array.from(text);
};

const getStaggerDelay = (index: number, totalChars: number): number => {
  if (staggerFrom === 'first') return index * staggerDuration;
  if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration;
  if (staggerFrom === 'center'

<AnimatePresence mode="wait">
  <motion.div key={currentTextIndex}>
    {elements.map((wordObj, wordIndex) => (
      <span className="inline-flex overflow-hidden">
        {wordObj.characters.map((char, charIndex) => (
          <motion.span

useEffect(() => {
  if (!auto) return;
  const intervalId = setInterval(next, rotationInterval);
  return () => clearInterval(intervalId);
}, [next, rotationInterval, auto]);

useImperativeHandle(ref, () => ({
  next,        // 다음 텍스트로
  previous,    // 이전 텍스트로
  jumpTo,      // 특정 인덱스로 이동
  reset,       // 첫 번째 텍스트로 리셋
}));

const textRef = useRef<RotatingTextRef>(null);
 
<button onClick={() => textRef.current?.next()}>다음</button>
<RotatingText ref={textRef} texts={['Hello', 'World']} />

<span className="sr-only">{texts[currentTextIndex]}</span>
<motion.div aria-hidden="true">
  {/* 애니메이션 요소 */}
</motion.div>

<RotatingText
  texts={['accessible UIs', 'scalable systems', 'beautiful interfaces']}
  mainClassName="inline-block px-2 bg-base-200 rounded-md overflow-hidden"
  staggerFrom="last"
  initial={{ y: '100%' }}
  animate={{ y: 0 }}
  exit={{ y: '-120%' }}