Letter Glitch `<mv-letter-glitch>`

1 つの canvas に降るグリフの雨：かすかに静止した文字のフィールドの上を、明るい先頭と消えていく尾を持つストリームが列ごとに落ちていき、ときおりグリッチの帯が数行を横に引き裂きます。

仕組み

1 つの 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.