R13 · AI Automation Systems · JQ AI SYSTEMS
Chain Reaction
A marble run built from the parts of a workflow, with real physics baked once so the film can slow down and freeze time, then pull back into one line that becomes a word.
34.0s · 1920×1080 · 30fps · one take
The film for the AI Automation service. One command drops a chrome ball into a machine built from a weekly report: it collects the inbox, knocks messy rows clean, sorts them, waits for a person to approve, and rings the bell as the report goes out.
An original score composed in code from the machine's own impacts, over a quiet music bed. No spoken dialogue. On-screen text carries the story.
scene breakdown · select a scene to play
The prompt
The brief I gave Claude Code, with the HyperFrames skills installed, to start this film. Approvals and fixes came after, but this is where it began.
Make a 34-second 1920x1080 film in HyperFrames for my AI Automation service, as a cinematic 3D chain reaction that runs a weekly report: collect, clean, sort, review, send. Dark studio, #0a0a09, teal #00BFB4 light. Build the machine in 2D with Matter.js and bake it once in Node: every body's position per frame into a data file, every impact into a list. Render it in Three.js as a real 3D machine: brushed-metal rails with a line of teal light, a chrome ball, a glass tray, glass Galton board with light pegs, a brass bell on a rope, bloom and reflections. Open on "$ run weekly-report" typed on a smoked glass terminal; on Enter a chrome ball condenses out of teal light. Collect: envelopes arc in from the dark and land on a glass seesaw tray, the ball tips it. Clean: dominoes printed with messy spreadsheet rows that turn clean as they fall, in 0.3x slow motion, sparks at each strike. Sort: the pegs light and ripple when hit. Review: a person's cursor ticks "Approve" and the gate lifts. Send: bullet time at the bell, physics frozen for 2 s, sparks and the shockwave hanging in the air, the camera orbiting the strike; then the report card flies to camera. Pull back to the whole run as one glowing line; it breaks into beads that fly into the word "automation". End on "AI Automation Systems", the tagline and the URL. The film's clock drives the physics clock through a remap, so slow motion and the freeze are just a curve; show the clock's speed in the HUD. Station titles wipe on bottom left. Score: compose it in code from the impacts, placed at their film time through the same remap; pitch impacts down in the slow motion, drop the pulse in the freeze, ring the bell out of the thaw. A quiet pad in D minor under it all, resolving to F on the word.
Remix it
Swap the parts in braces and paste it in. Some starting points:
- An e-commerce order, from cart to doorstep.
- A hiring pipeline, from application to offer.
- A release, from commit to production.
- A podcast episode, from recording to every platform.
Make a {duration}-second {width}x{height} film in HyperFrames for {subject}, as a cinematic 3D chain reaction that
runs {workflow}: {station_1}, {station_2}, {station_3}, {station_4}, {station_5}.
Build the machine in 2D with Matter.js and bake it once: positions per frame, impacts as a list. Render it in
Three.js with {materials} and {accent} light, bloom and reflections.
Open on "{command}". Give each station a physical gag: {gag_1}, {gag_2}, {gag_3}, {gag_4}, {gag_5}.
Slow motion through {slow_station}, bullet time at {climax}. Pull back to the whole run as one line that becomes
the word "{word}". End on {title}, {tagline} and {url}.
Score from the impacts, through the same time remap, over a quiet bed in {key}.Ingredients
- stack
- HyperFramesThree.jsTSLMatter.jsGSAPPython (word, score)
- length
- 34 s · 1920×1080 · 30 fps · one take
- physics
- Matter.js, 120 steps a second, baked once: 13 moving bodies, every impact listed
- time
- 1x, 0.3x through the dominoes, a 2 s freeze at the bell
- palette
- #0a0a09 · #00BFB4 · chrome · brass
- type
- Libre Baskerville · Inter · JetBrains Mono
- sound
- Impacts placed through the same time remap, over a quiet bed in D minor
how it's built
01 · 00:00
Bake the physics
The machine is built in 2D with Matter.js and run once in Node. Every body's position is stored per frame and every impact listed, so the film never runs physics and any frame renders on its own.
02 · 00:02
Light to a ball
Seeded points of teal light gather at the slot and a chrome ball condenses out of them, lit by a room environment so the chrome has something to reflect.
03 · 00:07
A clock that bends
The film's clock maps onto the physics clock through a speed curve: 0.3x through the dominoes, whose messy rows turn clean as they fall. The HUD shows the speed.
04 · 00:16
A person in the loop
The ball waits at the gate while a cursor glides in and ticks Approve. The tick box is a 3D point projected to the screen every frame, so it rides the camera.
05 · 00:20
Bullet time
The physics clock freezes for two seconds while the camera keeps moving: sparks and the shockwave live in physics time, so they hang in the air as the camera orbits the strike.
06 · 00:28
Line to word
The ball's whole path is one glowing tube. It is sampled into 1,500 beads that fly onto points sampled from the word's outlines, then the filled word fades in.
gotchas
- Don't lock a ball's rotation with infinite inertia in Matter.js: friction then pins its speed near zero. Let it spin.
- Give the floor real friction or dominoes slide instead of tipping; make any ramp after a stop steeper so the ball doesn't creep.
- Keep white cards below the bloom threshold, and hide faded-out meshes so they stop writing depth over what's behind.
source
Take the whole project
MIT for the code, physics, composition and score. The names JQ AI SYSTEMS and João Queirós and the service's name, tagline and URL on the end card are not included in the licence.