Background Studio

Pick a background, tune it on the big stage and copy the code. The picker switches backgrounds in place; each one also has its own page.

Your system asks for reduced motion: the stage shows each background's still frame and nothing moves.

Aurora

Soft curtains of colored light drift across a background. Its own page

It follows the controls: change an option and the code changes with it.

<script src="https://search.axi0.io/axi0/motion/motion.js" 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.

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