Remotion Studio

Add components straight to Studio

One click sends a component from this site to the Remotion Studio running on your computer. Studio installs it and puts it on your timeline — no CLI, no components.json. It arrives as one layer you can move and trim, with its text, colours and font in the Inspector, and a transparent background so it sits on your own footage.

1. 1Start Studio in your Remotion project

   Remotion 4.0.524 or newer. Any project works — the one from npx create-video included.

   npx remotion studio

2. 2Open a composition

   The component goes into the composition you have open, on its own timeline layer.

3. 3Click “Add to Remotion Studio”

   On a component's page, under the install command, or in the gallery panel under “Make a video with this”.

4. 4Confirm in Studio

   Studio shows you the source first. Confirm, and it writes the file, installs what it imports and places it.

What lands in your project

• One file, src/<name>.element.tsx — the whole component, yours to edit.
• The packages it imports, at exact versions. Nothing else is added.
• A layer in the open composition, sized to the component rather than the frame.

41 components work this way

Every free component. Pro components install with your key through the shadcn CLI or the MCP server.

• Agent Steps
• Announce Title
• Answer Highlight
• Answer Stream
• Block Wordmark
• Card Rail
• Channel Thread
• Count Grid
• Cursor Track
• Follower Rush
• Karaoke Captions
• Laptop Frame
• Logo Assemble
• Logo Collapse
• Logo Drift
• Logo Flicker
• Moodboard Reveal
• Orbit Gallery
• Phone Frame
• Product Hero
• Prompt Send
• Prompt Zoom
• Punch Lines
• Roster Grant
• Screen Recording
• Search Typing
• Status Cycle
• Terminal Simulator
• Text Build
• Text Highlight
• Text Reveal
• Text Rewrite
• Text Select
• Text Swap
• Text Swell
• Type Morph
• Word Captions
• Word Flip
• Word Gather
• Word Wheel
• Wordmark Cut

If the button says

“No Remotion Studio found on this computer”

Studio is not running, no composition is open in it, or it is older than 4.0.524 — an older Studio does not answer at all. Start it with npx remotion studio, open a composition and click again; if it was already open, run npx remotion upgrade first.

“This needs Remotion 4.0.524 or newer”

Your Studio predates the Studio Protocol. Run npx remotion upgrade in the project.

“Your browser blocked access to localhost”

The site asks your browser to talk to the Studio on this computer. Allow local network access for snapcn.dev in the site settings.