Aurora Tabs
Navigation
Aurora Flares
A cinematic ribbon of aurora light that bends, shimmers, and softly bleeds across a dark canvas.
Customize
ADVERT
Overview
Aurora Flares is an animated, shader-driven backdrop inspired by aurora flares and orbiting light bands. It gives you a dark canvas with smooth, cinematic color arcs that react subtly to pointer movement.
Props
Use the props below to customise the aurora flares in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| 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. |
Related React components
More components from the same category or sharing similar tags.
