Letter Glitch `<mv-letter-glitch>`

Glyph rain on one canvas: streams fall column by column over a field of faint resting characters, each with a bright head and a fading tail, while glitch bands tear a few rows sideways now and then.

How it works

Glyph rain on one canvas: streams fall column by column over a field of faint resting characters, each with a bright head and a fading tail, while glitch bands tear a few rows sideways now and then. A flicker variant lights scattered cells in place instead. Colors follow the theme, so it works on light and dark pages; the pointer can seed streams and hold a steady lens.

Category	Backgrounds
Type	Web Component (`<mv-letter-glitch>`)
Status	stable
Keywords	safe-rewrite, matrix, glyph-rain, glitch, terminal, code, canvas, characters, background, hero

When to use

A developer, security or AI product hero wants a field of falling characters behind its headline
A section needs a code-like texture that stays readable in both light and dark themes
The cursor should leave falling streams where it passes, for a playful terminal mood

Avoid when

Only a headline should resolve from random glyphs, not the whole background → use Scramble Text instead
An image or video should be redrawn as characters → use ASCII instead

Install

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

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["letter-glitch"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/i18n.js, core/motion.js, components/letter-glitch/letter-glitch.js, components/letter-glitch/letter-glitch.css.

Usage

Canonical markup, to start from and customize with attributes, data-* and CSS variables:

<div style="display:grid;gap:1rem;width:100%">
  <mv-letter-glitch vignette="both" interactive style="min-height:320px;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);--mv-letter-glitch-bg:var(--mv-bg-subtle);display:grid;place-items:center;text-align:center;padding:1.5rem">
    <div style="pointer-events:none">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em;color:var(--mv-fg)">Ship it before the build cools</p>
      <p style="margin:.6rem 0 0;font:500 .85rem/1.4 var(--mv-font-mono);color:var(--mv-fg-muted)">v4.2 deployed to 38 regions · move the pointer over the rain</p>
    </div>
  </mv-letter-glitch>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem">
    <mv-letter-glitch variant="flicker" chars="01" size="14" density="0.04" vignette="outer" style="min-height:160px;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl)"></mv-letter-glitch>
    <mv-letter-glitch colors="#f59e0b, #ef4444" chars="ABCDEFGHJKLMNPQRSTUVWXYZ" size="13" speed="1.4" glitch="3" instant vignette="outer" style="min-height:160px;border-radius:var(--mv-radius-xl);--mv-letter-glitch-bg:oklch(0.17 0.02 40);--mv-letter-glitch-head:#fff7ed;--mv-letter-glitch-rest:oklch(1 0 0 / 0.08);--mv-letter-glitch-band:#22d3ee"></mv-letter-glitch>
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`variant`	rain \| flicker	`rain`	Streams that fall column by column, or scattered cells that flash and cool down in place.
`colors`	list of CSS colors	`--mv-letter-glitch-1/2/3`	Trail colors, one picked per stream (rain) or per flash (flicker). Up to 8.
`chars`	string	`0-9, A-F, <>{}[]/=+*:#`	Character set (graphemes, emoji and CJK supported; the widest glyph sets the column width).
`size`	number	`16`	Glyph size in px (8 to 48).
`speed`	number	`1`	Speed multiplier for falling, fading and swaps.
`density`	number	`0.05`	Share of the grid that swaps glyph on each 50 ms tick (0-1); in flicker, the share that lights up.
`vignette`	outer \| center \| both \| none	`outer`	Mask on the rain: fade at the top, bottom and sides, a clearing in the center for text, both, or none.
`glitch`	number	`1`	How often glitch bands tear rows sideways (0 turns them off, 2 doubles the rate).
`instant`	boolean		Tails stay at full color and cut off sharply instead of fading.
`interactive`	boolean		The pointer seeds a stream in each column it crosses and holds a steady, glowing lens around itself.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0); ignores the pointer unless interactive.

Content structure

Name	Description
`(children)`	Content placed inside sits above the rain.

CSS variables

Name	Default	Description
`--mv-letter-glitch-1 / -2 / -3`	`accent, accent hue -55, accent hue +40`	Default trail colors, darker in the light theme.
`--mv-letter-glitch-head`	`fg mixed with accent`	Color of the stream heads (rain) and of the brightest flashes (flicker), with a soft glow.
`--mv-letter-glitch-rest`	`fg 11%`	Faint resting glyphs between the streams.
`--mv-letter-glitch-band`	`accent hue +160`	Color of the glitch bands.
`--mv-letter-glitch-bg`	`transparent`	Background behind the rain.
`--mv-letter-glitch-fade`	`22%`	Height of the top and bottom fades of the outer vignette.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events; content placed inside stays readable by assistive tech. With data-fill and without interactive, the whole element ignores the pointer. The loop stops off screen and in hidden tabs, and paints at most 30 times per second. Reduced motion (OS or [data-motion="reduce"]): one settled frame with trails, no falling, flicker or glitch bands. Forced colors and print hide the canvas. Limit: the glyphs are canvas pixels, so the pointer lens is a visual effect only.