remotion

Q: How do I install remotion?

Run npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill remotion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/remotion/ (personal) or .claude/skills/remotion/ (project).

by digitalsambaMedia & Creative

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.

Installs: 1.2K
Last 24h: +10
Trending rank: #8684
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill remotion

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads remotion automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the remotion skill do?

How do I install remotion?

Run npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill remotion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/remotion/ (personal) or .claude/skills/remotion/ (project).

Which AI agents can use remotion?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is remotion safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains remotion?

It is published by digitalsamba in digitalsamba/claude-code-video-toolkit. It has 1,159 recorded installs.