Letter Glitch `<mv-letter-glitch>`

Como funciona

Chuva de glifos em um único canvas: fluxos caem coluna por coluna sobre um campo de caracteres tênues em repouso, cada um com uma cabeça brilhante e uma cauda que se apaga, enquanto faixas de glitch deslocam algumas linhas para o lado de vez em quando. Uma variante de cintilação acende, em vez disso, células espalhadas no próprio lugar. As cores seguem o tema, então funciona em páginas claras e escuras; o ponteiro pode semear fluxos e manter uma lupa estável.

Categoria	Fundos
Tipo	Web Component (`<mv-letter-glitch>`)
Status	estável
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

Instalação

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

Agente de IA com o servidor MCP do Marvelous UI: install_components({ slugs: ["letter-glitch"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Arquivos copiados (dependências incluídas): 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.

Uso

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis CSS:

<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	Tipo	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.