# Remotion Animation
> Remotion video animation patterns from JonnyBurger's workflow. Spring physics, typewriter effects, 3D transforms, staggered reveals, flip transitions, composition architecture. Use when building Remotion compositions or programmatic video animations.
- Skill: `kmshihab7878/remotion-animation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kmshihab7878/remotion-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kmshihab7878/remotion-animation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: kmshihab7878 (https://skillmd.com/u/kmshihab7878)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kmshihab7878/remotion-animation
---
# Remotion Animation Patterns
Extracted from Jonny Burger's (Remotion creator) Claude Code session building a skills announcement video. These are production-quality Remotion patterns.
## Core Architecture
### Composition Hierarchy
```
Root.tsx — Registers all compositions with dimensions/fps/duration
Master.tsx — Top-level orchestrator with background + sequences
Sequence A — First scene (e.g., terminal animation)
Sequence B — Second scene (e.g., logo reveal)
SubComponent — Reusable UI elements (terminal, cursor, text)
```
### Key Imports
```tsx
import {
AbsoluteFill, // Full-frame positioning
Sequence, // Timed scene placement (from/durationInFrames)
Series, // Sequential scenes (auto-positioned)
useCurrentFrame, // Current frame number
useVideoConfig, // fps, durationInFrames, width, height
interpolate, // Frame-based value interpolation
spring, // Physics-based spring animation
Easing, // Easing functions for interpolate
Img, // Image component
staticFile, // Reference to public/ assets
} from "remotion";
```
## Animation Techniques
### 1. Spring Animation (No Bounce)
High damping prevents bounce. Use for slide-in, scale-up, or any entry animation.
```tsx
const slideIn = spring({
frame,
fps,
config: {
damping: 200, // High = no bounce (default 10 = bouncy)
stiffness: 100, // Controls speed (higher = faster)
},
});
const translateY = interpolate(slideIn, [0, 1], [700, 0]);
```
### 2. Typewriter Effect
Character-by-character text reveal at controlled speed.
```tsx
const command = "npx skills add remotion-dev/skills";
const charsPerSecond = 15;
const framesPerChar = fps / charsPerSecond;
const typingEndFrame = command.length * framesPerChar;
const visibleChars = Math.floor(
interpolate(frame, [0, typingEndFrame], [0, command.length], {
extrapolateRight: "clamp",
})
);
const displayedText = command.slice(0, visibleChars);
const isTyping = visibleChars < command.length;
```
### 3. Blinking Cursor
Toggles visibility on a 0.5s cycle. Solid while typing, blinking when idle.
```tsx
const Cursor: React.FC<{ blinking: boolean }> = ({ blinking }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const blinkCycle = Math.floor(frame / (fps * 0.5)) % 2;
const opacity = blinking ? (blinkCycle === 0 ? 1 : 0) : 1;
return (
);
};
```
### 4. Staggered Line Reveal
Lines appear one at a time at a fixed interval (e.g., 50ms per line).
```tsx
const framesPerLine = fps * 0.05; // 50ms per line
const linesStartFrame = outputStartFrame + framesPerLine;
const visibleLines = Math.floor(
interpolate(
frame,
[linesStartFrame, linesStartFrame + OUTPUT_LINES.length * framesPerLine],
[0, OUTPUT_LINES.length],
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
)
);
// Render: OUTPUT_LINES.slice(0, visibleLines).map(...)
```
### 5. 3D Perspective Transform
Gentle 3D rotation with perspective for depth. Animate rotateY over time for a slow pan effect.
```tsx
// Parent needs perspective
// Slow Y rotation over full duration
const rotateY = interpolate(frame, [0, durationInFrames], [10, -10]);
```
### 6. Flip-Away Transition
Terminal flips toward camera by rotating X axis. Transform origin at bottom edge.
```tsx
const flipOut = spring({
frame: frame - OUTPUT_DONE_FRAME,
fps,
config: { damping: 200, stiffness: 100 },
});
const flipRotateX = frame >= OUTPUT_DONE_FRAME
? interpolate(flipOut, [0, 1], [0, -90])
: 0;
// Wrapper with bottom transform origin
```
### 7. Scale Animation with Easing
Scale from 0 to 1 with ease-out curve for text reveals.
```tsx
const scale = interpolate(frame, [0, fps * 0.5], [0, 1], {
extrapolateRight: "clamp",
easing: Easing.out(Easing.cubic),
});
```
### 8. Gradual Scale Drift
Subtle scale increase over the full composition for cinematic feel.
```tsx
const scale = interpolate(frame, [0, durationInFrames], [0.9, 1]);
```
## UI Component Patterns
### macOS Terminal Window
```tsx
{/* Title bar */}
{/* Content */}