# Transition

> Remotion, CSS, and ffmpeg transition recipes (whip pans, zoom ramps, glitch cuts, film burns, parallax) for quote films and Shorts. Use when building QuoteLong/QuoteShort beat-synced cuts or caption motion language. Not for Remotion project setup and render (remotion-video) and not the /effects content-type matrix (inspire-quote-effects).

- Skill: `kayforkind/transition` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add kayforkind/transition`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kayforkind/transition/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Kayforkind (https://skillmd.com/u/kayforkind)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/kayforkind/transition

---


# Transition skill (quote / cinematic Shorts)

## When to use

- Remotion compositions with sequential beats (quotes, chapters, stills)
- User hates long static holds / Ken-Burns-only edits
- Need a repeatable transition language for Inspire to Rise / YT Videos packs

## Hard pacing rules (2025–2026 retention)

| Rule | Value |
|------|--------|
| Gap between quotes | **0.8–1.5s** max (never 10–20s pads) |
| Target long quote film | **6–8 min** unless density justifies longer |
| Cold open | 2–3s hook motion + 1 line |
| Breath beat | Black flash / film burn every ~90s (6–10 frames) |
| Ken Burns alone | Max ~20% of beats — pair with real transitions |

## Trend stack (quote / motivation)

- Hook-heavy first 3s; micro-motion always on screen
- Kinetic / word-reveal captions (1–3 words/line)
- Motivated transitions (whip, zoom snap, light-leak) + whoosh SFX
- Sound design: whoosh on cut, impact on power word, music ducked under VO
- Cinematic grade + film grain (subtle)
- **Likeness:** when user opts in → real archive photos/video (see `inspire-quote-effects`); otherwise Path B = no IP likeness

## Remotion transition types

Prefer `@remotion/transitions` `TransitionSeries` + presentations:

| Name | Use | Typical frames @30fps |
|------|-----|------------------------|
| `fade` | Soft emotional handoff | 10–15 |
| `slide` / whip | Energy / chapter change | 12–18 |
| `wipe` | Symbolic directional change | 12–16 |
| SpeedRampZoom (custom) | Push into next still | 8–12 |
| RGBGlitchCut (custom) | Doubt / conflict beats | 3–6 |
| FilmBurn (custom CSS) | Breath / act break | 18–24 |
| BlackFlashBreath | Mid-film reset | 6–10 |
| ParallaxPush | Cold open / ambient | beat duration |

### Beat mapping (default quote film)

1. Cold open → Parallax / slow fade  
2. Quote → quote: alternate WhipPan / SpeedRampZoom / fade  
3. Doubt / villain line → RGBGlitchCut (low)  
4. Every ~5th cut → FilmBurn  
5. Before SM1 lock → BlackFlashBreath (short)  
6. Final → SpeedRampZoom out + fade to black  

## Caption preset

- Font: Bebas Neue / Anton / strong sans — uppercase  
- Word reveal synced to VO window  
- Accent color on `powerWord` (Neon Dawn gold `#F5C16C` or crimson `#E11D48`)  
- Drop shadow `0 4px 12px rgba(0,0,0,0.8)`; light stroke OK  
- No heavy cards in hero quote region  

## Audio mix

| Layer | Level |
|-------|--------|
| VO | 0 dB target (~−14 LUFS master) |
| Music under VO | ~−18 to −24 dB (duck) |
| Transition SFX | whoosh −12 dB, impact −10 dB |
| Ambience | −28 dB |

## Project layout (YT Videos quote pack)

```
remotion/src/components/transitions/   # WhipPan, SpeedRampZoom, RGBGlitch, FilmBurn, …
remotion/src/components/CaptionWordReveal.tsx
remotion/public/sfx/whoosh.mp3
remotion/src/lib/timelineLong.ts       # transitionIn per beat
```

## Anti-patterns

- 18–20s silence pads to fake “10 minutes”
- Ken Burns only with static full-block quote cards
- Transition spam every frame (keep 0.3–0.6s cuts)
- Marvel suit/mask on Path B packs
- **Hard `Sequence` stacks with only overlay flashes** called “transitions” — FAIL. Multi-beat films need `@remotion/transitions` `TransitionSeries` (or equivalent timed presentations) between beats.
- Shipping quote edits without Cursor **`/effects`** gates + **`/reviewresults`**

## Sibling skills

- `inspire-quote-effects` + Cursor **`/effects`** → primary quote Remotion effects command (matrix, archive, gates)
- `review-results` + **`/reviewresults`** → exit gate after render
- `yt-shorts-flow-director` → Flow generation  
- `remotion-shorts` → assemble Shorts / GPU  
- `effects` (FFmpeg catalog) → optional filter recipes, not Remotion spine  
- `shorts-audio-mix-master` → loudnorm / ducking when present