Cine rack focus
Build a short cinematic camera study in Three.js that demonstrates a rack focus with real depth of field (for example a bokeh/depth-of-field post-processing…
More
1 test · 1 finished runs (1 agent, 0 raw one-shot) · 1 live demo
The prompt
Build a short cinematic camera study in Three.js that demonstrates a rack focus with real depth of field (for example a bokeh/depth-of-field post-processing pass). In the foreground, close to the lens, a ringing old telephone sits on a desk; in the background, across a dim office, a person stands in a lit doorway. The camera does not move. Focus starts sharp on the phone with the doorway blurred, then pulls smoothly over about two seconds so the person becomes sharp and the phone goes soft, holds, then racks back. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.
Same prompt, all models: step through 1 runsIn the gallery: one player, arrow keys or swipe.