Signal Glitch Title React component
A title that loses signal for a moment: colour channels split and slices of the word jump sideways in short bursts, then it snaps back clean.
About the Signal Glitch Title component
Signal Glitch Title stays perfectly readable almost all of the time. Every few seconds it loses signal for a moment, with colour channels splitting and slices of the word jumping sideways, then it snaps back clean.
The real text never moves. Only the coloured copies on top glitch, so the title stays legible and selectable throughout.
When to use it
Use it for games, music, security and tech launches, or anywhere a little interference suits the mood.
Keep it for titles. On body text or anything people need to read carefully, it only gets in the way.
Installation
Add the Signal Glitch Title component to your project with the shadcn CLI. It lands in components/signal-glitch-title.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/signal-glitch-titleProps
<SignalGlitchTitle /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| text | string | "SIGNAL LOST" |
| as | "h1" | "h2" | "h3" | "p" | "h2" |
| interval Milliseconds between bursts. 0 leaves only the pointer to set one off. | number | 3000 |
| intensity How far the slices jump, in em. | number | 0.06 |
| channels The two split channels. | [string, string] | CHANNELS |
- textstringDefault: "SIGNAL LOST"
- as"h1" | "h2" | "h3" | "p"Default: "h2"
- interval
Milliseconds between bursts. 0 leaves only the pointer to set one off.
numberDefault: 3000 - intensity
How far the slices jump, in em.
numberDefault: 0.06 - channels
The two split channels.
[string, string]Default: CHANNELS
Signal Glitch Title FAQ
- Can I stop the automatic bursts?
- Yes. Set interval to 0 and it only glitches when the pointer enters.
- Does it flash?
- Bursts are brief and stay within the letters, with no full-screen flashing, and they switch off with reduced motion.
- How do I change the colours?
- channels takes the two colours of the split.
- Can I make it stronger?
- Yes. intensity sets how far slices jump, in em.
