-
Notifications
You must be signed in to change notification settings - Fork 2.7k
docs: add Remotion video creation tutorial #6675
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
cc0da5e
docs: add Remotion video creation tutorial
blackgirlbytes eeb2671
Apply suggestion from @Copilot
blackgirlbytes cf60cf7
fix: correct skills path in example output
blackgirlbytes 8be55d8
fix: use ~/.agents/skills path to match npx skills add output
blackgirlbytes File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
127 changes: 127 additions & 0 deletions
127
documentation/docs/tutorials/remotion-video-creation.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| --- | ||
| title: Create Videos with Remotion Skills | ||
| description: Use goose with Remotion agent skills to generate programmatic videos with React | ||
| --- | ||
|
|
||
| import Tabs from '@theme/Tabs'; | ||
| import TabItem from '@theme/TabItem'; | ||
| import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; | ||
|
|
||
| goose can create programmatic videos using [Remotion](https://www.remotion.dev/), a framework for creating videos with React. By loading [Remotion Agent Skills](https://www.remotion.dev/docs/ai/skills), goose gains knowledge of best practices for animations, compositions, text effects, and video rendering. | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - [Node.js](https://nodejs.org/) 18 or later | ||
| - Install [Remotion Agent Skills](https://www.remotion.dev/docs/ai/skills) by running `npx skills add remotion-dev/skills` in your terminal | ||
|
|
||
| :::note Remotion License | ||
| Remotion is free for individuals and small teams, but requires a [commercial license](https://www.remotion.dev/license) for companies with 3+ employees. | ||
| ::: | ||
|
|
||
| ## Configuration | ||
|
|
||
| Enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load and use Agent Skills. | ||
|
|
||
| <Tabs groupId="interface"> | ||
| <TabItem value="ui" label="goose Desktop" default> | ||
| <GooseBuiltinInstaller | ||
| extensionName="Skills" | ||
| /> | ||
| </TabItem> | ||
| <TabItem value="cli" label="goose CLI"> | ||
|
|
||
| 1. Run the `configure` command: | ||
| ```sh | ||
| goose configure | ||
| ``` | ||
|
|
||
| 2. Choose to `Toggle Extensions` | ||
| ```sh | ||
| ┌ goose-configure | ||
| │ | ||
| ◇ What would you like to configure? | ||
| │ Toggle Extensions | ||
| │ | ||
| ◆ Enable extensions: (use "space" to toggle and "enter" to submit) | ||
| // highlight-start | ||
| │ ● skills | ||
| // highlight-end | ||
| | | ||
| └ Extension settings updated successfully | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| ## Example Usage | ||
|
|
||
| In this example, we'll ask goose to create a terminal-style video that demonstrates a git workflow. The video will feature typewriter effects, realistic terminal output, and a celebratory animation at the end. | ||
|
|
||
| :::info LLM | ||
| Anthropic's Claude Opus 4.5 was used for this example. | ||
| ::: | ||
|
|
||
| ### goose Prompt | ||
|
|
||
| ``` | ||
| Create a terminal-style video showing a git workflow: type out git add ., | ||
| then git commit -m 'feat: add new feature', then git push origin main. | ||
| Each command should appear with a typewriter effect, followed by realistic output. | ||
| End with 'Deployed to production 🚀' | ||
| ``` | ||
|
|
||
| ### goose Output | ||
|
|
||
| ``` | ||
| ─── load_skill | skills ─────────────────────────────────────── | ||
| name: remotion-best-practices | ||
|
|
||
| reading ~/.agents/skills/remotion-best-practices/rules/animations.md | ||
|
|
||
| ─── shell | developer ───────────────────────────────────────── | ||
| mkdir -p git-terminal-video && cd git-terminal-video && npm init -y | ||
|
|
||
| ─── shell | developer ───────────────────────────────────────── | ||
| npm install remotion @remotion/cli react react-dom typescript @types/react | ||
|
|
||
| ─── text_editor | developer ─────────────────────────────────── | ||
| writing git-terminal-video/src/GitTerminal.tsx | ||
|
|
||
| ─── text_editor | developer ─────────────────────────────────── | ||
| writing git-terminal-video/src/Root.tsx | ||
|
|
||
| ─── text_editor | developer ─────────────────────────────────── | ||
| writing git-terminal-video/remotion.config.ts | ||
|
|
||
| ─── shell | developer ───────────────────────────────────────── | ||
| npx remotion render GitTerminal out/git-workflow.mp4 | ||
|
|
||
| ✓ Video rendered successfully | ||
|
|
||
| ✅ Git Terminal Video Created | ||
| Location: git-terminal-video/out/git-workflow.mp4 | ||
|
|
||
| Video Details | ||
| ├── Duration: 14 seconds (420 frames @ 30fps) | ||
| ├── Resolution: 1280x720 (HD) | ||
| ├── Size: ~875 KB | ||
| └── Codec: H.264 | ||
|
|
||
| What the Video Shows | ||
| ├── Terminal Window - macOS-style with traffic light buttons | ||
| ├── Command Sequence with Typewriter Effect: | ||
| │ ├── ~/my-project ❯ git add . | ||
| │ ├── ~/my-project ❯ git commit -m 'feat: add new feature' | ||
| │ │ └── Shows realistic output with files changed | ||
| │ └── ~/my-project ❯ git push origin main | ||
| │ └── Shows push output (enumerating, compressing, writing) | ||
| └── Final Message - "Deployed to production 🚀" with bounce animation | ||
|
|
||
| Features | ||
| ├── Blinking cursor while typing | ||
| ├── Staggered output reveal (each line appears with delay) | ||
| ├── Color-coded syntax (prompts, commands, output) | ||
| ├── Spring animations for success message | ||
| └── Animated rocket that floats and bounces | ||
| ``` | ||
|
|
||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This line should be removed. The code block should match the pattern used in the Skills extension documentation at
/docs/mcp/skills-mcp.md(lines 40-45), which goes directly from the highlight-end comment to the closing └ line without this extra pipe character.