# Remotion's Agent Skills launch animation

> The 8-second launch clip for Remotion's Agent Skills: a tilted macOS terminal types the install command, then gives way to a title and a Remotion, Claude Code and OpenCode logo lockup. The team published all 35 prompts from the Claude Code session.

- Page: https://meetreference.com/v/remotion-agent-skills-now-available/
- Exact prompt as plain text: https://meetreference.com/v/remotion-agent-skills-now-available/prompt.txt
- Made with: Claude Code
- Model: Claude Opus 4.5
- Built with: Remotion
- Style: Product launches; product launch, terminal, typewriter, 3d tilt, logo lockup, light theme, remotion
- Length and format: 8 sec, 1080:700 (1080x700 source)
- Shared by @Remotion in X, Jan 20, 2026: https://x.com/Remotion/status/2013626968386765291
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. Work in Claude Code with Claude Opus 4.5, or the closest equivalent you have.
2. Set up what the prompt expects: Node.js and a Remotion project (npx create-video).
3. Follow the prompts below in order. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Replace the command in the first prompt and the title text "Agent Skills now available" with your own, and point the logo prompt at your brand page instead of "https://remotion.dev/brand". The rest are small visual nudges you can reuse in order.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompts

### 1. Prompt

```text
we are creating a remotion animation for a new command "npx skills add remotion-dev/remotion". first start out by making a new composition,
1280x1000px of a macos terminal window-like console that has an empty prompt in it. light theme
```

### 2. Follow-up 1

```text
okay, nice. remove the background and the font size needs to be a lot bigger.
```

### 3. Follow-up 2

```text
add some margin nonetheless, but keep it transparent.
```

### 4. Follow-up 3

```text
make the terminal content a separate component in a new file. add a typewriter animation to it that types out "npx skills add remotion-dev/skills"
```

### 5. Follow-up 4

```text
keep the cursor in the end, and refactor it into it's own component in it's own file. keep it blinking while there is no typing.
```

### 6. Follow-up 5

```text
nice. increase the font size more, and make the composition a bit less smaller. mostly less tall
```

### 7. Follow-up 6

```text
make the composition is a bit taller nonetheless
```

### 8. Follow-up 7

```text
height of 700
```

### 9. Follow-up 8

```text
ok, make a new master composition and and the current composition as a sequence. give the master composition a grayish background
```

### 10. Follow-up 9

```text
use a sequence, not a series
```

### 11. Follow-up 10

```text
add a 3d rotation to the temrinal. like 20 degree of x and y rotation.
```

### 12. Follow-up 11

```text
add the transform to the sequence, not the terminal itself
```

### 13. Follow-up 12

```text
okay, over total length of the composition, slowly rotate Y axis from 20 to -20 degrees
```

### 14. Follow-up 13

```text
run the command "npx skills install remotion-dev/skills" yourself. look at the output and add the beginning of the output as terminal content
```

### 15. Follow-up 14

```text
can you add a bit more of the content?
```

### 16. Follow-up 15

```text
stagger the lines, make one appear every 50ms
```

### 17. Follow-up 16

```text
in the master composition, make the terminal jump in from the bottom using a fast spring animation, but no bounce
```

### 18. Follow-up 17

```text
render it
```

### 19. Follow-up 18

```text
make a new composition and add it to Root.tsx. it should display the remotion logo as an image (Without title (light mode) from
https://remotion.dev/brand) as well as a "+" as well as a claude code logo and opencode logo
```

### 20. Follow-up 19

```text
okay nice. remove the second plus and make the opencode combo quite a bit smaller.
```

### 21. Follow-up 20

```text
remove the background from this composition, and make the claude code logo also considerably smaller
```

### 22. Follow-up 21

```text
make the claude code a bit bigger
```

### 23. Follow-up 22

```text
the plus should be a bit darker
```

### 24. Follow-up 23

```text
add this composition to the master composition as a sequence coming in after the terminal output is done. the logocombo should be behind the
terminal.  push the terminal down again when it is done with the output
```

### 25. Follow-up 24

```text
make the background of the master composition the color #FFF
```

### 26. Follow-up 25

```text
make it the color #f8fafc
```

### 27. Follow-up 26

```text
the logomark should actually be a series of 2 sequences. first, for 2 seconds show text "Agent Skills now available" in GT Planar font, font size 80,
medium weight, only then show the logo
```

### 28. Follow-up 27

```text
make the font only 60px but bolder
```

### 29. Follow-up 28

```text
add a scale animation to the text, use an easing out curve and it half a second long
```

### 30. Follow-up 29

```text
nice! almost done.

- make the composition only 8 seconds long.
- make the sequence holding the terminal a bit bigger using a scale transform. increase the scale transform very slightly over time
```

### 31. Follow-up 30

```text
make the scale transform a bit 0.05 less
```

### 32. Follow-up 31

```text
actually, we should decrease the scale more, to only 0.9 and it goes to 1
but we need to position the terminal 100px lower overall for it to look nice
```

### 33. Follow-up 32

```text
the -20 to 20 degree rotation is a bit much. let's only do 10 to -10
```

### 34. Follow-up 33

```text
ok, new idea! instead of pushing the terminal down, flip the terminal towards the camera by rotating the X axis. this might need a perspective on the
parent and the transform origin needs to be at the bottom. maybe wrap it it another sequence to make it easier
```

### 35. Follow-up 34

```text
boom! this is awesome! render the video
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A clean light-theme product clip: a white macOS terminal tilted in 3D with "npx skills add remotion-dev/skills" at the prompt and the install log under an ASCII "SKILLS" banner, followed by a title card and a logo lockup.

- Color: Near-white slate background, a white terminal with gray chrome and red, yellow and green window dots, dark gray type, and the Remotion blue and Claude orange in the closing logos.
- Type: Monospace terminal text with a green prompt and block cursor, a chunky ASCII-art banner, and a bold geometric sans for "Agent Skills now available".
- Framing: The terminal fills most of the frame at a slight 3D tilt; the title and then the logo row sit alone, centered on the plain background.
- Structure: The command at three stages of typing, the SKILLS banner and install log, the title card "Agent Skills now available", and the Remotion + Claude Code and OpenCode logo lockup.

Storyboard, nine frames spread across the video: https://meetreference.com/media/remotion-agent-skills-now-available/storyboard.webp

- Frame 1 at 0.4s: https://meetreference.com/media/remotion-agent-skills-now-available/f1.webp
- Frame 2 at 1.3s: https://meetreference.com/media/remotion-agent-skills-now-available/f2.webp
- Frame 3 at 2.2s: https://meetreference.com/media/remotion-agent-skills-now-available/f3.webp
- Frame 4 at 3.1s: https://meetreference.com/media/remotion-agent-skills-now-available/f4.webp
- Frame 5 at 4.0s: https://meetreference.com/media/remotion-agent-skills-now-available/f5.webp
- Frame 6 at 4.9s: https://meetreference.com/media/remotion-agent-skills-now-available/f6.webp
- Frame 7 at 5.8s: https://meetreference.com/media/remotion-agent-skills-now-available/f7.webp
- Frame 8 at 6.7s: https://meetreference.com/media/remotion-agent-skills-now-available/f8.webp
- Frame 9 at 7.6s: https://meetreference.com/media/remotion-agent-skills-now-available/f9.webp

## How it was made, per the creator

- One-shot: no
- Notes: Built by conversation in one Claude Code v2.1.12 session on Claude Max, with 35 short prompts and no spec up front. Claude ran the real install command itself and used the output as terminal text, fetched the Remotion brand page, and searched the web for the Claude Code and OpenCode logos. The prompts are the user turns of the exported terminal transcript: some line breaks are terminal wrapping, and the slash commands are left out. The first prompt says "remotion-dev/remotion"; later ones use "remotion-dev/skills". The reply that links the gist also carries a 74-second making-of video.

> This animation was created just by prompting
> (@Remotion)

## Links

- Watch: https://x.com/Remotion/status/2013626968386765291
- Original post: https://x.com/Remotion/status/2013626968386765291
- Prompt, posted as a reply: https://x.com/Remotion/status/2013628043105890779
- Full prompt history: the Claude Code transcript (gist): https://gist.github.com/JonnyBurger/5b801182176f1b76447901fbeb5a84ac
