That's it. Your site now has aurora.

npm install @caustics/aurora

<script>
  import { Aurora } from '@caustics/aurora';
</script>

<Aurora preset="natural" />

npm install @caustics/aurora

import { Aurora } from '@caustics/aurora/react';
return <Aurora preset="natural" />;

npm install @caustics/aurora

import { mount } from '@caustics/aurora';
mount(document.querySelector('#hero'), { preset: 'natural' });

Sensible defaults. Documented types.

Prop

Type

Default

Description

preset

string

"natural"

Named preset. Overrides individual props when set.

colors

string[]

undefined

Override palette. Accepts hex, hsl, or CSS custom properties.

reducedMotion

'pause' | 'static'

'pause'

Behavior when prefers-reduced-motion is active.

class

string

undefined

Additional CSS classes applied to the root element.

A zip. Everything else lives at caustics.dev.

caustics-aurora/
├── svelte/     Aurora.svelte · index.ts · types.ts
├── react/      Aurora.tsx · index.ts · types.ts
├── vanilla/    aurora.ts · compiled .js
├── docs/       README.md · API.md · CHANGELOG.md
├── LICENSE.md  Caustics Commercial License
└── package.json

Aurora renders northern-lights backgrounds using a WebGL fragment shader. Layered vertical curtains of light wave and shimmer horizontally over a dark sky — the motion comes from multi-octave value noise layered with sine fields, so it reads as the organic, undulating color flow of the aurora borealis rather than a repeating loop. Curtains composite additively, blooming overlaps into a soft, lit-from-within glow.

Everything is configurable: palette, sky background, curtain count, vertical falloff, wave amplitude and frequency, speed, and glow intensity. Four presets ship in — natural, vivid, minimal, and storm — each a complete, distinct look.

A single fullscreen quad with no geometry complexity; one draw call per frame. Performance is excellent even on integrated GPUs. The engine carries the full Caustics lifecycle — it pauses off-screen and when the tab is hidden, honors reduced-motion, survives WebGL context loss, and releases its GPU context on teardown. Ships as plain ESM for Svelte, React, and vanilla JS.

That's it. Your site now has aurora.

Sensible defaults. Documented types.

A zip. Everything else lives at caustics.dev.

Ready to ship?