Remotion transitions

Skill Ashad001/remotion-transitions

Custom Remotion scene transitions, production-ready TransitionPresentation patterns with animation math and Claude Code skill integration.

Install

npx -y skills add Ashad001/remotion-transitions

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

This skill should be used when the user asks to create custom Remotion transitions, asks about "cool transitions", "cinematic transitions", "striped transitions", "glitch transitions", "custom TransitionPresentation", or wants to build scene-to-scene transitions in Remotion beyond the built-in library. Also triggers for "how to make transitions in Remotion", "custom transition", "high-energy transitions", "energy transitions", "branded transitions".

SKILL.md

2.6 KB, as published. Nobody here has run it

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.

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 first
Copying/adapting an existing effect → load transition-catalog.md
Debugging timing or easing math → load animation-math.md