Skill: Remotion Layout Design

Category: Video

Version: 1.0.0

Design visual layouts and component structures for Remotion videos.

Overview

Focus on "Video as Code." Layouts must be responsive to different aspect ratios (9:16, 16:9, 1:1) and dynamic content lengths.

Frameworks

1. Atomic Video Components

• The Wrapper: Global sequence and transition logic.
• The Core: The main visual element (chart, text, image).
• The Overlay: Dynamic badges, progress bars, and watermarks.

2. The Visual Hierarchy of Motion

• Primary: The moving dynamic variable (the hook).
• Secondary: Supporting background animations.
• Tertiary: Subtle ambient motion (noise, glow).

3. Responsive Framing

• Use useVideoConfig() for dynamic spacing.
• Implement flexbox/grid systems within the <AbsoluteFill>.
• account for "Safe Zones" on social platforms (TikTok/Reels UI).

Checklist

• Are all fonts specified with fallback weights?
• Is the color palette dynamic (primary/secondary/accent props)?
• Are easing functions specified (e.g., bezier(0.33, 1, 0.68, 1))?
• Is there a clear entrance and exit animation for every component?

Output Structure

1. Component Architecture: Description of the component tree.
2. Animation Specs: Timings, easings, and spring configurations.
3. React/Remotion Code Snippets: Essential code for implementation.