remotion
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
- +12
- Trending rank
- #8075
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/calesthio/openmontage --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 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.
FAQ
What does the remotion skill do?
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.
How do I install remotion?
Run npx skills add https://github.com/calesthio/openmontage --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 calesthio in calesthio/openmontage. It has 1,191 recorded installs.
More from calesthio/openmontage
video-edit
calesthio/openmontage
Edit videos locally using ffmpeg. Trim, concat, resize, speed, overlay, extract audio, compress, and convert. Use when: (1) Trimming or cutting video segments, (2) Concatenating multiple clips, (3) Resizing video for social platforms, (4) Extracting or replacing audio, (5) Compressing video, (6) Converting video formats, (7) Getting video info.
video-understand
calesthio/openmontage
Understand video content locally using ffmpeg frame extraction and Whisper transcription. No API keys needed. Use when: (1) Understanding what a video contains, (2) Transcribing video audio locally, (3) Extracting key frames for visual analysis, (4) Getting video content without API keys.
svg-character-animation
calesthio/openmontage
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
ai-video-gen
calesthio/openmontage
Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content production, (3) Image-to-video generation with a reference image, (4) Choosing between video generation providers (VEO, Kling, Sora, Runway, Seedance, MiniMax, Gemini Omni). Supports gateways: HeyGen API, fal.ai API, Kling official direct API, and the Gemini API (Gemini Omni Flash).
video-download
calesthio/openmontage
Download video and audio from YouTube and 1000+ sites using yt-dlp. No API keys needed. Use when: (1) Downloading a video from YouTube or other sites, (2) Extracting audio from a video URL, (3) Downloading subtitles/captions from a video, (4) Getting video metadata without downloading.
ffmpeg
calesthio/openmontage
Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image