Aurora Flares
Backgrounds
Spectral Drift Background
Flowing spectral bands with a cursor-reactive warp and soft atmospheric glow.
Customize
ADVERT
Overview
Spectral Drift Background creates smooth, layered color ribbons that drift and bend with your cursor. The background stays luminous without overpowering the foreground, giving you a premium atmospheric canvas. Use it for hero sections, launch highlights, and immersive product pages.
Props
Use the props below to customise the spectral drift background in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | undefined | Optional class name for layout control. |
| 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. |
Related React components
More components from the same category or sharing similar tags.
