A Desert in an Hourglass
Background3DSeamless loopPortrait8 seconds
Source
Time Grows Here
A jewelled mechanical watch grows into a gold-and-copper flower: fourteen metal petals unfold from precision hinges around turning gears and a ruby. Loops.
Background, V1 Effects3DSeamless loop, verified214 lines of codev1.0.0
Combine several clips and hand them over together from your sequence.
A finished film
It plays exactly as rendered and has nothing to adjust. The preview runs the same code your AI receives.
Info
What it is
A compact, jewel-set watch movement sits in a brass case: cut-out gears turn, a coiled balance spring winds and ruby filaments stand. Fourteen concave metal petals unfold from precision hinges until the watch has become a gold-and-copper flower, then they fold back into the case, so the 12 seconds loop. The metal is ray-marched with polished and satin finishes, contact shadows and reflections of a studio light panel. The film has no settings.
Reuse it in your own idea
- Luxury launch: the flower stands fully open through the middle of the loop.
- Seamless loop: it folds back into the watch, so it repeats for any length.
- Time-and-growth metaphor: a ready-made single shot for annual reports and keynotes.
Which part is reusable
src/time-garden.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.
Good to know
- The film is finished: it has no settings. To change colours or timing, edit the shader.
- It is composed for a 4:5 portrait frame.
- Its length is fixed at 12 seconds; repeat the loop to fill a longer clip.
Technical details
Technical details
- Implementation
- Three.js 0.185.1 (WebGL) · ES module
src/time-garden.js - Exports
createTimeGarden() => { scene, camera, setSize(width, height), update(time), dispose() }
- Dependencies (exact)
three@0.185.1(source) — Renderer and a full-screen shader material.apw-runtime@1.0.0(demo) — Demo harness.
- How it fits a scene
Coordinates: Composed for a 4:5 portrait frame and measured by the frame height: in a wider frame the picture stays centred at full height and its background fills the sides; in a narrower one, such as 9:16, the sides are cropped.
Lighting: A large softbox above left, a cool blue edge light and a warm low kicker, reflected in polished gold and copper, with contact shadows.
Timing: The watch mechanism turns, the fourteen petals extend on their hinges into a flower, then fold back into the watch.
- Output
- 1080×1350, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Every part of the film is a function of the time modulo its length, and every motion completes whole cycles, so the last frame meets the first.
- Tested
- Rendered 360 frames on 2026-10-10 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
- One full-screen fragment shader. About 93 ms a frame at 1080 by 1350 on an integrated Intel GPU (Iris Xe), and about 14 s a frame with software WebGL. Real-time playback at full size needs a discrete or recent integrated GPU; on weaker graphics use the rendered video, or draw into a smaller canvas.
- Export a video yourself
- Download the source, then in the folder:
npm install npm run render -- time-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:8008a70b9b8815b1… - Files
- LICENSE 1 KB · demo
- asset.json 6 KB
- demo.js 1 KB · demo
- index.html 1 KB · demo
- src/time-garden.js 12 KB · reusable
- License
- MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
- For agents
- agent.md · JSON manifest · standalone demo
- Provenance
- From the owner's collection Twenty Impossible Worlds: the original GLSL ES 3.00 shader of the film “Time Grows Here”, created with ChatGPT / Codex and used as published, wrapped for AI Pixel Wizard as a three.js full-screen shader in October 2026. The collection's synthesised soundtrack is not part of this ingredient.
BinMore like this
More like this
Play these full screen
Cathedral of a Butterfly
Background3DSeamless loopPortrait8 seconds
The Silver Swan
Background3DSeamless loopPortrait8 seconds
A Door Into Four Seasons
Background3DSeamless loopPortrait8 seconds
Neon Koi
Background3DSeamless loopPortrait8 seconds
Paper Birds, Real Shadows
Background3DSeamless loopPortrait12 seconds
The Last Match
Background3DSeamless loopPortrait12 seconds
Clockwork Butterfly
3D object3DSeamless loop12 seconds