Remotion transitions are frame-accurate scene changes written in React — wipes, matches, flash cuts — not opaque “effect presets.” Shotpack packages each technique as a recipe card plus a tuned demo.tsx.
Start here: wipe-transitions (free)
The free shot wipe-transitions is the fastest way to study Remotion transition timing:
- Agent brief: /demos/transition/wipe-transitions/prompt.md
- Source of truth: /demos/transition/wipe-transitions/demo.tsx
- Card: /demos/transition/wipe-transitions/prompt.md
Copy the wipe geometry and easing first; then re-skin colors and durations for your brand.
Transition patterns in the library
| Pattern | Free / paid | Notes |
|---|---|---|
| Wipe / directional cover | Free (wipe-transitions) |
Clean product-to-product handoff |
| Crash zoom punch | Free (crash-zoom-punch) |
Impact beat between beats |
| Cel flash stomp | Free (cel-flash-stomp) |
Graphic flash cut energy |
| Card flock / page turn family | Mostly paid | Unlock via core pack |
Filter the library by category transition to browse more.
Implementation rules
- Drive opacity/clip/transform from
useCurrentFrame()— no CSS-only “hope it syncs.” - Keep transition length short relative to the hold (often 8–20 frames at 30fps unless the recipe says otherwise).
- Match incoming and outgoing compositions on a shared visual anchor when the card calls for it.