Classic plasma: a small buffer of interfering sine waves mapped through a color gradient and upscaled smooth. Canvas, no dependencies.
npx shadcn@latest add https://hyperblur.dev/r/plasma.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/plasma.tsx.
import { Plasma } from "@/components/hyperblur/plasma"
<div className="relative"><Plasma /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#0b0e14", "#2f7bff", "#19c3f5"] | Gradient stops from darkest to brightest. Any CSS colors, two or more. |
| speed | number | 1 | Animation speed multiplier. |
| scale | number | 1 | Blob size. Bigger means larger, softer blobs. |
| opacity | number | 0.8 | Overall opacity of the canvas. |
| seed | number | 1 | Same seed, same picture. |