skills.rest
Kaleb-Rupe
Kaleb-RupeCOMMUNITY
Explore all skills by this author →
𝕏@MightieMagsGitHub

Remotion

Create programmatic videos and motion graphics in React rendered to MP4 with Remotion.

Updated Jul 10, 2026
Search Tags:#react#animation#motion graphics#video generation#remotion#mp4 rendering#content to video
One-click install
npx skills add https://github.com/Kaleb-Rupe/aurora --skill remotion-kaleb-rupe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Remotion
Source: https://github.com/Kaleb-Rupe/aurora/tree/main/claude/skills/Media/Remotion
Command: npx skills add https://github.com/Kaleb-Rupe/aurora --skill remotion-kaleb-rupe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/media, @remotion/captions, @remotion/three, @remotion/lottie, @remotion/google-fonts, @remotion/fonts, @remotion/gif, @remotion/layout-utils, mediabunny, and includes references (resource) components.

What problem does it solve? Writing video content by hand in timeline editors is slow and hard to automate; this Skill lets you generate professional videos, animations, and motion graphics programmatically using React components rendered to MP4. ## Core Features & Use Cases - Content-to-Animation Workflow: Transform blog posts, YouTube transcripts, articles, PDFs, or raw text into structured animated videos with title cards, key-point scenes, and data visualizations. - Aurora Theme Integration: Applies a consistent visual theme (colors, typography, spring animations, spacing) derived from Art skill preferences across all generated videos. - 28 Reference Guides: Covers animations, audio, captions, charts, 3D with Three.js, Lottie, fonts, sequencing, transitions, and media metadata extraction with Mediabunny. - Use Case: Ask to animate a blog post, and the Skill extracts the content structure, verifies narrative coherence and reading-speed timing, generates Remotion components, and renders an MP4 to your Downloads folder. ## Quick Start Animate my blog post at ./posts/my-article.md into a YouTube video using the Remotion skill.

Frequently Asked Questions about Remotion

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

FAQPage Schema
How do I create a video with React and Remotion?▼

Define a React component that uses useCurrentFrame and useVideoConfig to drive animations, then register it with a Composition specifying durationInFrames, fps, width, and height. Render it to MP4 with npx remotion render followed by the composition ID and output path.

How do I animate elements in Remotion without CSS?▼

Use the interpolate function for linear or eased animations and the spring function for physics-based motion, both driven by useCurrentFrame. CSS animations, transitions, and Tailwind animate classes are forbidden because they do not render correctly in exported videos.

Can Remotion videos include audio, captions, and images?▼

Yes. Use the Audio component from @remotion/media with volume, trim, and playbackRate controls, parse SRT files with @remotion/captions for TikTok-style word highlighting, and display images with the Img component using staticFile for assets in the public folder.

Why does my Remotion video flicker during rendering?▼

Flickering occurs when animations are driven by CSS, third-party animation libraries, or useFrame from React Three Fiber instead of useCurrentFrame. All animations must be derived from the current frame number so each rendered frame is deterministic.

What video dimensions should I use for YouTube, TikTok, and Instagram?▼

Use 1920x1080 for YouTube landscape, 1080x1920 for YouTube Shorts, TikTok, and Reels, 1080x1080 for Instagram square posts, and 1080x1350 for Instagram portrait. Set these as width and height on your Composition.

Related Skills

Explore More Design & Creative Skills→
michalparkolamichalparkola
515

tapestry

Extract content from URLs and generate Ship-Learn-Next action plans.

Community
Advanced
hmzainjamilhmzainjamil
1

social-publisher

Generate platform-specific captions, titles, hashtags, and scheduling recommendations for social media publishing.

Community
Advanced
jorgeochipinti97jorgeochipinti97

brand-guidelines

Apply Anthropic brand colors and typography to documents and UI assets.

Community
Intermediate
gaoqiongxiegaoqiongxie
1

remotion-video

Generate animated MP4 and WebM videos using React and Remotion.

Community
Intermediate