interactive-scrambled-text

import React from 'react';
import InteractiveScrambledText from '@/components/ui/interactive-scrambled-text';


function InteractiveScrambledTextDemo() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-white p-8 dark:bg-black transition-colors duration-300">
      <div className="w-full max-w-4xl">
        <InteractiveScrambledText
          radius={120}
          duration={1.5}
          speed={0.4}
          scrambleChars={'.:'}
        >
          Move your cursor over this text. Based on the pointer's proximity,
          the characters will scramble and then resolve back to their original
          state. This effect is created using GSAP's SplitText and
          ScrambleText plugins for high-performance animation.
        </InteractiveScrambledText>
      </div>
    </main>
  );
}

export default InteractiveScrambledTextDemo;