Glitch Text `.mv-glitch-text`

RGB-Split-Glitch in reinem CSS: Schmale magenta- und cyanfarbene Streifen des Textes springen in kurzen Schüben seitwärts, dauerhaft oder beim Hover, begrenzt auf weniger als drei Blitze pro Sekunde.

Kategorie	Animierter Text
Typ	Nur CSS (`.mv-glitch-text`)
Status	stabil
Keywords	glitch, rgb-split, cyberpunk, 404, error, retro, hover

When to use

A 404, error or cyberpunk-styled heading needs an RGB-split digital glitch
A link or button label should glitch only on hover or keyboard focus
A text effect must work without JavaScript and stay safe for photosensitive visitors

Avoid when

Large areas or body copy would glitch permanently; the motion hurts readability and comfort
The text should resolve once from random glyphs into the real text → use Scramble Text instead

Installation

node scripts/add.mjs glitch-text --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["glitch-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, components/glitch-text/glitch-text.css.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:grid;gap:1.5rem;justify-items:center;text-align:center">
  <p style="margin:0;font:800 clamp(3rem,9vw,5.5rem)/1 var(--mv-font-mono);letter-spacing:-.04em">
    <span class="mv-glitch-text" data-text="404">404</span>
  </p>
  <p style="margin:0;font:600 clamp(1.1rem,2.4vw,1.4rem)/1.2 var(--mv-font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--mv-fg-muted)">
    <span class="mv-glitch-text" data-text="Signal lost" data-variant="constant" style="--mv-glitch-text-intensity:.6">Signal lost</span>
  </p>
  <div style="display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:.5rem">
    <a class="mv-button" data-variant="outline" href="#" style="font-family:var(--mv-font-mono)">
      <span class="mv-glitch-text" data-text="Reconnect" data-trigger="hover" style="--mv-glitch-text-intensity:1.6">Reconnect</span>
    </a>
    <span class="mv-glitch-text" data-text="Uplink unstable" style="font:700 .9rem var(--mv-font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mv-danger);--mv-glitch-text-intensity:2.2;--mv-glitch-text-duration:2.4s">Uplink unstable</span>
  </div>
</div>

API

Attributes

Name	Typ	Description
`data-text`	string	Required: same text as the content (the decorative copies are built from it).
`data-trigger`	hover	At rest until hovered (hover-capable pointers) or keyboard-focused, on the element or on a surrounding link, button or label.
`data-variant`	constant	Steady stream of bands with no calm phase.

CSS classes

Name	Description
`mv-glitch-text`	On a span / heading. Copy the text into data-text (the decorative copies come from it).

CSS variables

Name	Default	Description
`--mv-glitch-text-intensity`	`1`	Sideways shift amplitude (0 = bands stay aligned).
`--mv-glitch-text-duration`	`3.2s (constant: 2s)`	Length of one cycle. Floored at 2.4s (constant: 1.5s) to stay under the flash limit.
`--mv-glitch-text-color-1`	`magenta`	Color of the band shifted left.
`--mv-glitch-text-color-2`	`cyan`	Color of the band shifted right.

Accessibility

The real text is read once: the two copies are ::before/::after pseudo-elements with empty alt text (content: attr(data-text) / ""), so screen readers skip them, and they ignore the pointer. Visible changes are stepped and never exceed 4 per second (2 flashes), under the WCAG 2.3.1 limit of 3, and durations have a floor. Reduced motion: static text with a faint fixed RGB split. Forced colors: plain system text. The hover trigger also fires on keyboard focus and ignores touch hover.