AI CSS Animations

Mushroom Grove

A miniature mossy forest floor at lilac dusk, lit by glowing apricot and mint mushrooms: seven little clay-soft mushroom critters pop up out of the moss, wiggle, puff glowing spores, hop together around the biggest lamp-cap and puff all at once as the grove brightens.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
Characters · 3D · 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

Cozy games and miniature dioramas share a look: a small, soft, warmly lit world full of handmade-looking detail, where nothing threatens and everything invites a closer look. Glowing mushrooms are one of its favorite motifs, drawn from real bioluminescent fungi: more than a hundred species glow faintly in the dark, a light long known as foxfire. Stop-motion films, toy photography and tilt-shift miniatures shaped the soft macro framing, clay and felt textures and pools of practical light. Game studios, children's brands and illustrators use it for idle scenes, menus and calm loops.

The prompt

Make a 10-second cozy 3D scene: a glowing mushroom grove on a mossy forest floor at dusk, where little original mushroom critters pop up out of the moss, wiggle, puff glowing spores and gather around the biggest glowing cap.

<inputs>
If I don't give you something, use the default and don't ask.
- Place: Hush Hollow (fictional).
- Title: "Hush Hollow"
- Line: "At dusk the caps light up and the little ones come out."
- Critters: seven: three button caps, one tall parasol, one bell cap, one round cinnamon cap and one tiny puffball.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a toy-like miniature forest floor shot with a macro lens, like a stop-motion set: moss mounds, fallen leaves, a curled fern and a birch log at dusk, glowing mushrooms as the lamps, and seven soft clay-and-felt mushroom critters with tiny faces. Warm, gentle and clearly lit: dusk, never night.
- Palette: sky backdrop lilac #B9A6D6 at the top through rose #E7B3C0 to apricot #F6C9A0 at the horizon; far tree silhouettes lavender-grey #7B6E9A, hazed; moss #6E9A4E with tips #A9CF6A and shade #3E6640; soil and litter #7A5440; fallen leaves russet #C2653A and ochre #D9A44A; fern #5E8C4A; birch bark #EDE6DA with lenticels #3A3330; lamp caps: apricot glow #FFB070 with hot gills #FFE0A8, mint glow #8FF0C8 with gills #DFFFF0; critters: caps cream #F2E3C8, butter #F5D27A, lilac-grey #B8A9C9 with darker scales #8E7FA6, cinnamon #B5713F; bodies cream #F3E9D6 with blush cheeks #F2A08C; eyes ink #2A1E24 with white catchlights; spores apricot #FFD39A and mint #BFF7DE; title #FFF7EC, line #FBEFF6. Apricot and mint light meet over green moss under a lilac sky: warm and cool glows that never turn to neon.
- The set (1 unit = 1 cm), a 60 × 40 patch of forest floor:
  - ground: a plane displaced into moss mounds by seeded fBm, carrying 9,000 instanced moss tufts (small clusters of tapered cones, tips lighter) and patches of bare soil; 60 fallen leaves (bent, slightly curled planes with a midrib and serrated outline in a generated CanvasTexture); pebbles;
  - a fallen birch log across the back left (a cylinder with a bark CanvasTexture of white bark and black lenticels, a broken end showing growth rings, a shelf of moss on top);
  - a curled fern frond at the right (a TubeGeometry spine spiraling at its tip, 26 pairs of leaflets as small bent planes);
  - backdrop: a large sphere behind at 120 units with the sky gradient and soft tree silhouettes painted into a CanvasTexture, so the background is soft by construction (no depth-of-field pass).
- Glowing mushrooms, the grove's lamps, built like real mushrooms: nine of them, a hero lamp at the back center (cap radius 7, stem 12 tall) and eight smaller ones (cap radius 2–5) in clusters. Each cap is a LatheGeometry from a convex profile with a slight central bump and a rolled margin; under it, 48 thin radial gills (instanced) from the stem to the margin; a stem lathed with a slight taper, a skirt-like ring partway up and a bulbous base sunk into the moss. The glow lives in the gills and the cap margin: an emissive term (onBeforeCompile) brightest along the rim and under the cap, fading toward the crown, plus small emissive freckles on the cap; each breathes ±12% on its own 2–3 s sine. Each lamp carries a PointLight in its color (decay 2, distance 40, intensity 6–14) that pools light on the moss and the critters near it.
- The critters, seven original mushroom creatures 4–9 units tall, each built from: a cap of its own shape (button: a low dome; parasol: a wide flat cap with raised scales; bell: a tall conical bell; cinnamon: a round bun; puffball: a sphere with tiny warty bumps and no separate cap) with a thin gill ring visible underneath where it has a cap; a soft body (a capsule with a little belly) that is the stem; two stubby arms (capsules with rounded hands); two tiny feet peeking out at the base; a face just under the cap rim: two glossy eyes (spheres with a white catchlight sphere and a slight lid curve), blush cheeks (soft decals) and a small mouth that opens to an O to puff. Materials: soft matte clay (MeshPhysicalMaterial, roughness 0.7, sheen 0.4 with a cream sheen color) so they read like handmade toys. Each has a soft contact shadow.
- Motion, closed form:
  - pop-up: a critter starts buried with only its cap showing as a bump in the moss, then springs up (damped spring, damping ratio 0.45, 12% overshoot, about 0.6 s); the moss tufts round the hole bend outward and settle; 12 soil crumbs hop out on short arcs;
  - wiggle: a shimmy of ±10° about its base at 3 Hz for 0.5 s, its cap lagging 0.08 s on a spring;
  - puff: it squashes (scaleY 0.85, scaleX 1.1) for 0.12 s, stretches and opens its mouth; 40 spore motes burst from under its cap in a cone and rise on slow curling paths, glowing (additive sprites, 2–5px), fading over 2.5 s;
  - hop: a parabola 2 units high in 0.35 s, landing with a 0.85 squash;
  - blink: eyelids close for 0.12 s, no more than once every 2 s per critter;
  - spores already drift through the grove from the start (120 ambient motes on seeded curl paths).
- Light, bright and readable from the first frame: HemisphereLight sky #E9D8F2 / ground #6E5A48 at 1.1; a low dusk key DirectionalLight #FFD9B0 at 1.6 from behind left, rimming every cap and casting soft shadows (PCFSoftShadowMap, 2048, radius 6); a cool fill DirectionalLight #B9C8FF at 0.5 from the front right; a weak front fill at 0.3 that keeps every face lit; the lamp PointLights. ACESFilmic, exposure 1.15. Moss reads green, caps read their colors and every face reads clearly in every frame; nothing is dark.
- Post: EffectComposer with UnrealBloomPass (strength 0.55, radius 0.6, threshold 0.8) so only the lamp gills, the glowing rims and the spores bloom, then OutputPass.
- Camera: fov 30, a macro view 3 units above the moss, looking slightly up past the critters to the hero lamp; a slow push-in of 10% and a 20° arc to the right across the piece on easeInOutSine; the hero lamp ends at about (1100, 470), the gathered critters in a semicircle in front of it across x 700–1500.
- Type (HTML over the canvas): the title in Gluten 600, 96px, title color, with a soft plum shadow (0 4px 18px rgba(74, 50, 96, 0.4)), top-left at (120, 120); the line in Quicksand 600, 26px, beneath it. Both rise 12px as they fade in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: a miniature world with real construction (gills, rings, bark, curled fern), soft clay critters with readable faces, light that pools from the glowing caps, motion with squash, lag and settle. Cheap: flat green ground with sphere-on-cylinder mushrooms, a dark scene lit only by glow, critters that slide instead of hop.
Banned: real game characters, items or names, red caps with white spots, faces with teeth, horror or creepy eyes, dark or near-black frames, neon, bloom over everything, lens flares, motion blur, critters floating without contact shadows, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: the dusk grove: lamps breathing, ambient spores drifting, a bump in the moss near the front; the camera starts its push; the title and line rise in at 0.8 s.
- 1.4–3.4s: six critters pop up out of the moss at 1.5, 1.9, 2.2, 2.6, 2.9 and 3.1 s, each with its crumbs, and wiggle after landing; one looks round at its neighbor.
- 3.4–4.9s: three critters puff in turn (3.6, 4.0, 4.4 s), their spores rising past the hero lamp, which brightens 15% as they pass; the tiny puffball pops up last (4.7 s) and gives a tiny puff of its own.
- 4.9–5.8s: they gather: each hops toward the hero lamp in three hops, staggered, and settles into a semicircle facing it.
- 5.8–6.0s: the 6.0 s frame is a complete composition: all seven critters in their semicircle round the hero lamp, spores hanging in the air, every lamp lit, the title in place.
- 6.0–7.6s: a little dance: a wiggle travels round the semicircle 0.15 s apart, twice; at 7.0 s all seven puff together and a cloud of 300 spores spirals up round the hero lamp; every lamp brightens 20% over 0.6 s and stays there.
- 7.6–8.6s: the puffball hops onto the parasol critter's cap (8.0 s) and wiggles; the camera arc eases to rest.
- 8.6–10.0s: hold: lamps breathing, spores drifting, critters blinking.
For other lengths, stretch the pop-up and puff beats; keep the gathering before 6 s and 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: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Call composer.render() once per seek in place of renderer.render(). Every critter's pose, squash, hop and blink, every lamp's breath and the camera are closed-form functions of t from a fixed event schedule; spore paths are seeded closed-form curl paths (or precomputed once at load at a fixed step); moss tufts, leaves and the set are built once at load from a seeded PRNG, and every CanvasTexture is drawn once at load.
</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 scene reads as a miniature forest floor at dusk and is bright and clearly colored from the first frame (no dark frames); the mushrooms show gills, rings and bulbous bases; each critter reads as a mushroom creature with a cap, a face, arms and feet, never as a ball on a stick; every pop-up, hop and puff squashes and settles; only lamps and spores bloom; every critter has a soft contact shadow; the title sits clear of the critters; the 6.0 s and final frames are complete compositions. 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: 3D motion design inspirationParticle animation inspirationCharacter animation inspiration