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

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 }

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 Conventions

These are choices specific to this toolkit. For general Remotion best practices (interpolation clamping, useVideoConfig, delayRender, staticFile, no CSS animations), see the remotion-official skill.

All projects use 30fps — Timing: frames = seconds × 30
playbackRate must be constant — For variable/extreme speeds, pre-process with FFmpeg
Video/audio components — Templates use <OffthreadVideo> and <Audio> from remotion. Upstream now also documents <Video>/<Audio> from @remotion/media (newer, has trim props + pitch shifting). Both render correctly; prefer the toolkit's choice when extending existing templates for consistency.

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

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 }

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 Conventions

All projects use 30fps — Timing: frames = seconds × 30
playbackRate must be constant — For variable/extreme speeds, pre-process with FFmpeg
Video/audio components — Templates use <OffthreadVideo> and <Audio> from remotion. Upstream now also documents <Video>/<Audio> from @remotion/media (newer, has trim props + pitch shifting). Both render correctly; prefer the toolkit's choice when extending existing templates for consistency.

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

Documentation

Documentation

Remotion — Toolkit Extensions

Shared Components

Custom Transitions

Using TransitionSeries

Available Custom Transitions

Transition Examples

Transition Duration Guidelines

Preview Transitions

Toolkit Conventions

Project Timing Conventions

Advanced API

License Note

Feedback & Contributions

Documentation

remotion

Documentation

Remotion — Toolkit Extensions

Shared Components

Custom Transitions

Using TransitionSeries

Available Custom Transitions

Transition Examples

Transition Duration Guidelines

Preview Transitions

Toolkit Conventions

Project Timing Conventions

Advanced API

License Note

Feedback & Contributions