remotion-video_skill

Overview

This skill creates programmatic explainer videos using Remotion (React) with a risograph-inspired visual system. It provides ready-made compositions, typography, color tokens, grain overlay, and animation patterns tuned for short-form social and explainer content. Videos are code-first, version-controlled, and optimized for vertical, square, and landscape outputs.

How this skill works

Define compositions for each aspect ratio (9:16, 1:1, 16:9) and build scene components that use Remotion primitives like useCurrentFrame, interpolate, spring, and Sequence. Apply the provided color palette, font loading, grain overlay, and animation helpers to create consistent risograph-style motion. Use the timing guidelines and scene-overlap pattern to pace scenes, then render specific compositions with remotion render commands.

When to use it

• Creating 10–60 second explainer videos for Skill Stack concepts
• Producing animated social clips in vertical, square, and landscape formats
• Visualizing step-by-step technical workflows or progressive disclosure
• Any video that needs precise timing, readable typography, and repeatable assets

Best practices

• Always create three compositions (vertical, square, landscape) up front
• Use minimum readable font sizes (headline ≥64px, body ≥28px) and test on phone
• Overlap scenes by ~30–50 frames and combine with fadeIn/fadeOut for smooth cross-fades
• Favor slower pacing—double your initial duration guess to ensure readability
• Keep components small and reusable so scenes are version-controlled and editable

Example use cases

• A 20-second Skill Stack explainer that introduces one core idea with 4 scenes
• Social-friendly demo showing a technical workflow with staggered list animations
• Product highlight video with typewriter prompt, animated selection, and CTA
• Batch rendering the same content in three aspect ratios for multi-platform distribution