Aurora Glow

Aurora Glow

A calm, drifting aurora backdrop for hero sections: three soft color blobs over a dark base, with optional film grain.

What you can set

- Base color and three aurora colors (color tokens supported)

- Speed, blur, intensity and corner radius

- Grain: a static film-grain texture on top

- Animate anyway: off by default, so visitors who ask for reduced motion see a still frame

- Max DPR: caps the canvas pixel density (default 1, since the glow is blurred)

How it behaves

- Drawn on a single 2D canvas.

- The animation loop stops completely when the component is scrolled off screen or the browser tab is hidden, and resumes where it left off.

- With reduced motion enabled, one still frame is drawn and no animation frames run.

- In the Framer editor canvas and static exports (static renderer), and in browsers without a 2D canvas, the same blobs render as plain CSS gradients.

- With Fit Content height it keeps an 800 x 480 shape instead of collapsing.

- No network requests, no external scripts.

Measured in headless Chromium: about 60 animation frames per second while visible; 0 while off screen, while the tab is hidden, with reduced motion, and in the static renderer; no horizontal overflow at 390 px width; server render and hydration with no errors.