alexwelcing 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
- Component Architecture: Description of the component tree.
- Animation Specs: Timings, easings, and spring configurations.
- React/Remotion Code Snippets: Essential code for implementation.