remotion

Build video compositions with Remotion, including animations, transitions, and captions.

8|4|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/jscraik/Agent-Skills --skill remotion-jscraik
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/ui/remotion
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill remotion-jscraik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides best-practice guidance for creating video compositions using Remotion, a React-based framework, streamlining the development and rendering process.

Core Features & Use Cases

  • Composition Definition: Learn how to define compositions, stills, and organize them into folders.
  • Dynamic Content: Utilize calculateMetadata for dynamic durations, dimensions, and props based on external data.
  • Asset Handling: Master importing and using images, videos, audio, fonts, and animated GIFs.
  • Animations & Transitions: Implement smooth animations using useCurrentFrame(), spring(), and apply fullscreen scene transitions.
  • Captions & Text: Generate and display captions, animate text with typewriter effects, and measure text dimensions.
  • Use Case: Develop a marketing video with dynamic text overlays, animated charts, and synchronized audio, all defined and rendered programmatically.

Quick Start

Use the remotion skill to create a new video composition with dynamic text and animated charts.

Frequently Asked Questions about remotion

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

FAQPage Schema
How do I create video compositions programmatically using React?

You can create video compositions programmatically using Remotion, a React-based framework that allows you to define compositions, manage assets, and render videos entirely from code.

How do I generate dynamic video durations and dimensions based on external data?

You can generate dynamic video durations, dimensions, and props by utilizing the `calculateMetadata` function in Remotion to adjust compositions based on external data inputs.

Can I animate text and implement scene transitions in Remotion?

Yes, you can animate text with typewriter effects, measure text dimensions, and implement smooth fullscreen scene transitions using Remotion's `useCurrentFrame()` and `spring()` animation functions.

What media formats and assets can I use when building videos with code?

When building videos with code via Remotion, you can import and use images, videos, audio, fonts, and animated formats including GIFs and Lottie animations.

Does Remotion support TypeScript for frontend video development?

Yes, Remotion supports TypeScript, allowing frontend developers to leverage type-safe React components when defining and rendering video compositions.