Vivarium is a set of animated backgrounds for websites. They are not loops. Each one is a small simulation with its own rules, and the rules make things happen.
A war room tracks a front that has not moved in forty years. A city in the rain loses its power one block at a time. Dwarves dig a kingdom into a mountain. Mages raise towers on lines of power. A wyrm sleeps on a spire above a valley, until it wakes. A factory builds itself, a castle walks across painted country, and a tiny solar system lives out its last twenty-two minutes, over and over.
You can read it two ways:
- Living algorithmic art. Generative pieces that do not stop or repeat. The same seed always plays the same story, so a link is an exact world.
- An idle game with no player. Economies, sieges, harvests, and wars run on their own. Watch for a minute, or leave the tab open for a week and look back at what happened.
It is also an experiment. Most of the code here was written with frontier AI coding agents, one world at a time. Each world is a hard brief: a simulation, a renderer, pacing, sound, and taste, all in one file tree. It is a fun way to see what the models can do, and where they still fail.
They still behave like backgrounds: the text over them stays readable, they pause when the tab is hidden and calm down under reduced motion, and they stay small (the engine is about 16 KB, and each world loads only when it is shown).
Contents
Things happen
Every world has its own events, not just its own colors. Here are a few, frame by frame.
Undercity. A runner breaches a corp tower, and the district's grid fails outward from it, block by block.
The Long Siege. Two siege monitors trade broadsides across the front, and hex shields light up where the beams land.
Hive Bloom. A purge fleet lights its torches and burns the creep back to ash. It will grow back.
Cradle of Suns. A massive star dies, and its shell carries the gas back out to make the next ones.
The worlds
A few seconds of each. Click one for what happens in it, and OPTIONS.md for how to tune it.
Instruments
The same idea, applied to other screens. More in the worlds.
| |
|---|
| Sonar. A submarine's passive waterfall. | Approach radar. The sweep paints aircraft onto fading phosphor. |
| Seismograph. Station pens tremble until a quake's waves sweep down the stack. | Abyssal scanner. Marine snow and bioluminescent animals. |
| Martian weather radar. Dust storm cells drift over Jezero. | Petri dish. Artificial life under a fluorescence microscope. |
Basics
Not every site wants a story. Calm presets for product pages, built from the same layer library and tuned behind real text:
| calm-mesh | aurora-night | terminal-rain | fireflies |
|---|
| | | |
| deep-field | flow-lines | paper-grid | nebula-drift |
| | | |
The studio
The studio is where you pick a world, roll seeds, and tune it. It also:
- Makes your own universe. Describe a book, a film, or a game, copy the prompt into any AI, paste back what it writes.
- Plays sound. Generated, no audio files, about 6 KB. Press M.
- Lets you touch a world. A click nudges it, and the nearest thing answers in its own way.
- Keeps a journal. Sightings from common to legendary, moments kept as pictures and clips, and what happened while you were away. Press J.
- Makes wallpapers. A live link for Lively, Plash, or KDE, an offline file, Wallpaper Engine packages, and phone stills and videos.
All of it in docs/STUDIO.md.
Put one on your site
The quickest way: open the studio, pick one, and click Copy prompt for your AI. Paste it into Claude, ChatGPT, Cursor, or v0. The prompt carries the exact configuration and the few rules that keep it right.
Or drop it in yourself.
As a web component:
<script type="module" src="https://unpkg.com/space-background-engine/dist/element.js"></script>
<vivarium-bg skin="void-tactical" seed="orion-7"></vivarium-bg>
The element has two names: <vivarium-bg>, and <bg-engine> from before the project had one. They are the same element and take the same attributes.
Pick a skin, derive a palette from your brand color, and dial the presence down:
<bg-engine skin="matrix-rain" palette="#ff7a1a" intensity="0.6"></bg-engine>
From JavaScript:
import { mount } from 'space-background-engine';
// Full-page background behind everything
mount(document.body, { skin: 'void-tactical', seed: 'orion-7', options: { universe: 'saltwind' } });
// Or inside a positioned container
mount('#hero', { skin: 'undercity', intensity: 0.6 });
mount() returns a handle with canvas, root, pause(), resume(), renderOnce(), onEvent(), and destroy(). Page content stays fully clickable, because the whole background stack has pointer-events: none.
Documentation
| |
|---|
| The worlds | Every world in detail: what you see, what happens, what each seed changes. |
| Options | Each world's options. |
| The studio | Make your own universe, sound, clicking a world, the journal, wallpapers. |
| Wallpapers | Step-by-step guides for Lively, Wallpaper Engine, Plash, KDE, and phones. |
| Reference | Installation, presets, frameworks, configuration, scenes and layers, events, writing a skin, local development. |
| Making a world | The kit, the brief, and the checks, for building a world by hand or with an AI agent. |
| Architecture | How the internals fit together. |
