Wreck a toy-block tower with real physics, in slow motion
A tall tower of 996 wooden and painted toy blocks stands in a bright white studio, with a wrecking ball held at the top of its swing. The ball drops, time slows to a tenth of real speed as it ploughs through the tower and bursts out at the camera in a cloud of dust, the top crashes down, four iron balls punch the stump flat, and then the whole thing rewinds in one smooth move until the ball comes to rest where it started, so the loop turns round like a pendulum. The destruction is real rigid-body physics: baked once in Node with Rapier, then played back frame by frame in a Three.js scene inside HyperFrames, which is why it can run in slow motion and in reverse. You get four exact prompts with a check for each, the complete source and the 16-second Reel. The bake-then-play-back split works for any destruction shot.
Before you start
Uses your AI plan
You’ll need
Claude Code
NoNode.js
RaRapier
Three.js
GSGSAP
HyperFrames
FFFFmpeg
What it uses
4 prompts to your coding assistantCounts toward your assistant’s usual allowance. Nothing extra to buy.
The tutorial
Free with an account · 4 steps
Free with an account. Your assistant runs on the plan you already have.
The recipe
4 steps, from nothing to yours.
Every step gives you the action, the exact input (a prompt, settings or a file) and a check to compare your result against the original.
Step 01
Bake the destruction in Node
Step 02
Play it back in a HyperFrames Three.js scene
Step 03
Choreograph: the story clock, the pendulum loop and the camera
YoursStep 04
Dust, motion blur, the settle and the render
Exactly what the creator used
Claude Code
Any recent version
Node.js
Any recent version
Rapier
Any recent version
three.js
Any recent version
GSAP
Any recent version
HyperFrames
Any recent version
FFmpeg
Any recent version
Claude Code — Claude Opus 5.5 (claude-opus-5-5) — wrote every file — your Claude plan
Node.js — 24.x (24.13.1 here) — runs the bake and the HyperFrames CLI — free
Rapier — @dimforge/rapier3d-deterministic-compat 0.21.0 (npm) — the rigid-body physics, deterministic build — free, Apache-2.0
three.js — 0.181.2 (jsDelivr CDN, import map) — the 3D scene: instanced blocks, shadows, GTAO — free, MIT
GSAP — 3.14.2 (jsDelivr CDN) — the one paused timeline HyperFrames seeks — free
HyperFrames — 0.8.74 (npx hyperframes@0.8.74) — snapshot, check, render (HTML → MP4) — free, runs locally
FFmpeg — any recent build — the Instagram re-encode and the loop test — free
Codex or any agent that can write files and run commands works too. No GPU is needed: HyperFrames renders WebGL in software.
Provenance: Recorded September 27, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); physics baked with @dimforge/rapier3d-deterministic-compat 0.21.0 on Node.js 24.13.1; three.js 0.181.2 and GSAP 3.14.2 from jsDelivr; HyperFrames 0.8.74 rendering in Chrome 152 headless shell with SwiftShader (software WebGL) at 1080×1920, 30 fps, 16.1 s (483 frames, 5633 sub-frames), no audio. The render took 59 min 31 s with 4 workers on a 24-thread machine, on its own (HyperFrames "looks" quality, CRF 16, beginframe capture, software GPU, HF_DE_STALL_MS=600000). The master is 63.8 MB; the Reels copy was re-encoded with FFmpeg (libx264, CRF 22, faststart) to 16.1 MB. check passed with 0 errors and 4 warnings, all of them Chrome's own "GPU stall due to ReadPixels" driver notes; it took 21.5 minutes on its own. Loop test (Gaussian blur sigma 2, then SSIM, on the master): 0.9937 across the seam (last frame to first) against 0.9781 and 0.9800 for the steps either side, and a mean frame difference of 0.45 across the seam against 1.52 and 1.42; the steps grow smoothly on both sides (4.6, 4.2, 3.7, 3.1, 2.4, 1.5 into the seam; 1.4, 2.3, 2.8, 3.3, 3.6, 3.8 out of it). On the Reels copy: 0.9940 against 0.9817 and 0.9827. At the seam the ball is at rest and the camera's velocity passes through zero (see step 3). Two runs of the bake gave byte-identical files (frame SHA-256 60f091e46e71841f), and the same frame rendered in two browser sessions gave byte-identical PNGs. No external images, footage, textures, models or generative-media models were used.
Wreck a toy-block tower with real physics, in slow motionUses your AI plan
Claude Code
Three.js
HyperFrames