⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
remotion-transitions
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".
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
// README
remotion-transitions
A Claude Code skill plugin for building custom scene transitions in Remotion — covers the TransitionPresentation API from scratch, animation math, timing patterns, and a catalog of production-ready examples to learn from or drop in directly.
Transitions
| Name | Effect | Best for |
|---|---|---|
| Striped Slam | Alternating brand-color bars slam in from both sides, then retract | Opening cuts, high-impact moments |
| Zoom Punch | Outgoing scene retreats; incoming punches in with cubic ease | Mid-sequence energy |
| Diagonal Reveal | Dark panel sweeps left→right with skewed edge and glowing accent line | Cinematic reveals |
| Emerald Burst | Sharp radial flash peaks at the cut, dissolves in 20% of duration | Emotional or product moments |
| Vertical Shutter | N vertical panels close over the old scene, then snap open | Graphic, stop-motion feel |
| Glitch Slam | Horizontal shake decay + RGB-offset strip tears on exit | Final cuts, CTAs |
Installation
Once listed on the marketplace:
/plugin install remotion-transitions
Until then, install via skills.sh:
npx skills add ashad001/remotion-transitions
Or clone manually:
git clone https://github.com/ashad001/remotion-transitions
Skill triggers
This skill auto-activates when you ask Claude about:
- Custom Remotion transitions or
TransitionPresentation - "cool transitions", "high-energy transitions", "cinematic transitions"
- "striped transitions", "glitch transitions", "zoom punch", "shutter"
- Frame budget math, stagger formulas, spring configs for video
References
| File | Covers |
|---|---|
SKILL.md | Entry point, golden rules, quick reference |
custom-transition-pattern.md | TransitionPresentation scaffold, linearTiming vs springTiming, stagger formula, common gotchas |
transition-catalog.md | Full TypeScript source for all transitions with customization tips |
animation-math.md | Easing functions, decaying oscillation, spring configs, clamp pattern, frame budget formula, responsive scaling |
Requirements
remotion≥ 4.0@remotion/transitions≥ 4.0- React 18+
- TypeScript (recommended)
Landing page
The landing page lives in a separate repo: ashad001/remotion-transitions-landing, deployed on Vercel.
License
MIT
// HOW IT'S BUILT
KEY FILES