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';

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

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 ones import { 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

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

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

• Use fps from useVideoConfig() — Make animations frame-rate independent

• Clamp interpolations — Use extrapolateRight: 'clamp' to prevent runaway values

• Use OffthreadVideo — Better performance than <Video> for complex compositions

• delayRender for async — Always block rendering until data is ready

• staticFile for assets — Reference files from public/ folder correctly

• All projects use 30fps — Timing: frames = seconds × 30

• 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.

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:

• Update this skill with improvements

• 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 .