diff --git a/documentation/docs/tutorials/remotion-video-creation.md b/documentation/docs/tutorials/remotion-video-creation.md new file mode 100644 index 000000000000..922693b1a7bb --- /dev/null +++ b/documentation/docs/tutorials/remotion-video-creation.md @@ -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. + + + + + + + + 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 + ``` + + + +## 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 +``` + +