Give your site atmosphere.

Beautiful backgrounds that move with you.

Open Studio Get started

pnpm add @goatsoft/aurora @goatsoft/aurora-vue

Aurora Studio · Glacier at night
Edit in Studio

Layers

Speed
1.00×

Parameters

Curtain
Intensity
0.90
Edge
0.78
Height
0.75
Wave
0.50
Rays
0.60
Rise
0.20
Sway
0.12
Folds
2
Tilt
-0.15
Arc
0.00
Cover
0.15
Glow
0.50

How it works

Uses WebGPU when available, with a CSS fallback.

One GPU device per page

All the backgrounds on a page share one GPU device. They stop drawing when they scroll out of view or the tab is hidden.

CSS gradient fallback

Each background also has a CSS gradient that approximates it. Browsers without WebGPU show the gradient.

Colour in OKLab

Colours blend in OKLab, so a gradient between two bright colours stays bright in the middle.

Generators

17 generators

Try the backgrounds below, or combine them in Studio.

Aurora

Aurora

Drifting ribbons of light. This is the original Aurora shader.

Aurora

Curtain

Hanging curtains with rays that rise from a bright lower edge.

Night sky

Starfield

Three depths of stars, a milky way and the odd meteor.

Gradients

Linear gradient

Two to four colours along an angle, like CSS linear-gradient().

Gradients

Conic

Colours turning slowly around a point.

Gradients

Mesh gradient

Four colours that drift and blend.

Air

Clouds

Cumulus at two depths, lit from one side.

Air

Rain

Rain in three depths, leaning with the wind. Shown here in a storm with lightning.

Air

Lightning

Forked bolts and sky flashes, every few seconds.

Air

Wind

Thin streaks that bend in the gusts.

Earth

Mountains

Ridges that fade into haze. Shown here over a linear gradient.

Earth

Treeline

Rows of spruce silhouettes, fading into the mist behind them.

Earth

Strata

Folded sandstone layers.

Water

Water

Light patterns on the floor of clear water.

Fire

Fire

Flames and rising embers.

Workflow

From Studio to your site

  1. 01

    Design it

    Open Aurora Studio, start from a scene or a blank canvas, and save a .aurora file. The file is plain JSON.

  2. 02

    Import it

    The bundler plugin checks the file when you build, reports mistakes with a line and column, and gives the import a type.

  3. 03

    Add it to a page

    Use the Vue component or the custom element.

Read the guide
Vue
<script setup lang="ts">
import { AuroraBackground } from '@goatsoft/aurora-vue'
import hero from './hero.aurora' // validated and typed at build time
</script>

<template>
  <section class="relative">
    <AuroraBackground :src="hero" /> 
    <h1>Your headline</h1>
  </section>
</template>
HTML
<script type="module">
  import '@goatsoft/aurora/element'
</script>

<section style="position: relative">
  <aurora-bg src="/hero.aurora"></aurora-bg> 
  <h1>Your headline</h1>
</section>
vite.config.ts
import aurora from '@goatsoft/aurora-unplugin/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), aurora()], 
})

The editor

Aurora Studio

Adjust layers, colours and motion. Save a .aurora file for your site.

Open Aurora Studio
Aurora Studio · Golden hour
Edit in Studio

Layers

Speed
1.00×

Parameters

Clouds
Coverage
0.42
Softness
0.45
Light
0.70
Angle
90°
Speed
0.35
Scale
0.85
Sky
1.00

Scenes

Ready-made scenes

Studio includes multi-layer scenes and a starter file for every generator. Open one and change it.

Polar night

A teal and violet aurora over a mountain ridge.

Northern lights

Green curtains with rays rising into violet.

Golden hour

Clouds lit by a low sun.

Shared backgrounds

One background across separate panels

One continuous background across three cards. Toggle it to compare.

Card one

Card two

Card three

How shared backgrounds work

Try it on your site

MIT licensed. Works with Vue or plain HTML.

Open Aurora Studio View on GitHub View on npm