Aurora Flares React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install three @react-three/fiber @react-three/drei

CSS Modules

Usage

Matches your current playground settings.

import AuroraFlaresBackground from "./ColorBendsBackground";

export default function Example() {
  return (
    <AuroraFlaresBackground
      colors={[
        "#ff5c7a",
        "#8a5cff",
        "#00ffd1"
      ]}
      rotation={30}
      speed={0.3}
      scale={1.2}
      frequency={1.4}
      warpStrength={1.2}
      mouseInfluence={0.45}
      noise={0.08}
    />
  );
}

Using Aurora Flares

Use Aurora Flares behind a hero or section with its own foreground text. Set minHeight to reserve the space before the effect loads.

Adjust mouseInfluence separately from speed to keep pointer movement subtle. A restrained palette usually gives headings better contrast.

Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional CSS class names, merged with base component styles.
mouseRef	string	No	undefined	Mouse Ref.
colors	string[]	No	["#ff5c7a", "#8a5cff", "#00ffd1"]	Array of up to three hex color strings used to paint the main bands and halos.
rotation	number	No	30	Rotation of the color bands in degrees, relative to the horizontal axis.
speed	number	No	0.3	Overall animation speed multiplier used when advancing the shader time.
scale	number	No	1.2	Uniform scale factor applied to the internal UV coordinates to zoom the effect in or out.
frequency	number	No	1.4	Controls how tightly the color bands curve; higher values create more frequent bends.
warpStrength	number	No	1.2	Amplitude of the band warping used to create the flowing aurora shape.
mouseInfluence	number	No	0.45	How strongly pointer movement influences the flow of the background when a mouse ref is wired up.
noise	number	No	0.08	Strength of the subtle film grain applied on top of the colors.
minHeight	number	No	360	Min Height.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.