nguyenphp 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:
| Core Rules | Description |
|---|---|
animations.md |
Frame-based animations with useCurrentFrame() |
timing.md |
Springs, easing, interpolation curves |
sequencing.md |
<Sequence> and <Series> patterns |
transitions.md |
Scene transitions with @remotion/transitions |
audio.md |
Audio import, trimming, volume control |
videos.md |
Video embedding, looping, speed control |
display-captions.md |
TikTok-style captions with word highlighting |
charts.md |
Animated bar/pie charts |
3d.md |
Three.js integration with @remotion/three |
fonts.md |
Google Fonts & Vietnamese font support |
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
- Research: Use
browser_subagentto extract brand colors, images, headlines - Implementation: Use
interpolate,spring,Sequenceto animate sections - 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:
| Command | Purpose |
|---|---|
npx remotion preview |
Preview in browser |
npx remotion render <id> out.mp4 |
Export final video |
--port=300x |
Run multiple previews |
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