remotion-scenes

remotion-scenes

简体中文说明

A Codex plugin and Claude Code plugin that turns a video script into a working Remotion project in two steps.

script (text or .md)
     │
     ▼  script-to-prompt
scenes-prompt.md  ←── human-editable Markdown contract
     │
     ▼  prompt-to-project
Remotion project + animated scenes
     │
     ▼
npx remotion studio

Install

Clone the repo once, then register it with the tool you use. This repo ships both manifests:

• Codex plugin: plugins/remotion-scenes/.codex-plugin/plugin.json
• Codex marketplace: .agents/plugins/marketplace.json
• Claude Code: .claude-plugin/plugin.json
• Claude Code marketplace: .claude-plugin/marketplace.json

Codex

Fastest verified install from the repo root:

codex plugin marketplace add .

If you are not in the repo root, use your absolute checkout path instead:

codex plugin marketplace add /absolute/path/to/remotion-scenes

After a version containing .agents/plugins/marketplace.json is published to GitHub, the shorthand below should work as well:

codex plugin marketplace add panic-z/remotion-scenes

Codex stores the repo as a marketplace and makes remotion-scenes, script-to-prompt, and prompt-to-project available in a new session.

If your Codex build registers the marketplace but does not actually load the skills, install them directly:

python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
  --repo panic-z/remotion-scenes \
  --path skills/remotion-scenes skills/script-to-prompt skills/prompt-to-project

Then start a new Codex session and verify:

codex exec --dangerously-bypass-approvals-and-sandbox --skip-git-repo-check \
  "List the exact available skill names matching remotion-scenes, script-to-prompt, and prompt-to-project if they are loaded in this fresh session. If none are loaded, say none."

Expected output includes:

• remotion-scenes
• script-to-prompt
• prompt-to-project

Claude Code

Fastest supported install from inside Claude Code:

/plugin marketplace add panic-z/remotion-scenes
/plugin install remotion-scenes@remotion-scenes
/reload-plugins

This works because the repo now includes a Claude Code marketplace manifest at .claude-plugin/marketplace.json.

If you prefer the local-manifest route, use the same checkout and register it with your local Claude Code plugin workflow, pointing Claude Code at:

~/plugins/remotion-scenes/.claude-plugin/plugin.json

If your Claude Code setup already supports local plugin directories, you do not need a second clone. Verify in a new Claude Code session that remotion-scenes, script-to-prompt, and prompt-to-project are available.

Prerequisites

• Node.js ≥ 18 (required by create-video@latest).
• npm or pnpm.
• (Recommended) The remotion-best-practices skill installed — the prompt-to-project sub-skill loads its rules for animation/timing best practices.

Quick start

1. Put a script in my-script.md (or paste it directly).

2. In Codex or Claude Code:

   "Use script-to-prompt to turn my-script.md into a scenes prompt."

   Review the resulting scenes-prompt.md. Edit freely.

3. Then:

   "Use prompt-to-project with scenes-prompt.md and call the project my-video."

4. Preview:

   cd my-video
   npm install
   npx remotion studio
   

See examples/example-script.md → examples/example-scenes-prompt.md for a worked sample.

Sub-skills

script-to-prompt

• Input: a script (narrative prose or storyboard), pasted or file path.
• Output: scenes-prompt.md (path configurable).
• Parameters: total duration, dimensions (default 1920x1080), fps (default 30), visual style (default "modern minimal"), output path (default ./scenes-prompt.md).

prompt-to-project

• Input: a scenes-prompt.md.
• Output: a full Remotion project with src/Root.tsx, src/Main.tsx, and one src/scenes/SceneN.tsx per scene.
• Scaffolder: npx create-video@latest --yes --blank --no-tailwind <name>.
• Transitions: uses @remotion/transitions when any scene boundary is not none.

Parent skill remotion-scenes

An index-only skill. Lists the two sub-skills and the typical workflow. Does not auto-dispatch.

Scenes prompt format

# Video: <title>
Dimensions: 1920x1080
FPS: 30
Background: #0a0a0a

## Scene 1: <name>
Duration: 3s (90 frames)
Transition-in: none
Transition-out: fade | slide-left | slide-right | slide-up | slide-down

### Visuals
<description of what appears on screen>

### Animations
- element: fade-in at 0-15f, scale 0.9→1.0 via spring at 0-30f

### Assets
- none
- image: ./assets/foo.png
- image: https://example.com/foo.png

## Scene 2: <name>
Duration: 3s (90 frames)
Transition-in: fade | slide-left | slide-right | slide-up | slide-down
Transition-out: none