Remotion Video Compositions

React/TypeScript video compositions built with Remotion — programmatic video creation using code instead of manual editing.

What's Inside

YouTubePreview

Animated YouTube thumbnail with spring-based title animation, gradient glow effect, and fade-in badge. Demonstrates spring(), interpolate(), and custom easing functions.

ThesesSlide

Sequential reveal of key points with staggered animations. Each thesis slides in with its own spring timing — shows how to orchestrate multi-element sequences in Remotion.

CombinedVideo

Two compositions chained with custom FadeTransition component — crossfade between scenes using opacity interpolation. Demonstrates Sequence and timeline composition.

Tech Stack

• Remotion 4.0 — React-based video framework
• TypeScript — type-safe components
• React 19 — latest stable
• Tailwind CSS 4 — styling utilities

Getting Started

npm install
npx remotion studio

Open http://localhost:3000 to preview compositions in browser.

Render

npx remotion render YouTubePreview out/preview.mp4
npx remotion render ThesesSlide out/theses.mp4
npx remotion render CombinedVideo out/combined.mp4

Project Structure

src/
├── Root.tsx              # Composition registration
├── index.ts              # Entry point
├── index.css             # Global styles
└── comp/
    ├── YouTubePreview.tsx    # YouTube thumbnail animation
    ├── ThesesSlide.tsx       # Sequential thesis reveal
    └── CombinedVideo.tsx     # Multi-scene composition

Key Concepts Demonstrated

• Spring animations — physics-based motion with mass, damping, stiffness
• Interpolation — frame-based value mapping with clamping
• Sequential timing — staggered element reveals using frame offsets
• Custom transitions — fade-in/fade-out between compositions
• Gradient effects — radial and linear gradients for visual polish
• Glow animations — sine-wave based pulsing opacity