Scenes: a library of 200+ finished HyperFrames scenes, each with the prompt that made it

[Deorbiting]

We built Scenes (https://scenes.design) on HyperFrames: a library of 200+ finished motion graphics scenes, each saved as a plain HyperFrames project (index.html, hyperframes.json) plus the prompt that produced it.

The categories are maps, charts, kinetic type, product launch films, app UI promos, broadcast graphics, social 9:16 clips, 3D, explainers, logo reveals and transitions. Two examples:

• Globe zoom (9:16): space to Japan, a pin on Tokyo, a fact card. https://scenes.design/scene/globe-zoom
• Bar chart race (16:9): top eight ranked year by year, ending on the winner. https://scenes.design/scene/bar-race

How it renders: nothing renders on our side. You copy a scene into your project (Claude Code skill, or the MCP server at https://scenes.design/mcp), ask Claude to change the words, numbers and colours, then run

npx hyperframes check my-scene
npx hyperframes render my-scene

and get the MP4 on your own machine.

What we learned building it: agents produce much better HyperFrames work when they start from a finished, reviewed scene and its prompt than from a blank file. Most edits stay small (copy, data, colours), so timing and seek-safety survive.

Browsing and previews are free, with 2 copies a day on a free account. Happy to answer questions about how the scenes are structured.

[Deorbiting]

A few updates since the first post.

249 scenes now. Most of the new ones went into two places:

• 3D (68 scenes): Three.js cutaways and teardowns. Engines, watch movements, GPUs, batteries, a floor plan that rises into a house. Each runs on one paused GSAP timeline so it seeks cleanly in hyperframes render.
• Logos (9, up from 2): logo stings and reveals. Liquid chrome, neon, ink in water, shattered glass, a watch-movement crest.

Smaller additions in Charts, Maps, Explainers and Product launch.

Three new ones worth opening:

• Turbofan engine cutaway teardown (16:9, 24s): a running engine cuts open over a sunset, then explodes into a labelled line. https://scenes.design/scene/turbofan-engine-cutaway-teardown
• Liquid chrome monogram reveal (16:9, 9s): one drop splashes, rises and freezes into a monogram. https://scenes.design/scene/liquid-chrome-monogram-reveal
• Night globe dive to city (9:16, 12s): fall from orbit as a city lights up street by street. https://scenes.design/scene/night-globe-dive-to-city

How it works

Each scene page shows the full prompt that produced it, with the swappable parts in brackets ([your hook], [your period]). The scene itself is a normal HyperFrames project. Nothing renders on our side.

The MCP server is now listed in the official MCP Registry (design.scenes/scenes), so clients that read the registry can find it. In Claude Code:

claude mcp add --transport http scenes https://scenes.design/mcp

Then ask Claude to find a scene, copy it into your project, swap the copy and data, and run:

npx hyperframes check my-scene
npx hyperframes render my-scene

One thing we keep relearning: the 3D scenes hold up under edits much better when the prompt pins the camera path and the timeline up front, and edits stay at the copy, data and colour level. Rewriting the camera move is where agents break seek-safety.

Questions about how the 3D scenes are structured are welcome.