Fixed Video Format (9:16)

Fixed Video Format (9:16)

This Skill provides Claude Code with specific guidance on how it should handle the fixed 9:16 video format.

When to use this skill:

• Positioning elements in any video composition
• Calculating element dimensions and coordinates
• Using VIDEO_CONFIG.width and VIDEO_CONFIG.height
• Defining safe zones for platform UI overlays
• Creating layouts optimized for vertical viewing
• Testing compositions in Remotion Studio preview

Instructions

• Fixed Dimensions: All videos render at exactly 1080x1920 pixels (9:16 portrait); no responsive design needed
• VIDEO_CONFIG Constants: Use VIDEO_CONFIG from src/lib/theme.ts for width/height values
• Percentage-Based Layout: Position elements using percentages of VIDEO_CONFIG dimensions for maintainability
• TikTok Optimization: Format optimized for TikTok/Instagram Reels vertical viewing
• Safe Zones: Keep important content within central 90% to account for platform UI overlays
• Consistent Aspect Ratio: All compositions must maintain 9:16 aspect ratio; test in Remotion Studio preview

Examples:

// Good: Use VIDEO_CONFIG, percentage-based positioning
import { VIDEO_CONFIG } from '@/lib/theme';

export const BookCover: React.FC = () => (
  <img
    src={coverUrl}
    style={{
      position: 'absolute',
      top: VIDEO_CONFIG.height * 0.15, // 15% from top
      left: VIDEO_CONFIG.width * 0.1,  // 10% from left
      width: VIDEO_CONFIG.width * 0.8,  // 80% width
      height: VIDEO_CONFIG.width * 0.8 * 1.5, // Maintain book aspect ratio
    }}
  />
);

// Bad: Hardcoded pixels, no VIDEO_CONFIG reference
<img
  style={{
    position: 'absolute',
    top: 300,
    left: 100,
    width: 800,
  }}
/>