Plasma <mv-plasma>
WebGL background of magnetized plasma: a few slow magnetic poles wander across the frame and their field lines glow as thin filaments, arcs that leave one pole and land on another, rippled by a light iterated turbulence.
How it works
WebGL background of magnetized plasma: a few slow magnetic poles wander across the frame and their field lines glow as thin filaments, arcs that leave one pole and land on another, rippled by a light iterated turbulence. Beads of current travel along the arcs, which shade through three colors from end to end. The pointer carries a small magnet that the nearby filaments bend into. Drawn on the theme background: ink on paper in a light theme, glowing lines in a dark one.
| Category | Backgrounds |
|---|---|
| Type | WebGL element (<mv-plasma>) |
| Status | stable |
| Also installs | 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
Install
node scripts/add.mjs plasma --out ./src/marvelousAI agent with the Marvelous UI MCP server: install_components({ slugs: ["plasma"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Files copied (dependencies included): 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.
Usage
Canonical markup, to start from and customize with attributes, data-* and CSS variables:
<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 | Type | 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.