Letter Glitch `<mv-letter-glitch>`

单个 canvas 上的字形雨：字符流在一片暗淡的静止字符上逐列落下，每条都有明亮的头部和渐隐的尾巴，故障条带不时把几行字符横向撕开。

工作原理

单个 canvas 上的字形雨：字符流在一片暗淡的静止字符上逐列落下，每条都有明亮的头部和渐隐的尾巴，故障条带不时把几行字符横向撕开。闪烁变体则改为在原地点亮零散的单元格。颜色跟随主题，因此在浅色和深色页面上都适用；指针可以生成字符流，并保持一个稳定的放大镜。

分类	背景
类型	Web Component（`<mv-letter-glitch>`）
状态	稳定版
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

安装

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

使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["letter-glitch"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

复制的文件（含依赖）：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。

用法

标准标记，可在此基础上通过属性、data-* 和 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	类型	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.