| name | remotion |
| description | 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. |
This skill was copied from the claude-code-video-toolkit seed (commit b86feda) on 2026-05-18.
Workspace adaptations:
- References to the seed's
tools/*.py scripts (e.g., tools/voiceover.py, tools/image_edit.py, tools/sadtalker.py) do not exist in this workspace. Image/video/voice generation here is orchestrated by TypeScript in lib/ (lib/audio.ts, lib/assets.ts, lib/render.ts) calling Modal jobs (for FLUX images) and the Higgsfield CLI (for video clips).
- Treat any seed-tool path as a conceptual reference; the actual command in this workspace is the corresponding
lib/*.ts function or a direct higgsfield/modal CLI call.
- Briefs live in
briefs/<slug>.md, per-render workspaces in runs/<slug>/, finished MP4s in videos/.
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 { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';
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
glitch({ intensity: 0.8, slices: 8, rgbShift: true })
lightLeak({ temperature: 'warm', direction: 'right' })
zoomBlur({ direction: 'in', blurAmount: 20 })
rgbSplit({ direction: 'diagonal', displacement: 30 })
clockWipe({ direction: 'clockwise', startAngle: 0 })
pixelate({ maxBlockSize: 50, glitchArtifacts: true })
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.
