Aurora
Soft curtains of colored light drift across a background.
- element
- webgl
- gradient
- ambient
- hero
- since 0.1
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Aurora example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<axi0-aurora cover colors="#f6a04d,#ff6b8b,#8a7dff"></axi0-aurora>import { Aurora } from "./motion/react/Aurora";
<Aurora /><script setup lang="ts">
import Aurora from "./motion/vue/Aurora.vue";
</script>
<template>
<Aurora />
</template>const fx = document.createElement("axi0-aurora");
document.querySelector("#hero").append(fx);The wrappers: Aurora.tsx (React, TypeScript) and Aurora.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
colors | #f6a04d,#ff6b8b,#8a7dff | three colors, left to right |
speed | 1 | how fast it drifts |
amplitude | 1 | how far the curtain folds up and down |
glow | 0.85 | brightness (0 to 1) |
cover | false | fill the nearest positioned parent, behind its content |
Accessibility
Drawn by the shared WebGL runner at a reduced resolution; the frame loop stops off screen and in hidden tabs; reduced motion draws one still frame. Without WebGL it shows nothing and the page's own background stays.
Size
aurora.js is 0.7 KB gzip, with gl.js 2.1 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.