Toolkit-specific Remotion patterns — custom transitions, shared components, and project conventions. For core Remotion framework knowledge (hooks, animations, rendering, etc.), see the `remotion-official` skill.

Remotion — Toolkit Extensions Core Remotion knowledge lives in .claude/skills/remotion official/ (synced from the official [remotion dev/skills](https://github.com/remotion dev/skills) repo). This file covers toolkit specific patterns only. Shared Components Reusable video components in lib/components/ . Import in templates via: Component Purpose AnimatedBackground Floating shapes background (variants: subtle, tech, warm, dark) SlideTransition Scene transitions (fade, zoom, slide up, blur fade) Label Floating label badge with optional JIRA reference Vignette Cinematic edge darkening overlay LogoWatermark Corner logo branding SplitScreen Side by side video comparison NarratorPiP Picture in picture presenter overlay Envelope 3D envelope with opening flap animation PointingHand Animated hand emoji with slide in and pulse MazeDecoration Animated isometric grid decoration for corners Custom Transitions The toolkit includes a transitions library at lib/transitions/ for scene to scene effects beyond the official @remotion/transitions package. Using TransitionSeries Available Custom Transitions 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 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: 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 .