Toggle Sidebar B
AppearanceLight & dark mode D

Aurora

Flowing aurora gradient background.

Default

Colors, speed and blend are wired to the controls underneath. The aurora is drawn in a WebGL fragment shader.

Light previewReplay previewOpen in new tab
New Creative Components

Bring the Arctic to you, with one line of code

Get started Learn more

Customize

Color 1
Color 2
Color 3
Speed1
Blend0.5

API Reference

Aurora

PropTypeDefaultDescription
colorStops[string, string, string]["#5227FF", "#7cff67", "#5227FF"]An array of three hex colors defining the aurora gradient.
speednumber1.0Controls the animation speed. Higher values make the aurora move faster.
blendnumber0.5Controls the blending of the aurora effect with the background.
amplitudenumber1.0Controls the height intensity of the aurora effect.
lightModebooleanfalseRenders the aurora over a white background instead of a transparent one.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • Purely decorative canvas. Place it behind content with enough contrast.