A real web page gets physically wrecked. A cursor clicks the main button and it pops off, rips the headline out and spins it like a windmill through the words below, shakes the page until the letters rain off, and the rest cracks into shards and falls away. One giant click blasts the pile, everything comes back down in a stack with the button on top, and the video rewinds until the page is whole again, so it loops. Every piece is a real crop of the real page, and the physics is baked offline, frame by frame. You get four exact prompts with a check for each and the complete source, for a 20-second vertical video of your own site.
Before you start
Uses your AI plan
You’ll need
Claude Code
NoNode.js
pupuppeteer-core
ChChrome
pnpngjs
plplanck.js
HyperFrames
GSGSAP
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
Capture the page and cut it into fragments
Step 02
Bake the destruction
Step 03
Play it back on one canvas
YoursStep 04
Render, test the loop, re-encode
Exactly what the creator used
Claude Code
Any recent version
Node.js
Any recent version
puppeteer-core
Any recent version
Chrome
Any recent version
pngjs
Any recent version
planck.js
Any recent version
HyperFrames
Any recent version
GSAP
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 — runs the capture, the bake and the HyperFrames CLI — free
puppeteer-core — 25.11.0 — drives headless Chrome for the capture — free
Chrome — 152 (the one HyperFrames or Puppeteer already downloaded to ~/.cache/puppeteer) — the browser the page is captured in — free
pngjs — 7.0.0 — cuts the fragments into an atlas — free
planck.js — 1.4.2 (a JavaScript port of Box2D) — the rigid-body physics — free
HyperFrames — 0.8.74 (npx hyperframes@0.8.74) — snapshot, check, render (HTML → MP4) — free, runs locally
GSAP — 3.14.2 (jsDelivr CDN) — the one paused timeline — free
FFmpeg — any recent build (4.4.2 here) — the Instagram re-encode and the loop test — free
Codex or any agent that can run shell commands works too. No fonts are loaded: every letter in the video is a pixel crop of the captured page.
Provenance: Recorded September 27, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); the capture of dstacked.com (by its owner) in headless Chrome 152 via puppeteer-core 25.11.0 at 390×693 CSS px, DPR 2.77; physics baked with planck.js 1.4.2 at 240 Hz on Node.js 24.13.1; HyperFrames 0.8.74 and GSAP 3.14.2, rendered locally at 1080×1920, 30 fps, 19.9 s (HyperFrames "looks" quality, CRF 16, beginframe capture, software GPU, 5 workers), with no audio. The Reels copy was re-encoded with FFmpeg 4.4.2 (libx264, CRF 22, High profile, faststart). No generative-media models and no fonts: every pixel of the page, its text and its art comes from the capture.
Destroy your own website (then rewind it)Uses your AI plan
Claude Code
HyperFrames