Spectral Drift Background React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install three @react-three/fiber

CSS Modules

Usage

Matches your current playground settings.

import SpectralDriftBackground from "./SpectralDriftBackground";

export default function Example() {
  return (
    <SpectralDriftBackground
      colors={[
        "#020617",
        "#22d3ee",
        "#a855f7",
        "#4f46e5"
      ]}
      intensity={1}
      rotation={45}
      speed={0.2}
      autoRotate={0}
      scale={1}
      frequency={1}
      warpStrength={1}
      mouseInfluence={1}
      parallax={0.5}
      noise={0.08}
      minHeight={360}
    />
  );
}

Using Spectral Drift Background

Use this effect behind a hero or a section whose foreground content is supplied by the page. minHeight reserves its space.

Adjust speed and mouseInfluence separately for ambient and pointer motion. transparent lets the effect blend with a background already supplied by the parent.

Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional CSS class names, merged with base component styles.
mouseRef	React.MutableRefObject<{ x: number; y: number }>	No	undefined	Optional pointer ref for external cursor tracking, values in the range [-1, 1].
colors	string[]	No	["#020617", "#22d3ee", "#a855f7", "#4f46e5"]	Array of up to eight colors used to blend the flowing bands.
intensity	number	No	1	Overall brightness of the band colors.
rotation	number	No	45	Base rotation angle for the flow field in degrees.
speed	number	No	0.2	Speed multiplier for the drifting motion.
autoRotate	number	No	0	Additional automatic rotation speed in degrees per second.
scale	number	No	1	Zoom level for the bend pattern.
frequency	number	No	1	Frequency of the bend waves across the backdrop.
warpStrength	number	No	1	How strongly the bands warp and curl.
mouseInfluence	number	No	1	How much the cursor pulls the bands.
parallax	number	No	0.5	How much the field shifts with cursor movement.
noise	number	No	0.08	Amount of grain added to the backdrop.
minHeight	number \| string	No	360	Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string.
transparent	boolean	No	true	Whether the background alpha is transparent.