Remotion Custom Transitions

This skill teaches you how to build production-grade, high-energy custom transitions in Remotion using the TransitionPresentation API — the same pattern used in Fyltr's Instagram Reel campaign.

Quick Reference

• Custom Transition Pattern — The TransitionPresentation API, the exact component shape, and how timing works
• Transition Catalog — 6 battle-tested transitions with full source: Striped Slam, Zoom Punch, Diagonal Reveal, Emerald Burst, Vertical Shutter, Glitch Slam
• Animation Math — Easing functions, stagger formulas, spring configs, and the clamp extrapolation pattern used throughout

Core Concept

Remotion's @remotion/transitions package exposes a TransitionPresentation type. You implement a component that receives:

• presentationProgress — 0 at transition start → 1 at transition end
• presentationDirection — "exiting" (old scene) or "entering" (new scene)
• children — the scene being wrapped

The same component wraps both scenes simultaneously. You animate different things depending on direction.