Glitch Text
A multi-modal cybernetic glitch typography component featuring 5 distinct animation variants (RGB split chromatic aberration, cyberpunk clip-slicing, analog VHS tracking loss, matrix rune scramble decode, and electrical voltage surge).
EASYUI KINETIC MOTION
variant: rgb-splittrigger: continuousintensity: medium
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/glitch-text
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text string to animate with the cybernetic glitch effects |
| variant | 'rgb-split' | 'slice' | 'vhs' | 'scramble' | 'pulse' | 'rgb-split' | Visual animation mode: chromatic aberration, horizontal slicing, VHS jitter, matrix decode, or voltage pulse |
| trigger | 'continuous' | 'hover' | 'click' | 'continuous' | Interaction trigger mode governing when the glitch animation activates |
| color1 | string | '#00e571' | Primary chromatic aberration color (alias: greenColor) |
| color2 | string | '#8b00ff' | Secondary chromatic aberration color (alias: purpleColor) |
| intensity | 'low' | 'medium' | 'high' | 'medium' | Glitch magnitude scaling multiplier for displacement, skew, and jitter |
| duration | number | 0.5 | Duration in seconds of an active glitch burst cycle |
| repeatDelay | number | 2.5 | Rest interval in seconds between continuous glitch bursts |
| as | keyof JSX.IntrinsicElements | 'span' | HTML tag to render as (e.g. 'h1', 'h2', 'span', 'p', 'div') |
| className | string | — | Additional CSS classes for font size, weight, color, and positioning |