Scenes
Search a library of finished motion graphics scenes and copy their HyperFrames code and prompt to render as MP4.
Hosted MCP Server
npx add-mcp 'https://scenes.design/mcp'Installs into Claude Code, Codex, Cursor and more
Documentation
Scenes in Claude: three ways in
Use any scene with the Claude you already have. Claude chat: copy a scene's prompt, paste it into claude.ai or the Claude app, and watch it build. Claude Code: install the Scenes skill, pull a scene into a folder, change it in plain English and render the MP4 free with npx hyperframes render. Scenes connector: add https://scenes.design/mcp as a custom connector in Claude (or run claude mcp add --transport http scenes https://scenes.design/mcp) and ask Claude to find, preview and copy a scene.
Browse by category
- Maps
- Charts
- Text
- Product launch
- App UI
- Broadcast
- Social
- Illustrated
- 3D
- Explainers
- Logos
- Transitions
- Community
Guides
- How to make a map animation for free (no After Effects)
- How to make an animated travel map for Reels and TikTok
- How to animate a route on a map
- How to make a bar chart race video
- How to make an animated line chart or graph for video
- How to make an animated infographic
- What is kinetic typography? 10 examples you can copy
- How to make a logo reveal animation for free
- How to make a 3D logo animation without After Effects
- How to make a product launch video with Claude
- How to make a mobile app promo video
- How to make a lower third name graphic
- Claude motion graphics prompts: examples you can copy
- HyperFrames vs Remotion for making videos with Claude
- How to make videos with Claude Code
- How to make 3D animations with Claude and Three.js