AI CSS Animations

Slime Mold Network

Top-down over an agar plate on a dark bench, a chrome-yellow slime mold grown by 54,000 simulated agents fans out from one inoculum, reaches ten oat flakes and thins from a fine branching mesh into a few glossy tubes linking them, as a time-lapse clock runs to 26 hours.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
Canvas
Topics
Particles
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Physarum polycephalum is a yellow slime mold whose single giant cell spreads as a fan of veins, then strengthens the tubes that carry the most flow and abandons the rest. In 2010 Atsushi Tero, Toshiyuki Nakagaki and colleagues placed oat flakes in the pattern of cities around Tokyo and found that the network it grew resembled the region's rail system. The same year Jeff Jones published an agent model in which thousands of simple particles follow and deposit a chemical trail, reproducing the organism's branching and self-organizing networks. Biologists, network designers and generative artists use such simulations to show planning that emerges with no planner.

The prompt

Make a 10-second time-lapse of a slime mold network grown by an agent simulation: from one inoculum on an agar plate, a yellow plasmodium fans out, finds ten oat flakes and thins into a few glossy tubes that link them.

<inputs>
If I don't give you something, use the default and don't ask.
- Lab: Thornwick Mycology Lab (fictional).
- Title: "Ten oat flakes, one network"
- Line: "A Physarum agent model: 54,000 agents on agar"
- Closing caption: "No agent sees the map. The trails do the planning."
- Time-lapse clock: 0 h to 26 h.
- Length: 10 seconds.
</inputs>

<direction>
- Palette, a lit plate on a dark bench: bench #222B3A with a faint seeded cloth weave (2%); agar #E9E3CE at the center to #DDD5BC at the rim with soft milky variation; plasmodium from #F6D35B in thin fans through chrome yellow #F0B323 to deep ochre #C98612 in the thickest tubes, with a gel highlight #FFF6D8; oat flakes #D8C59C with fiber streaks #B39A6B; dish glass highlights #F4F7F8; type #F1ECDF, secondary #9EA8B8, accent #F0B323. Saturated yellow against pale agar and blue-grey bench: warm on cool, the slime the only strong color.
- The plate, seen straight down: a glass dish 860px across centered at (1250, 540) with an 8px rim (two thin highlight arcs at upper left, a soft contact shadow on the bench); the simulation's circle maps to a radius of 420px inside it.
- Oat flakes: ten, at these fractions of the simulation radius from the center (x right, y down): (0, 0) under the inoculum, (0.55, 0.10), (−0.50, 0.30), (0.20, −0.60), (−0.30, −0.55), (0.62, −0.38), (−0.70, −0.10), (0.10, 0.70), (0.48, 0.55), (−0.35, 0.72). Each is an irregular rounded flake 22–30px across (seeded outline, fibrous streaks, a 2px shadow).
- The model (after Jeff Jones's Physarum agents), with the parameters that give a branching fan and then a linking network:
  - a 600 × 600 float trail map; the dish is the circle of radius 282 cells around (300, 300); 54,000 agents with float positions and headings;
  - agent i is born at step floor(i ÷ 54,000 × 180) at a uniformly random point in the disc of radius max(8, 282 × step ÷ 180) around the center, with a random heading, so the plasmodium spreads from the inoculum over the first 180 steps;
  - each step, each agent samples the trail map with bilinear interpolation at three sensors 15 cells ahead at −30°, 0° and +30° (a sensor outside the dish reads −1); if the front reads at least both sides it keeps its heading; if the front is lower than both it turns 30° left or right at random; otherwise it turns 30° toward the stronger side; it moves 1 cell; if that would leave the dish it stays and picks a new random heading; otherwise it deposits 5 into its new cell;
  - each flake inside the current spread radius adds 80 to every trail cell within 6 cells of its center, every step;
  - then the whole map is replaced by its 3 × 3 mean times 0.9 (diffusion and decay);
  - 480 steps. Bilinear sensing and the spreading spawn disc matter: sensing on whole cells or spawning everyone at one point makes grid-aligned four-way crosses.
- Storage: every 6th step (81 snapshots), the trail map encoded to Uint8 as q = 255·ln(1 + T/4) ÷ ln(1001), clamped; seek(t) blends the two snapshots around the current step.
- Rendering, in a fragment shader sampling the snapshots bicubically: coverage = smoothstep(4, 30, T), so thin fans stay translucent and the agar shows through; color from #F6D35B at T = 30 through #F0B323 at 120 to #C98612 at 400 and above; treat ln(1 + T) as a height field and light it from the upper left with a soft diffuse term and a tight specular highlight (#FFF6D8 at up to 35%), so tubes read as glossy gel; a 1–2px darker margin (#B47C10 at 40%) where coverage falls off. When the spreading front first reaches a flake, a soft yellow halo grows around it over 0.4 s.
- Time: simulation step σ(t) = 480·(t − 0.6) ÷ 7.8 for 0.6 ≤ t ≤ 8.4 (about 61.5 steps a second), held at 480 after; the clock reads 26·σ ÷ 480 hours.
- Labels, HTML, in Familjen Grotesk 500, 22px, #F1ECDF, on 1px #9EA8B8 leaders ending in 4px dots, the text on the bench left of the dish, never more than two at once: "inoculum" (0.8–2.6 s), "exploring fan" on the front (1.8–3.4 s), "oat flake" (2.6–4.2 s), "tubes thicken on busy routes" on the thickest tube (6.2–8.2 s).
- Type: the kicker in Familjen Grotesk 600, 20px, tracked 0.16em, uppercase, accent, at (120, 96); the title in Familjen Grotesk 700, 68px, #F1ECDF, at (120, 170), two lines; the line in Familjen Grotesk 400, 26px, secondary, beneath. Readouts from (120, 620) in Source Code Pro, tabular figures: the clock in 500, 44px ("14 h"), then "Step 312 of 480" and "Agents 54,000" in 400, 24px, secondary. The closing caption in Familjen Grotesk 500, 28px, at (120, 960). Everything stays left of x 760.
- Camera: straight down and locked, with a 3% push toward the dish center across the piece.
- Easing: text rises 12px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: a living front that branches like the real organism, a fine mesh that coarsens into a few glossy tubes anchored on the flakes, agar visible through the thin fans. Cheap: glowing neon worms on black, a blurred yellow blob, a static picture of veins.
Banned: black backgrounds, neon, glow or bloom, individual agents visible as dots, grid-aligned crosses or streaks, tubes that ignore the flakes, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the plate on the bench: pale agar, ten oat flakes, a yellow inoculum at the center; the kicker, title and line rise in.
- 0.6–3.5s: steps 0–180: the plasmodium spreads from the center as a fan of fine branching veins and reaches the rim; each flake lights its halo as the front arrives; the readouts rise in at 1.0 s.
- 3.5–5.5s: steps 180–300: the fine mesh coarsens; thin veins retract and tubes thicken between flakes.
- 5.5–8.4s: steps 300–480: a few glossy tubes link the flakes while side veins wither. The 6.0 s frame: a coarse mesh turning into a network, most flakes already joined.
- 8.4–8.8s: the clock stops at 26 h; the closing caption rises in.
- 8.8–10.0s: hold, completely still.
For other lengths, change the steps per second and keep 480 steps; keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas. The agents run once at load on the CPU into the 81 Uint8 snapshots (keep load under 15 s); one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek), its backing store sized from CSS size × devicePixelRatio, uploads the two snapshots around σ(t) as textures and shades the plasmodium over an agar texture generated once at load; the bench, dish and flakes come from 2D canvases drawn once; type is HTML.
- seek(t) maps t to σ in closed form and never steps the simulation.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the fan branches outward with no four-way cross or grid streaks, thin fans stay translucent with agar showing through, tubes look glossy and connect at the flakes, every flake has a tube touching it by step 480 (if one doesn't, raise that flake's deposit to 120 and rerun at load), the 6.0 s frame and the final frame are both complete compositions, and labels point at what they name. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: Particle animation inspiration