What Aurora is
Aurora is a WebGL shader that paints continuously animated curves of color across the element. It blends three colors over time using procedural noise, creating slow, organic motion.
The effect is calm and atmospheric. Aurora doesn’t react to scroll or cursor; it loops continuously, providing ambient backdrop motion.
Parameters
| Property | Type | Default | Description |
|---|---|---|---|
| color1 | color | #bdfe1b | Primary color in the gradient ramp. |
| color2 | color | #83d9e1 | Secondary color in the ramp. |
| color3 | color | #a370fc | Tertiary color in the ramp. The three colors blend continuously. |
| speed | number | 0.5 | Animation velocity. 0 freezes the effect; 1 is brisk; values above 2 feel chaotic. |
| blend | number | 0.5 | Softness of the wave edges. 0 is sharp banding; 1 is fully smooth gradient. |
| amplitude | number | 1 | Wave height. Smaller values are flatter and subtler; larger values produce more dramatic curves. |
| blur_intensity | number (0–1) | 0 | Post-process blur on the result. Adds dreamy softness; cheap on GPU. |
| edge_softness | number (0–1) | 0 | Fade the effect toward the edges of its container. Useful for blending into surrounding content. |
| fade_distance | number (0–1) | 0 | Fade strength toward the edges. Pairs with edge_softness. |
Tip
Brand colors as the three inputs produce on-brand ambient motion that feels intentional. Random colors from a palette tool tend to look incoherent.
When Aurora shines
- Hero backgrounds. Aurora behind a heading and CTA reads as polished and modern. Set blur_intensity around 0.3 for a soft, glowy backdrop.
- Section transitions. Place Aurora between two content sections to break up flat backgrounds without being intrusive.
- Card highlights. Aurora behind a single featured card draws the eye without shouting.
- Empty states. Loading screens, empty dashboards, “no results” messages. Aurora makes silent moments feel intentional rather than broken.
Performance notes
- One Aurora per page is comfortable on any device.
- Two or three on the same page is still fine on desktop; mobile starts to feel warm.
- Use breakpoint overrides to disable Aurora on mobile if your site has multiple instances or runs other heavy content. See Responsive breakpoint overrides.
- Aurora lazy-loadsThree.js and the shader bundle on demand. Pages without Aurora don’t pay the cost.
Next steps
- Dot Grid: the cursor-reactive Canvas 2D effect.
- WordPress-only effects: Liquid Ether, Light Rays, and Gradient Blinds available today on WordPress.
- Performance and Core Web Vitals: the broader cost discussion.