remotion-transitions

# 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](./references/custom-transition-pattern.md) — The `TransitionPresentation` API, the exact component shape, and how timing works - [Transition Catalog](./references/transition-catalog.md) — 6 battle-tested transitions with full source: Striped Slam, Zoom Punch, Diagonal Reveal, Emerald Burst, Vertical Shutter, Glitch Slam - [Animation Math](./references/animation-math.md) — 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. ## Golden Rules 1. **Never use CSS transitions/animations** — all motion via `interpolate()` / `spring()` driven by `presentationProgress` 2. **Never use `useCurrentFrame()`** inside a transition component — use `presentationProgress` only 3. Always return `{ component, props: {} }`...