Prism Drift

A four-corner gradient warped by an fbm flow field with chromatic dispersion at the peaks and iridescent rainbow shimmer — six color presets, cursor eddy, pauses when off-screen.

prism-drift

Backgrounds are awesome :)

0px

Customize

Edit props; preview updates instantly.

Customize

Palette

Layout

Softness

0.76

Intensity

1.10

Grain

0.20

Speed

0.60x

Drift

0.050

Mouse pull

0.40

Props

Props accepted by PrismDrift.

Prop	Type	Default	Description
children	ReactNode	—	Content rendered above the canvas. Wrapped in `relative z-10` so layout sits on top of the gradient.
palette	"ember" \| "iris" \| "ocean" \| "candy" \| "void" \| "silver"	"ember"	Color preset. Each preset is a multi-stop radial palette: index 0 sits at the corner (brightest), the last stop blends into the background at the falloff radius.
colors	string[]	—	Custom multi-stop palette (2–6 entries). Same convention as the presets: index 0 = bright inner stop, last = outer stop. Accepts hex, `rgb()`/`rgba()`, or `hsl()`. Overrides `palette`.
layout	"diagonal" \| "anti-diagonal" \| "corners"	"diagonal"	Which corners are lit. `diagonal` = top-right + bottom-left (matches the reference shape); `anti-diagonal` flips to top-left + bottom-right; `corners` lights all four.
softness	number	0.72	Glow falloff radius (0–1). Higher = blobs bleed further across the canvas. Internally maps to a Gaussian alpha falloff so the edge is always smooth.
intensity	number	1.1	Color brightness multiplier (0–2). At `1` the palette renders at its native brightness; above `1` lets the corners blow out for a hot-glow look.
grain	number	0.18	Grain dither amount (0–0.5). Modulated by local luminance — dark zones stay clean, the gradient edges acquire a gritty film-stock dither.
speed	number	0.6	Animation speed multiplier. `0` freezes the anchors on their corner positions.
drift	number	0.05	How far each anchor orbits its corner (0–0.2 in UV units). Independent phase per anchor so the blobs breathe asynchronously.
mouseFollow	boolean	true	Pointer subtly tugs the nearest anchor toward the cursor — keeps the orbital drift visible, just biased toward the pointer.
mouseInfluence	number	0.4	Cursor pull strength (0–1).
backgroundColor	string	palette's bg	Solid fill drawn behind the glows. Defaults to the preset's background (typically black). Used as the reduced-motion CSS fallback base.
className	string	—	Extra class names merged onto the outermost wrapper. Width and height are governed here — the canvas fills the container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/prism-drift.json

Usage

Import the component and drop it into a render.

demo.tsx21 lines

import { PrismDrift } from "@/components/lazy-ui/prism-drift";

export function Demo() {
  return (
    <PrismDrift
      palette="ember"
      layout="diagonal"
      softness={0.76}
      intensity={1.1}
      grain={0.2}
      speed={0.6}
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1 className="text-center text-5xl font-light tracking-tight text-white">
          Backgrounds are awesome :)
        </h1>
      </main>
    </PrismDrift>
  );
}