Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Zen Garden

A dry garden at low sun: a wooden rake draws fine lines in the sand round mossy stones, then a board smooths it clean. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified468 lines of codev1.0.0

In Nature & weather

Next: Ripple PondSurprise me

Zen Garden preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

0.92
4

Changes the shape of the stones, the moss and the leaves.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 2.0 MB)
Info

What it is

A Japanese dry garden in the low light of late afternoon: pale sand, a few weathered stones with moss at their feet, rings already raked round each stone, and a wooden rake that enters from the left and is pulled along the garden in long passes, one band after another, each leaving a row of fine grooves that catch the raking light. When it has finished, a smoothing board is drawn across and the sand is clean again for the next time round. Maple leaves drift through the frame, the sun shifts a little and the camera eases in and out. Choose the stones (a trio, a pair or a cluster of five), the pattern (straight lines or flowing waves), the colour of the sand, the sun and the exposure.

Reuse it in your own idea

  • Meditation video: Three stones, afternoon, with a slow voice-over and a soft title.
  • Study stream: Cluster of five on white sand, no leaves, behind a timer.
  • Slow-living brand: Waves at golden hour behind a logo.

Which part is reusable

src/zen-garden.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The rake and board move on rails: no hand or monk is shown (the handle leaves the frame).
  • The grooves are drawn by analytic bands, so the pattern is one of a few designs rather than free-form.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/zen-garden.js
Exports
  • createZenGarden({ stones?, pattern?, sand?, seed? }) => { group, uniforms, designLoop, update(time, loopSeconds), dispose() }
  • STONES: { trio, pair, cluster }
  • SANDS: { pale, white, warm, grey }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and the sand's groove shader.
  • chrome-material@1.1.0 (demo) — Studio environment light.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: 1 unit = 10 cm. The raked part is 18 wide (x from -9 to 9) and 13.5 deep (z from -5.5 to 8) and the lines run along z; the wall stands behind at z = 9.

Lighting: Physical materials: a shadow-casting low sun for the grooves (the sand's normals carry them) and the stones' shadows; a hemisphere fill.

Timing: update(time, loopSeconds) is a pure function of time; frames render in any order. The passes and the board are scaled to the loop length (designed for 20 s).

Output
1080×1080, 30 fps, 20 s · procedural (computed from the frame number) · seamless loop — The sand starts and ends each loop smooth: the rake draws its passes in the first three quarters and the smoothing board erases them in the last fifth. Rings round the stones are always there. The sun, the camera and the leaves move in whole cycles, so the last frame meets the first.
Tested
Rendered 600 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
The sand is one plane; its grooves are evaluated per pixel with a few trig calls. The stones are 40,000-triangle meshes built once. Smooth at 1080p on laptop GPUs. A 4096 shadow map is the main cost; lower it on slow devices. Software WebGL (no GPU) renders slowly.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- zen-garden/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:36b73d4e088b1e52…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/objects-scenes/zen-garden (MIT), rebuilt for AI Pixel Wizard in October 2026: sand grooves carried by an analytic normal field and drawn live by a rake in bands, rings round each stone, a smoothing board that closes the loop, weathered displaced stones with moss, a wall and bamboo, drifting leaves, and the frame/time contract.
BinMore like this

More like this

Play these full screen

Campfire

Background3DSeamless loop12 seconds

Jellyfish

Background3DSeamless loop12 seconds