AI CSS Animations

Zen Garden

Seen from above at dawn, a wooden rake circles three stone groups in a white gravel garden, its six tines cutting concentric rings in real relief that catch peach light on their crests and lavender shade in their troughs, then a red maple leaf drifts down beside the stones.

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
Shapes
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Karesansui, the Japanese dry landscape garden, reached its classic form at Zen temples in the Muromachi period, from the 14th to the 16th century, and the rock garden at Ryōan-ji in Kyoto is the best known. Stones set in moss stand for mountains or islands and the raked gravel around them stands for water: straight lines for open sea, concentric rings where the water meets the stones. Gardeners and monks rake the patterns again and again with wooden rakes as part of the garden's care. Designers borrow the look for calm, meditative films and wellness brands.

The prompt

Make a 10-second top-down film of a Japanese dry garden being raked at dawn: a wooden rake draws concentric rings around three groups of stones in gravel already combed into straight lines.

<inputs>
If I don't give you something, use the default and don't ask.
- Garden: the garden at Morrow Hall (fictional).
- Title: "Rings around stone"
- Line: "Morning raking · three stone groups · one rake, six tines"
- Length: 10 seconds.
</inputs>

<direction>
- Look: straight down on a karesansui at first light: white granite gravel in real relief, three stone groups on moss, a tiled wall along the top and a hinoki veranda along the bottom, lit by a low sun so every groove has a warm crest and a cool shaded trough.
- Palette: gravel white granite #E9E4DA; sunlit faces warm peach #FFE2C4; shade lavender #8F92B2, deep groove shadow #6E7196; stones basalt #3B3A3D with lit faces #7E7B82 and lichen spots #A8B07A and #D8D2B0; moss #4E6A2C with lighter tufts #7C9446; wall plaster #EDE7DA under grey-blue roof tiles #5B6573; veranda hinoki #CDA977 with grain #B48E5E; rake wood #B48A5C with end grain #8A6440; one maple leaf #C8321F; type #2B2420 and #4A3A2C. Peach crests against lavender troughs are the color idea; the red leaf is the only saturated note.
- Layout, in world pixels at 1.0: the wall's tiled top along the top edge (y 0–90, rows of overlapping rounded tiles over a plaster band); the gravel field across the full width from y 90 to 900; the veranda's planks from y 900 to the bottom, running lengthwise with dark gaps between them. Stone groups, each set in an irregular moss collar 20–40px beyond its stones, with its ring band given as inner and outer radius:
  - A at (520, 480): three stones, the largest an upright faceted boulder about 180 × 130 seen from above, two smaller at its side; rings from radius 150 to 306;
  - B at (1180, 360): two stones; rings from 90 to 246;
  - C at (1540, 670): one low flat stone; rings from 70 to 226.
- Gravel and grooves, as a height field: seeded granules (rounded bumps 2–4px across of random height) over fine noise, each grain's color varying ±4%, a few grey specks. The rake has six square tines at a 26px pitch, so one pass cuts a band of six grooves 156px wide with a profile of −A·cos(2π·d ÷ 26) across it (A = 3, against granules about 1 high) and soft shoulders at its edges. At the start the whole field is already raked in straight horizontal grooves, except inside each ring zone, which is smoothed flat. The stones and moss are tall in the height field, so they cast long shadows across the gravel.
- The rings: the rake makes one circuit round each group with its head held across the ring band, so the six tines draw six concentric grooves at once. It overlaps the start by 20° and lifts out, so each ring closes with no seam, and the straight grooves end cleanly against the outermost ring.
- Lighting, per pixel: normals from the height field by finite differences; Lambert light from a sun at the upper left whose elevation rises from 14° to 22° across the piece; soft self-shadowing by marching 24 steps toward the sun through the height field, so each groove's far wall shades the next; a lavender sky fill in the shadows. The gravel is clearly lit from the first frame, never grey or murky.
- The rake, drawn over the lit field: a hinoki head bar 190 × 22px with six square tines whose tips sit in the grooves they cut, and a pole 30px thick socketed into the head and running back along the path out of frame (the camera stays close enough while raking that it always leaves the frame); its shadow falls toward the lower right, offset by its height above the gravel. Lifting, it rises toward the camera (scale 1 → 1.06) as its shadow slides away and softens.
- Life: the soft shadow of a pine bough (blurred needle clusters, 25% darker) lies across the top left of the field and sways ±6px on a 4s sine, easing still by 9.0s. A five-lobed maple leaf 60px across falls on a closed-form path (a pendulum flutter, turning as it swings), its shadow sliding in to meet it, and lands beside group B.
- Camera: top-down, orthographic, its center and scale functions of t on easeInOutSine: the whole garden at 1.0; down to 1.6× on group A while it is raked; gliding to B at 1.7× and on to C; back to the whole garden at 1.0 by 7.0s. It never rotates.
- Motion: the rake travels at an even pace round each circuit (A in 1.4s, B in 1.1s, C in 1.0s), easing in and out over its first and last 0.2s; the grooves appear in the 0.06s after the tines pass each point. Nothing else moves except the pine shadow and the leaf.
- Type on the veranda (HTML over the canvas): the title in Shippori Mincho 600, 52px, #2B2420, baseline at (120, 995); the line in Zen Kaku Gothic New 400, 22px, #4A3A2C, right-aligned with its baseline at (1800, 990). Both rise 10px as they fade in over 0.8s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: grooves that are real relief, a low sun that lights one wall and shades the other, gravel grain you could count, rings that close without a seam and meet the straight lines cleanly, moss that hugs the stones. Cheap: grey concentric circles drawn as lines on a beige texture.
Banned: grooves drawn as lines rather than relief, water, koi, stone lanterns, bamboo fountains, cherry blossoms, torii, people or hands, ripples that move like water, bloom, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: the whole garden at dawn: straight-raked gravel, three stone groups on moss with smooth discs around them, the pine shadow swaying.
- 1.0–1.6s: the camera moves down on group A; the rake comes in from the top edge and sets its tines in the gravel.
- 1.6–3.0s: the rake circles group A once, six rings appearing behind it, and lifts out.
- 3.0–3.4s: the camera glides to group B as the rake moves across, lifted.
- 3.4–4.5s: the rake circles group B.
- 4.5–4.9s: the camera glides to group C.
- 4.9–5.9s: the rake circles group C and lifts away, its shadow sliding off and softening.
- 5.9–7.0s: the camera rises back to the whole garden (the 6.0s frame: groups B and C close up in fresh rings, raked by the low sun, the rake's shadow leaving the frame).
- 7.0–7.6s: the maple leaf drifts down and lands beside group B.
- 7.6–8.4s: the title and line rise in on the veranda.
- 8.4–10.0s: hold; the pine shadow eases still by 9.0s.
For other lengths, change the camera glides and the hold; keep each circuit's speed and at least 1s 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: one WebGL2 canvas (preserveDrawingBuffer: true, drawn once per seek), its backing store sized from CSS size × devicePixelRatio, whose fragment shader lights the height field through the camera transform; the rake, its shadow, the pine shadow and the leaf on a 2D canvas over it. Type is HTML.
- At load, build three float textures: the starting height field, the finished height field, and the time each texel is passed by the tines (infinite where it never is), plus an albedo map for stones, moss, wall and veranda. Each frame blends height as mix(start, finished, smoothstep(T, T + 0.06, t)); the rake, leaf and camera are closed-form functions of t. Keep load under 10s.
</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 grooves read as relief at 1280×720 with lit crests and shaded troughs, every pass leaves six grooves at an even pitch, each ring set is concentric and closes with no seam, the straight grooves end cleanly at the outer ring, no groove runs into a stone or the moss, the stones cast long shadows, the rake's tines sit in their grooves, the leaf meets its shadow as it lands, and the type sits on the veranda clear of the gravel. 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: Motion graphics inspiration