A live black hole in one HTML page. Every pixel is a ray of light traced backwards and bent around the hole in a WebGL2 shader, so the far side of the glowing disk arches over the top and under the bottom, a thin photon ring hugs the shadow, stars smear into arcs and a faint galaxy closes into an Einstein ring when you line it up. The side of the disk moving toward you is brighter and bluer. Drag to orbit, pinch to zoom, switch the disk off. It adapts its resolution to hold the frame rate on laptops and phones. You get four exact prompts with a check for each, the complete source, and the 28-second looping Reel made from the same engine.
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
Bend light: the ray-tracing core
Step 02
Add the accretion disk and make it glow
Step 03
Lensed stars, the Einstein ring and Doppler beaming
YoursStep 04
Camera controls and adaptive quality
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 with WebGL2 — Chrome 152/154 tested; any current Chrome, Edge, Firefox or Safari — runs the demo — free
HyperFrames — 0.8.74 (npx hyperframes@0.8.74) — the optional Reel: snapshot, check, render — free, runs locally
GSAP — 3.14.2 (jsDelivr CDN) — the Reel's one paused timeline — free
Node.js — 24.x — runs the HyperFrames CLI — free
FFmpeg — any recent build — the Instagram re-encode and the loop test — free
Font — Spectral 200 / 300 italic (Production Type, OFL) — demo UI (Google Fonts link); the Reel has no type — free
Codex or any agent that can write files works too. You need a GPU that supports WebGL2, which covers almost every laptop and phone from the last seven years.
Provenance: Recorded September 26, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); WebGL2 in Chrome 152 (headless shell, SwiftShader) and Chrome 154 on Windows (ANGLE / Direct3D 11, NVIDIA RTX 3080 Ti) for testing and the performance numbers; HyperFrames 0.8.74, GSAP 3.14.2 and Node.js 24.13.1 for the Reel, rendered locally at 1080×1920, 30 fps, 28 s (HyperFrames "looks" quality, CRF 16, beginframe capture, software GPU, 2 workers, 126 minutes), with no audio. The Reels copy was re-encoded with FFmpeg (libx264, CRF 22, faststart). No external images, footage, textures or generative-media models were used. Font: Spectral by Production Type (SIL Open Font License).
Orbit a ray-traced black hole in your browserUses your AI plan
Claude Code
HyperFrames