Glitchy Text

Installation

pnpm dlx shadcn@latest add @clover-ui/glitchy-text

Usage

import { GlitchyText } from "@/components/glitchy-text";

<GlitchyText className="text-4xl font-bold">SIGNAL LOST</GlitchyText>

Text that looks like a broken screen. Every so often it glitches: faded slices of the text tear sideways, the whole line shakes left and right, and the letters jitter and skew before snapping back. The letters themselves never change.

By default it glitches on its own every few seconds. Set trigger="hover" to glitch only while the pointer is over it, or trigger="always" to keep it glitching. By default the torn slices use the text's own color, so it works in light and dark mode. Set color to red, blue, green, purple or orange to tint the slices. Set color="pixel" for a multicolor glitch: the slices flash random colors and small colored pixel blocks pop up across the text. Pass colors to pick the two slice colors yourself. Screen readers always hear the real text.

<GlitchyText color="pixel">SIGNAL LOST</GlitchyText>

<GlitchyText trigger="hover" colors={["#ef4444", "#22d3ee"]}>
  HOVER ME
</GlitchyText>

With reduced motion on, the text stays still and never glitches.

Props