Plasma `<mv-plasma>`

자화된 플라스마의 WebGL 배경입니다. 느린 자극 몇 개가 화면을 떠돌고, 그 자기력선이 가는 필라멘트로 빛납니다. 한 극에서 나와 다른 극에 내려앉는 호는 가벼운 반복 난류로 일렁입니다.

작동 방식

자화된 플라스마의 WebGL 배경입니다. 느린 자극 몇 개가 화면을 떠돌고, 그 자기력선이 가는 필라멘트로 빛납니다. 한 극에서 나와 다른 극에 내려앉는 호는 가벼운 반복 난류로 일렁입니다. 전류 구슬이 호를 따라 이동하고, 호는 끝에서 끝까지 세 가지 색으로 변합니다. 포인터는 작은 자석을 지니고 있어 가까운 필라멘트가 그쪽으로 휩니다. 테마 배경 위에 그려지며, 라이트 테마에서는 종이 위의 잉크, 다크 테마에서는 빛나는 선이 됩니다.

카테고리	배경
유형	WebGL 요소 (`<mv-plasma>`)
상태	안정
함께 설치되는 항목	shader
Keywords	safe-rewrite, webgl, shader, plasma, field-lines, magnetic, filaments, turbulence, interactive, hero

When to use

A science, energy, AI or developer product wants a living hero backdrop that reads as precise rather than psychedelic
A launch or event page should answer the pointer with a visible but calm effect, in light and dark themes alike
A dark section needs glowing linework in the brand colors that leaves most of the frame quiet for a headline

Avoid when

Soft, flowing brand color fills the frame with no lines at all → use Mesh Gradient instead
Long body copy sits on top; the filaments cross behind it and hurt readability beyond short headlines

설치

node scripts/add.mjs plasma --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["plasma"], 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, core/observe.js, core/webgl.js, components/shader/shader.js, components/shader/shader.css, components/plasma/plasma.js.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<mv-plasma data-fill></mv-plasma>
<div style="position:relative;display:grid;place-items:center;height:100%;min-height:320px;padding:2rem 1rem;box-sizing:border-box;text-align:center;pointer-events:none">
  <div>
    <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);text-shadow:0 0 28px var(--mv-bg),0 0 10px var(--mv-bg)">Held by the field</p>
    <p style="margin:.6rem auto 0;max-width:26rem;color:var(--mv-fg);text-shadow:0 0 16px var(--mv-bg),0 0 6px var(--mv-bg)">Move your pointer over the arcs: they bend toward it and spark.</p>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`colors`	CSS colors (3)	`var(--mv-accent), color-mix(in oklch, var(--mv-accent) 30%, var(--mv-fg-muted)), a hue 75 degrees before the accent`	Colors along each arc: at the positive poles, midway, at the negative poles. Tokens accepted, read again on theme change. The default third color follows --mv-accent-h and gets lighter in a dark theme.
`scale`	number	`1`	Size of the field (0.25 to 4): larger means fewer poles, longer arcs and a broader ripple.
`turbulence`	number	`1`	Strength of the ripple on the filaments, 0 to 3 (0 = clean field lines).
`intensity`	number	`1`	Filament and glow brightness, 0 to 3.
`density`	number	`1`	Number of filaments per pole (0.3 to 3, 1 = twelve).
`speed`	number	`1`	Time multiplier.
`paused`	boolean		Freezes the field on the current frame.
`interactive`	boolean		Follows the pointer only over the element (otherwise across the whole window).
`dpr`	number	`1.5`	Max pixel density (capped at 2).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Events

Name	Description
`mv-error`	Inherited from `<mv-shader>`: the GLSL failed to compile. The element gets data-error and shows its fallback.

Content structure

Name	Description
`children`	Content placed inside the element sits above the canvas.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events; content placed inside stays in the normal reading order. The loop stops off screen and in hidden tabs, and no WebGL context is created until the element comes near the viewport. Reduced motion (OS or <html data-motion="reduce">) and paused keep one still frame, with no pointer response. Forced colors and print hide the canvas; without WebGL2 a static sketch in the theme tokens is shown. The frame stays mostly the page background, but filaments can cross behind text: keep a headline short or give it a halo or panel in the background color.