Text Glitch Effect

Text 333

About

Interactive text component with smooth physics-based animations and hover-triggered scrambling effects. Features elegant grayscale styling with cyberpunk-inspired text decoding animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Glitch Effect to your project and fits it to your theme.

Code

How Text Glitch Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TextGlitch } from "@/components/ui/text-glitch-effect";

export default function DemoOne() {
  return (
    <main className="h-screen overflow-hidden">
      <div className="container">
        <TextGlitch text="TEXT FLOW" hoverText="DYNAMIC TEXT" delay={0} />
        <TextGlitch text="HOVER ME" hoverText="FIND ME" href="https://lab.xubh.top/" delay={0.2} />
      </div>
    </main>
  )
}