Plasma
plasmaRaymarches a flowing plasma field with pointer disturbance and direction controls.
Usage
Basic usage
Put it into the relative overflow-hidden container; the default main color reads --color-chart-1, adaptive light and dark, surging upward.
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<Plasma />
<div className="relative z-10 flex h-full items-center justify-center text-white/80">
Plasma
</div>
</div>Custom color · Reciprocating flow
color connects to any CSS color; direction="pingpong" allows the plasma to reciprocate smoothly in forward and reverse directions (smoothstep slows down without sudden changes).
<Plasma color="oklch(0.72 0.22 30)" direction="pingpong" speed={1.4} />Darken background · Turn off interaction
opacity darkens as a soft background; mouseInteractive={false} turns off pointer disturbance and does not hang up monitoring, purely automatic flow.
Hulian component library
Plasma · WebGL · Light and dark adaptive
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<Plasma opacity={0.5} mouseInteractive={false} scale={1.3} />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-2">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Plasma · WebGL · Light and dark adaptive</p>
</div>
</div>Reverse flow
direction="reverse" Let the plasma sink downwards to match the purple color.
<Plasma color="oklch(0.65 0.24 290)" direction="reverse" />When to Use
Use it for a restrained, single-color plasma flow with a central glow and controllable direction. For intertwined two-color bands, use PlasmaWave; for pointer-stirred liquid color, use LiquidEther; for regular geometry, use DotPattern.
Import
import { Plasma } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | --color-chart-1 | Plasma main color, CSS color string; chart token is taken by default; pass null/parse failure and return to shader native color (not dyed) |
| speed | number | 1 | Flow speed factor (internally multiplied by 0.4 to feed the shader to align with the original); the larger, the faster |
| direction | "forward" | "reverse" | "pingpong" | "forward" | Flow direction: upward surge / reverse sinking / forward and reverse smooth reciprocation (smoothstep) |
| scale | number | 1 | Field of view zoom; the larger the screen, the closer the texture is, and the smaller the texture is, the denser it is |
| opacity | number | 1 | Overall opacity 0–1 (overlayed on shader alpha); used to darken soft backgrounds |
| mouseInteractive | boolean | true | Lets the pointer distort the flow; when false, motion is automatic and no pointer listener is attached |
| className | string | — | Passthrough to root (canvas container or fallback div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL; default chart token radial gradient (retains center glow look and feel) |
Usage Guidelines
- The component covers the entire canvas, the parent container must be `relative` + `overflow-hidden`, and the overlay content must be `relative z-10`, otherwise the content [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]] will be covered.
- WebGL client component (
"use client"); only fallback is rendered during the SSR phase. - When
coloris passed tovar(--color-…)and parsed by the off-screen canvas, it must be prefixed with--color-. If the parsing of barevar(--primary)fails, the original color will be returned instead of the theme color [[oklch-css-var-color-must-parse-via-offscreen-canvas]] you want. - Headless screenshots can capture a still or blank frame when rAF is throttled. Verify motion on a real device or with Playwright measurements; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 285)" }}>
<Plasma
speed={1}
direction="forward"
scale={1}
opacity={1}
mouseInteractive={true}
/>
</div>