Glitch Text

Cyberpunk-style glitch effect with layered text-shadow offsets and random jitter keyframes.

GLITCH

Code

import { GlitchText } from "@/components/ui/glitch-text"

export default function Example() {
  return (
    <GlitchText text="GLITCH" className="text-5xl font-black tracking-widest" />
  )
}

Installation

$npx particleui-cli add glitch-text

Usage

TSX

import { GlitchText } from "@/components/ui/glitch-text"

export default function Example() {
  return (
    <GlitchText text="GLITCH" className="text-5xl font-black tracking-widest" />
  )
}

Props

Prop	Type	Default	Required
text	string	—	yes
className	string	—	no
intensity	number	`1`	no

Details

Source filecomponents/ui/glitch-text.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—