/remotion

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.

Remotion — Toolkit Extensions

> **Core Remotion knowledge** lives in `.claude/skills/remotion-official/` (synced from the official [remotion-dev/skills](https://github.com/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

1. **Frame-based animations only** — Avoid CSS transitions/animations; they cause flickering during render 2. **Use fps from useVideoConfig()** — Make animations frame-rate independent 3. **Clamp interpolations** — Use `extrapolateRight: 'clamp'` to prevent runaway values 4. **Use OffthreadVideo** — Better performance than `<Video>` for complex compositions 5. **delayRender for async** — Always block rendering until data is ready 6. **staticFile for assets** — Reference files from `public/` folder correctly 7. **All projects use 30fps** — Timing: frames = seconds × 30 8. **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](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. Cre