Esta skill é para criar transições personalizadas no Remotion, como estilos 'legais', 'cinematográficos', 'listrados' ou 'com falhas', e para construir transições de cena a cena além da biblioteca padrão. Também atende a perguntas sobre 'como fazer transições no Remotion', 'transição personalizada' ou 'transições de alta energia'.
Receba novas skills de Design e Frontend toda segunda
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
Ler descrição completaRecolher descrição
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
Never use CSS transitions/animations — all motion via interpolate() / spring() driven by presentationProgress
Never use useCurrentFrame() inside a transition component — use presentationProgress only
Always return { component, props: {} } — the props object must exist even if empty
Create instances outside components at module level to keep them stable across re-renders
Pair with linearTiming (for dramatic frame-perfect transitions) or springTiming (for springy physics)
When to Load References
Building a new custom transition → load [custom-transition-pattern.md](./references/custom-transition-pattern.md) first
Copying/adapting an existing effect → load [transition-catalog.md](./references/transition-catalog.md)
Debugging timing or easing math → load [animation-math.md](./references/animation-math.md)
