Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 127 additions & 0 deletions documentation/docs/tutorials/remotion-video-creation.md
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
|
Copy link

Copilot AI Jan 23, 2026

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.

Copilot uses AI. Check for mistakes.
└ 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
```


Loading