Video Automation - The Full Remotion Suite

This skill combines the remotion-best-practices skill with the Antigravity design system, enabling production-grade video ads.

📚 Required Reading

For detailed technical implementation, refer to the remotion-best-practices skill which contains 16 comprehensive rule files:

1. Antigravity Core Aesthetics (The Look)

Apply these design tokens to all Remotion components:

const ANTIGRAVITY_TOKENS = {
  background: '#0a0a0c',
  primary: '#00f2ff',    // Neon Cyan
  secondary: '#ff00e5',  // Neon Pink
  glass: 'rgba(255, 255, 255, 0.05)',
  fonts: ['Inter', 'Be Vietnam Pro'],
};

Key styling patterns:

• Glassmorphism: backdropFilter: 'blur(20px)' with neon borders
• Staggered Motion: Map array indices to delays (i * 10)
• Micro-animations: Use Math.sin(frame/10) for pulsing effects

2. Usage Patterns

High-Fidelity Landing Page Cloning

1. Research: Use browser_subagent to extract brand colors, images, headlines
2. Implementation: Use interpolate, spring, Sequence to animate sections
3. Aspect Ratios: Always offer 16:9 (YouTube) and 9:16 (TikTok/Reels)

TikTok-Style Captions

// Refer to display-captions.md in remotion-best-practices
import { createTikTokStyleCaptions } from '@remotion/captions';

3. Quick Commands

For non-tech users, just 3 commands:

4. Troubleshooting

FFmpeg Installation (macOS)

brew install ffmpeg

Headless Chrome Error

npx remotion render <id> --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Credits

• Technical Rules: Based on remotion-dev/skills
• Design System: Antigravity Marketing Kit aesthetics