How to Use Remotion with Claude (Code, Cursor, Codex)

Step-by-step: point Claude at Shotpack llms.txt and catalog.json, pick a free shot, implement from demo.tsx. Getting started without a local Remotion skill install.

This is a practical how to use Remotion with Claude path using Shotpack’s remote index. You do not need to install a Remotion skill first.

Prerequisites

Node + a Remotion project (or scaffold with npx create-video)
Claude Code, Cursor, or Codex with network access to your Shotpack host
Optional: Remotion Studio for preview

Steps

1. Open the agent entry files

Ask the agent to read:

/llms.txt — overview + free shot list
/skill.md — production rules
/api/catalog.json — machine index (tier, preview, tsx URL)

2. Pick one free shot

Browse Library → Free TSX. Good first picks:

letterspace-materialize — title open
marker-underline-title — keyword emphasis
pill-slot-cycle — UI-ish type rhythm

3. Implement from demo.tsx

Paste:

Implement shot <SHOT_ID> using https://YOUR_ORIGIN/demos/<CATEGORY>/<SHOT_ID>/demo.tsx
as the source of truth. Do not invent timing from the name alone.

4. Swap brand assets

Keep springs / sequences. Replace strings, colors, and screenshot layers with your product.

5. Preview in Remotion Studio

Run Studio, scrub the composition, then extend to a second shot (for example wipe-transitions).

Getting started checklist

Agent can fetch catalog.json
One free demo.tsx compiles in your project
You changed only content/assets, not core timing
You know where pricing unlocks core TSX

FAQ

How to use a Remotion skill if I already have one locally?

Same idea: treat the local demo as source of truth. Shotpack is useful when you want the same workflow over HTTP or a smaller free set plus a paid core pack.

How to use Remotion in Claude Code specifically?

Claude Code can curl/fetch the URLs above in-session. Prefer absolute URLs to your deployed Shotpack origin so the agent does not guess paths.