The scenes
Every scene is a small artificial-life simulation, not a looped animation. The engine owns the clock, resize handling, DPR cap, pointer input, off-screen pausing, and reduced-motion behavior. The scene owns state, rules, and drawing.
JELLYFISH BLOOM / CURRENT 04LIVE
- CELLS
- —
- JELLIES
- —
- PULSING
- —
- FPS
- —
Click to send a shockwave through the bloom.
Seed 3, columns 110, and speed 1 are fixed in this demo. The palette and calm controls update the running engine without rebuilding the world.
Shared model
Section titled “Shared model”| Concept | Behavior |
|---|---|
| Seed | Same seed and size produce the same world |
| Palette | Four built-ins or a custom palette object |
| Columns | Art-direction target; cell size adjusts |
| Max cells | Caps the grid at 4K and other large surfaces |
| Speed | Time scale; 0 freezes |
| Calm | Removes flicker and sparkle |
| Interactive | Pointer input, on by default |
| Label | Makes the canvas role="img" with a name |
| Events | onEvent receives scene-specific moments |
The scenes
Section titled “The scenes”LagoonA full-canvas marine family with turtle, manta, seahorse, dolphin, hammerhead, and tang variants.
Shark tankSchools, pursuit, splash, and wake. Eight shark kinds and five fish species.
Robot floorPatrols, scans, hauling, charging bays, and a click-to-dispatch floor.
Jellyfish bloomPulsing bells, a divergence-free current, tentacles, and rings of light.
Robot dogA quadruped that trots, sniffs, sits, fetches a ball, and docks to charge.
StarlingsA murmuration folds around a moving predator and scatters on command.
FirefliesA dusk meadow of drifting fireflies that blink, flare, and settle.
AntsA colony forages pheromone trails and carries crumbs back to the nest.
KoiA koi pond with lily pads, ripples, and food that pulls the fish together.
CityA night grid of traffic and lit windows that speeds up on command.
ServersA rack room with blinking LEDs, traveling packets, and a ping alert.
Defaults
Section titled “Defaults”| Scene | columns |
Population default | Interaction |
|---|---|---|---|
| Lagoon | 1944×1760 authoring stage |
8 variants | Passive |
| Sharks | 124 |
Four classic sharks, density 1 |
Pointer flee, click splash |
| Robots | 150 |
Fleet scales with area | Pointer avoidance, click dispatch |
| Jellyfish | 140 |
Bloom scales with area | Pointer current, click shockwave |
| Dog | 150 |
One dog, count scales 1–3 | Pointer tracking, click throw |
| Starlings | 124 |
110 birds | Pointer scatter, click scatter |
| Fireflies | 124 |
70 fireflies | Pointer flare, click flare |
| Ants | 124 |
44 ants | Click crumb |
| Koi | 124 |
7 koi | Click feed |
| City | 124 |
18 cars | Click rush |
| Servers | 124 |
8 racks | Click ping |
All scenes share maxCells: 16000 and maxDpr: 2.
Choosing a scene
Section titled “Choosing a scene”- Lagoon is the immersive marine family. Use a variant when the scene needs a specific animal or mood, not a generic ocean.
- Sharks are the busiest and most narrative. Good for a large hero or a section divider.
- Robots read as work and systems. Good for product, infrastructure, and developer tools.
- Jellyfish are the calmest. Good behind text, in dark sections, and on slow pages.
- The dog is the most legible character. Good for a hero with a command input, a playful empty state, or a landing page.
- Starlings and fireflies are atmospheric. Use them behind headings, quotes, or wide section breaks.
- Ants and koi are small systems with a clear action. Good for explainers and interactive demos.
- City and servers read as infrastructure. Good for developer tools, dashboards, and operations pages.
Every scene is ambient. None of them should carry essential information. Read Accessibility before shipping a scene behind content.
Per-scene references
Section titled “Per-scene references”Each scene page has a live demo, behavior notes, its options table, events, stats, and copy-paste examples: