Glitch Text
Pro
Text that breaks into RGB-split slices in short bursts, at random moments and on hover.
Signal lost
Hover or focus for a burst
Customize
1
2600ms
#ff784f
#ffc24a
Installation
Glitch Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy glitch-text.tsx into components/ui and run npm install motion.
Usage
import { GlitchText } from "@/components/ui/glitch-text";
<GlitchText text="Signal lost" intensity={1} interval={2600} className="text-6xl font-black" />Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to glitch. |
| intensity | number | 1 | How far the slices and color layers jump. |
| interval | number | 2600 | Average milliseconds between automatic bursts. 0 turns them off; hover still works. |
| colors | [string, string] | ["#ff784f", "#ffc24a"] | The two split colors, shown left and right of the text. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion