Claude Code Skill · Remotion

Build Remotion
transitions that
feel alive.

TransitionPresentation API, animation math, spring configs, and a catalog of production-ready patterns — for anyone building short-form video with Claude.

skills.sh npx skills add Ashad001/remotion-transitions

MIT · works with Claude Code, Cursor, Copilot, Gemini CLI + 36 more

terminal
$ npx skills add Ashad001/remotion-transitions
Fetching skill...
Installing remotion-transitions...
✓ Installed successfully
 
$ claude "add a striped slam transition between SceneA and SceneB"
Reading remotion-transitions...
Generating TransitionPresentation...
✓ Done — 44 lines written.
$
6
Transitions
3
Reference guides
40+
AI agents
MIT
License

The catalog

Every transition, ready to use or extend.

Hover each card to preview the effect.

SCENE A
SCENE B
Striped Slam
Alternating bars slam from both sides, cover the scene, then retract.
Opening cuts · Max energy
SCENE A
SCENE B
Zoom Punch
Old scene retreats; new punches in from 0.86× with cubic ease-in-out.
Mid-sequence · Camera energy
SCENE A
SCENE B
Diagonal Reveal
Skewed dark panel sweeps left→right with a glowing emerald accent line.
Cinematic · Reveals
SCENE A
SCENE B
Emerald Burst
Sharp radial flash peaks at the cut, clears in 20% of transition duration.
Product moments · Impact
SCENE A
SCENE B
Vertical Shutter
Venetian blind: N panels close over old scene, snap open on new one.
Graphic · Stop-motion
SCENE A
SCENE B
Glitch Slam
Horizontal shake decay + RGB-offset strip tears on exit. Hard pop on enter.
Final cuts · CTA · Chaos

What's inside

Three guides. Everything you need.

⚙️
custom-transition-pattern.md
The API Pattern
Full TransitionPresentation scaffold, linearTiming vs springTiming, stagger formula, frame budget math, and common gotchas.
📖
transition-catalog.md
Transition Catalog
Complete TypeScript source for all transitions, each with customization tips — strip count, easing, brand colors.
∫
animation-math.md
Animation Math
Easing functions, decaying oscillation, spring configs, the clamp pattern, and responsive 9:16 scaling.

Get started

One command.
Works everywhere.

Compatible with Claude Code, Cursor, GitHub Copilot, Gemini CLI, Windsurf, and 35+ more via the open Agent Skills standard.

via skills.sh
npx skills add Ashad001/remotion-transitions
via Claude Code plugin
/plugin install remotion-transitions
Source
github.com/Ashad001/remotion-transitions open →
Installing the skill
$ npx skills add Ashad001/remotion-transitions
Fetching skill...
✓ remotion-transitions installed
 
$ claude "build a glitch slam transition with RGB tears"
Skill: remotion-transitions loaded
Reading transition-catalog.md...
Reading animation-math.md...
✓ TransitionPresentation written — 52 lines.
$