Letter Glitch `<mv-letter-glitch>`

하나의 캔버스에 내리는 글리프 비입니다. 희미하게 멈춰 있는 문자들 위로 밝은 머리와 사라지는 꼬리를 가진 흐름이 열마다 떨어지고, 이따금 글리치 띠가 몇 줄을 옆으로 찢어 놓습니다.

작동 방식

하나의 캔버스에 내리는 글리프 비입니다. 희미하게 멈춰 있는 문자들 위로 밝은 머리와 사라지는 꼬리를 가진 흐름이 열마다 떨어지고, 이따금 글리치 띠가 몇 줄을 옆으로 찢어 놓습니다. 깜박임 변형은 대신 흩어진 셀을 제자리에서 밝힙니다. 색상은 테마를 따르므로 라이트와 다크 페이지 모두에서 작동하며, 포인터로 흐름을 만들고 고정된 렌즈를 유지할 수 있습니다.

카테고리	배경
유형	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.