Plasma Background for React

A demoscene plasma, tuned to sit behind content: soft bands of colour sweep across the section, ring around hot spots and slowly shift through the palette, pastel sky, lavender, rose and peach on a light page and deep indigo, violet, magenta and amber on a dark one. Four soft grey waves slide past each other in CSS, a white veil fades in and out over them, and an SVG gradient map turns their mix into colour, the demoscene's lookup table done by the browser, with no canvas and no script. The bands run through the palette and back, so each colour only ever meets its neighbours and nothing turns muddy.

Use it behind a music app's hero, a hackathon splash or a retro launch page. For one smooth sweep of colour without bands, use Silk; for the same gradient map with a thermal palette and drifting hot spots, Heatmap; for an iridescent foil sheen, Hologram.

Installation

Usage

import { Plasma } from "@/components/ui/plasma";

<Plasma className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Turn up the signal</h1>
</Plasma>

Plasma is a container: whatever you put inside sits on top of the colour, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Subtle

intensity="subtle" lays more of your page's background over the plasma, so body text and buttons read easily on it; scale={1.5} packs the bands tighter, which suits a smaller box.

Colors

colors takes 3 to 8 hex colours, used in both colour schemes; here the demoscene original, magenta, purple, cyan, yellow and lime, at full strength (intensity="strong"), with shift={0.6} sliding the palette further and speed={1.5} moving faster. At full strength it's loud and the same in both colour schemes, so put copy on a card.

Accessibility

The plasma is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion the waves and the palette hold still, and a still plasma stays. Nothing flashes: the palette slides once every 16 seconds and back.

Put copy over it in your foreground colour (text-foreground). With the default palettes, the default medium keeps it above 8:1 in light mode and above 5:1 in dark mode at the worst moment, and subtle higher still. At strong your page's background no longer softens it, and with your own colors it depends on them: check the contrast, and keep copy on a surface over a loud palette.

FAQ

API Reference