remotion

Implements toolkit-specific Remotion patterns including custom transitions, shared components, and project timing conventions.

Updated Sep 1, 2026
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill remotion-zamansepeti43
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/remotion
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill remotion-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @remotion/transitions, @remotion/renderer, @remotion/lambda, @remotion/player, @remotion/bundler, remotion, and includes references (resource) components.

What problem does it solve? Building videos programmatically with Remotion often requires reinventing common scene transitions, reusable visual components, and consistent timing conventions across projects. This Skill provides a curated set of toolkit-specific patterns so you can compose polished videos without rebuilding shared infrastructure. ## Core Features & Use Cases - Custom Transition Library: Apply scene-to-scene effects like glitch, lightLeak, clockWipe, pixelate, and checkerboard via TransitionSeries, with documented options and duration guidelines. - Shared Component Catalog: Import ready-made components such as AnimatedBackground, SlideTransition, SplitScreen, NarratorPiP, and LogoWatermark from lib/components. - Project Conventions & API Reference: Follow frame-based animation best practices, 30fps timing tables, and a full Remotion API reference covering hooks, renderer, Lambda, and Player. - Use Case: When building a product demo video, you can chain Title, Demo, and Stats scenes with glitch or lightLeak transitions, add a LogoWatermark overlay, and follow the pacing guidelines for voiceover timing. ## Quick Start Ask the AI to create a Remotion video composition using the toolkit's shared components and a custom transition such as glitch or checkerboard between scenes.

Frequently Asked Questions about remotion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add custom transitions between scenes in Remotion?

Use TransitionSeries from @remotion/transitions and pass a custom presentation like glitch, lightLeak, or checkerboard from the toolkit's lib/transitions library. Pair it with a timing function such as linearTiming and set durationInFrames between 15 and 60 depending on the effect.

What reusable components are available for Remotion video projects?

The toolkit provides shared components in lib/components including AnimatedBackground, SlideTransition, Label, Vignette, LogoWatermark, SplitScreen, NarratorPiP, Envelope, PointingHand, and MazeDecoration. Import them into templates with a relative path to lib/components.

Should I use Video or OffthreadVideo in Remotion compositions?

OffthreadVideo is recommended for better rendering performance in complex compositions. It also supports transparent videos with alpha channels and HDR tone mapping, while the standard Video component is simpler for basic playback.

Why do CSS animations cause flickering in Remotion renders?

CSS transitions and animations are not frame-synchronized, so they produce inconsistent frames during rendering. Use frame-based animations with useCurrentFrame, interpolate, and spring instead, and clamp interpolations with extrapolateRight set to clamp.

How do I render a Remotion video on AWS Lambda?

Deploy a function and site with @remotion/lambda, then call renderMediaOnLambda with your composition ID, codec, and framesPerLambda. Poll progress with getRenderProgress and download the result with downloadMedia once rendering completes.

Does Remotion require a commercial license?

Remotion has a special license and companies may need to obtain a license for commercial use. Check https://remotion.dev/license for current terms before using it in commercial projects.