Build a falling-sand world you can play in the browser
A pocket sandbox in one HTML page. Pick an element on a candy-coloured handheld and paint it into a pixel world: sand piles and slides, water pools and digs, seeds grow into flowers, fire burns through forests, oil erupts, lava boils water into steam and the steam comes back as rain. It opens straight from disk on a laptop or a phone. You get the exact prompts, a check for every step, a 15-line recipe for adding your own element, and the complete source, including the 27-second looping Reel: a generated cross-section of a world where one poke of lava climbs from the magma chamber, through oil pockets and a water seam, and erupts over the forest.
Before you start
Uses your AI plan
You’ll need
Claude Code
HyperFrames
GSGSAP
NoNode.js
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
A grid, a loop and sand
Step 02
Water, density and why the update order matters
Step 03
Fire, plants, lava, steam and light
YoursStep 04
The handheld: palette, touch and polish
Exactly what the creator used
Claude Code
Any recent version
HyperFrames
Any recent version
GSAP
Any recent version
Node.js
Any recent version
FFmpeg
Any recent version
Claude Code — Claude Opus 5.5 (claude-opus-5-5) — wrote every file — your Claude plan
A browser — any current Chrome, Safari, Firefox or Edge — runs the toy, opened from disk — free
Silkscreen — Google Fonts, SIL Open Font License — the pixel typeface, embedded in the page as base64 — free (OFL)
HyperFrames — 0.8.74 (npx hyperframes@0.8.74) — only for the optional Reel: check and render — free, runs locally
GSAP — 3.14.2 (jsDelivr CDN) — only for the Reel: the one paused timeline — free
Node.js — 24.x — only for the Reel (runs the HyperFrames CLI) — free
FFmpeg — any recent build — only for the Reel's Instagram re-encode — free
The toy itself needs nothing but a browser. Codex or any agent that can write files works too.
Provenance: Recorded September 26, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); Node.js 24.13.1; the toy was tested in Chrome for Testing 147 (headless, phone 390×844 @3x and desktop 1440×900, with CPU throttling). The optional Reel used HyperFrames 0.8.74 and GSAP 3.14.2, rendered locally at 1080×1920, 30 fps, 27 s, H.264 (beginframe capture, software GPU, 6 workers), no audio; the Instagram copy was re-encoded with FFmpeg 4.4 (CRF 21, faststart). Silkscreen font by Jason Kottke and the Silkscreen Project Authors, SIL Open Font License. No external images, footage or generative-media models were used.
Build a falling-sand world you can play in the browserUses your AI plan
Claude Code
HyperFrames