Distort Text

import { DistortText } from "@/components/ui/distort-text";

export default function DemoFun() {
  return (
    <DistortText className="font-mono text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl leading-relaxed px-4 sm:px-8">
      <p>
        🚀 Welcome to the playground of wobbly words! Every hover gives these
        letters a personality crisis—they bend, twist, and then politely snap
        back like nothing ever happened.
      </p>

      <div className="mt-4" />

      <p>
        🎭 It’s text, but dramatic. Sometimes it wobbles like jelly, sometimes it
        glitches like the Matrix. Don’t worry—it always reforms, just waiting
        for you to poke it again.
      </p>

      <div className="mt-4" />

      <p>
        🌊 Think of it as surfing letters—ride the wave of distortion and watch
        your words come alive. Static text is sooo last season.
      </p>

      <div className="mt-4" />

      <p>
        🎉 Go ahead, hover away. This isn’t just reading—it’s text with a sense
        of humor!
      </p>
    </DistortText>
  );
}