Scenes

npx add-mcp 'https://scenes.design/mcp'

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