HyperFrames demo: Orbit Title Card

Proof of concept for sharing an AI video generation with everything that made it: the rendered video, the reference images, the prompt and metadata, and the animation code (HTML composition + render script). Made entirely over MCP by Claude Code (claude-opus-5-5), 2026-10-20.

Orbit Title Card: how it was made

Everything on this page was uploaded and published over MCP.

Model: claude-opus-5-5 (Claude Code)
References: ref-01-palette.png, ref-02-layout-sketch.png
Code: composition.html (the animation), render.mjs (renderer), bundled in orbit-title-card-code.zip
Render: Playwright Chromium, 180 frames at 30 fps, ffmpeg libx264
Full metadata: metadata.json

Prompt: "Make a 6-second 1280x720 title card called ORBIT in a HyperFrames-style HTML composition. Two orbit rings expand from the centre, three coloured planets travel along them, the title fades up with its letter-spacing tightening, a brass rule draws under it, then an italic subtitle 'a hyperframes test card' fades in. Fade everything out in the last 0.7 s. Use the palette and layout from the two reference images. The timeline must be a pure function of time so it can be rendered frame by frame."

MP4

WEBP1280 × 720

HTML filecomposition.htmlDownload MJS filerender.mjsDownload ZIP fileorbit-title-card-code.zipDownload JSON filemetadata.jsonDownload

Showing all 8 assets

Report Abuse