Plasma

Draws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak. The ground between the ribbons is the page, so it reads on either theme: neon on dark, pastel on light. The pointer draws the plasma toward it. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still two-tone glow stands in. Fills its positioned parent.

Plasma.

move your cursor

Live, from the library itself: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript with its libs

10.2 kB raw

723 B raw of its own, 487 B gzip. The rest is the runtime, the shader runner, the canvas helper and the GL core, loaded once for every effect on the page.

CSS 5.2 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 56 · Firefox 51 · Safari 15; needs webgl2. Elsewhere: without WebGL2, a still glow in both tones.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/plasma

src/pages/index.astro

<section class="relative min-h-[60vh]">
  <Plasma color="var(--primary)" second="oklch(0.7 0.16 200)" />
  <h1 class="relative">Plasma background</h1>
</section>

Without a key the registry answers 401 with an upgrade message. Related free primitives: aurora.

Props

Prop	Type	Default	Description
`color`	`string`	`'oklch(0.62 0.2 290)'`	First tone; any CSS colour, theme tokens included.
`second`	`string`	`'oklch(0.7 0.16 200)'`	Second tone the ribbons slide toward.
`core`	`string`	`first tone lifted 70 % toward white`	The hottest part of a ribbon.
`scale`	`number`	`3`	Field scale: larger is busier.
`speed`	`number`	`1`	Drift speed multiplier; accumulated, so a change never jumps.
`bands`	`number`	`1.6`	How many ribbons the field folds into.
`glow`	`number`	`1`	Ribbon brightness and width.
`pull`	`number`	`0.5`	How strongly the pointer draws the plasma; 0 turns the pointer off.

Reduced motion

No loop: one frame at a fixed moment, drawn once; the pointer does not pull it.

With `ClientRouter`

Bound through the shared runtime: loop, observers and pointer listener are released before the swap and the WebGL context is lost on purpose after it; five round trips leave one context. Under transition:persist the canvas keeps its context and starts again on the next page.

Why it is built this way

Interference, not noise: four sines (one of them a ring whose centre drifts) sum to a field that never repeats in view and costs a handful of instructions per pixel.
Folded by a cosine into bands and raised to the fourth power: thin bright ribbons with soft falloff, and real ground between them.
The tone slides along the field value, so colour follows the shape of the ribbons instead of sweeping across the box.
Premultiplied over a transparent canvas: neon on a dark page, pastel light on a light one, from the same two tokens.
The pointer pulls the coordinates toward it with a gaussian falloff: the ribbons bend toward the cursor instead of a glow following it.

Replaces: Plasma (React Bits) · Plasma / neon shader backgrounds. See the migration table.

Aurora Background

Backgrounds

Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps.

every browseralways

Liquid Chrome

Pro

Draws a pool of liquid metal.

every browseralwayspointer

Silk

Pro

Draws a sheet of fabric drifting in slow folds, lit from one side: a warped height field on the GPU, normals from finite differences, a diffuse body in the colour and a narrow sheen in a second tone.