remotion-transitions

KO | EN

gitlite — search

#javascript #python #ruby #game #java #ios #qt #php #c-sharp #c-plus-plus #go #pascal

remotion-transitions

★ 68 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:
```bash
npx skills add ashad001/remotion-transitions
```

Or clone manually:
```bash
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`](SKILL.md) | Entry point, golden rules, quick reference |
| [`custom-transition-pattern.md`](references/custom-transition-pattern.md) | `TransitionPresentation` scaffold, `linearTiming` vs `springTiming`, stagger formula, common gotchas |
| [`transition-catalog.md`](references/transition-catalog.md) | Full TypeScript source for all transitions with customization tips |
| [`animation-math.md`](references/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](https://github.com/ashad001/remotion-transitions-landing), deployed on Vercel.

## License

MIT

remotion-transitions

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README