Remotion

Remotion — Toolkit Extensions

Core Remotion knowledge lives in .claude/skills/remotion-official/ (synced from the official remotion-dev/skills repo). This file covers toolkit-specific patterns only.

Shared Components

Reusable video components in lib/components/. Import in templates via:

import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';

Custom Transitions

The toolkit includes a transitions library at lib/transitions/ for scene-to-scene effects beyond the official @remotion/transitions package.

Using TransitionSeries

import { TransitionSeries, linearTiming } from '@remotion/transitions';// Import custom transitions from lib (adjust path based on your project location)import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';// Or import from @remotion/transitions for official onesimport { slide, fade } from '@remotion/transitions/slide';
<TransitionSeries>  <TransitionSeries.Sequence durationInFrames={90}>    <TitleSlide />  </TransitionSeries.Sequence>  <TransitionSeries.Transition    presentation={glitch({ intensity: 0.8 })}    timing={linearTiming({ durationInFrames: 30 })}  />  <TransitionSeries.Sequence durationInFrames={120}>    <ContentSlide />  </TransitionSeries.Sequence></TransitionSeries>

Available Custom Transitions

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

Transition Examples

// Tech/cyberpunk feelglitch({ intensity: 0.8, slices: 8, rgbShift: true })
// Warm celebrationlightLeak({ temperature: 'warm', direction: 'right' })
// High energy zoomzoomBlur({ direction: 'in', blurAmount: 20 })
// Chromatic aberrationrgbSplit({ direction: 'diagonal', displacement: 30 })
// Clock sweep revealclockWipe({ direction: 'clockwise', startAngle: 0 })
// Retro pixelationpixelate({ maxBlockSize: 50, glitchArtifacts: true })
// Checkerboard patternscheckerboard({ pattern: 'diagonal', gridSize: 8 })checkerboard({ pattern: 'spiral', gridSize: 10 })checkerboard({ pattern: 'center-out', squareAnimation: 'scale' })

Transition Duration Guidelines

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

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 [blocked].

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.