SKILL.md

$27

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 &#x26;&#x26; 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:

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.

remotion