remotion Checked

| Transition | Options | Best For |

|------------|---------|----------|

| glitch() | intensity, slices, rgbShift | Tech demos, edgy reveals, cyberpunk |

| rgbSplit() | direction, displacement | Modern tech, energetic transitions |

| zoomBlur() | direction, blurAmount | CTAs, high-energy moments, impact |

| lightLeak() | temperature, direction | Celebrations, film aesthetic, warm moments |

| clockWipe() | startAngle, direction, segments | Time-related content, playful reveals |

| pixelate() | maxBlockSize, gridSize, scanlines, glitchArtifacts, randomness | Retro/gaming, digital transformations |

| checkerboard() | gridSize, pattern, stagger, squareAnimation | Playful reveals, structured transitions |

**Checkerboard patterns:** sequential, random, diagonal, alternating, spiral, rows, columns, center-out, corners-in

### Transition Examples

// Tech/cyberpunk feel
glitch({ intensity: 0.8, slices: 8, rgbShift: true })

// Warm celebration
lightLeak({ temperature: 'warm', direction: 'right' })

// High energy zoom
zoomBlur({ direction: 'in', blurAmount: 20 })

// Chromatic aberration
rgbSplit({ direction: 'diagonal', displacement: 30 })

// Clock sweep reveal
clockWipe({ direction: 'clockwise', startAngle: 0 })

// Retro pixelation
pixelate({ maxBlockSize: 50, glitchArtifacts: true })

// Checkerboard patterns
checkerboard({ pattern: 'diagonal', gridSize: 8 })
checkerboard({ pattern: 'spiral', gridSize: 10 })
checkerboard({ pattern: 'center-out', squareAnimation: 'scale' })

### Transition Duration Guidelines

| Type | Frames | Notes |

|------|--------|-------|

| Quick cut | 15-20 | Fast, punchy |

| Standard | 30-45 | Most common |

| Dramatic | 50-60 | Slow reveals |

| Glitch effects | 20-30 | Should feel sudden |

| Light leak | 45-60 | Needs time to sweep |

### Preview Transitions

Run the showcase gallery to see all transitions:

cd showcase/transitions && npm run studio

Toolkit Best Practices

1. **Frame-based animations only** — Avoid CSS transitions/animations; they cause flickering during render

2. **Use fps from useVideoConfig()** — Make animations frame-rate independent

3. **Clamp interpolations** — Use extrapolateRight: 'clamp' to prevent runaway values

4. **Use OffthreadVideo** — Better performance than <Video> for complex compositions

5. **delayRender for async** — Always block rendering until data is ready

6. **staticFile for assets** — Reference files from public/ folder correctly

7. **All projects use 30fps** — Timing: frames = seconds × 30

8. **playbackRate must be constant** — For variable/extreme speeds, pre-process with FFmpeg

Project Timing Conventions

| Scene Type | Duration | Notes |

|------------|----------|-------|

| Title | 3-5s (90-150f) | Logo + headline |

| Overview | 10-20s | 3-5 bullet points |

| Demo | 10-30s | Adjust playbackRate to fit |

| Stats | 8-12s | 3-4 stat cards |

| Credits | 5-10s | Quick fade |

**Pacing:** ~150 words/minute for voiceover. Voiceover drives timing.

Advanced API

For detailed API documentation on all hooks, components, renderer, Lambda, and Player APIs, see reference.md (reference.md).

License Note

Remotion has a special license. Companies may need to obtain a license for commercial use. Check https://remotion.dev/license

---

Feedback & Contributions

If this skill is missing information or could be improved:

• **Missing a pattern?** Describe what you needed
• **Found an error?** Let me know what's wrong
• **Want to contribute?** I can help you:

1. Update this skill with improvements

2. Create a PR to github.com/digitalsamba/claude-code-video-toolkit

Just say "improve this skill" and I'll guide you through updating .claude/skills/remotion/SKILL.md.