Remotion Video Generator

# Layout Components - COMPLETE ✅ ## All 17 Layouts Successfully Migrated! All layout components have been migrated to the new modular structure with full token support. ## Complete Layout List (17 total) ### Core Layouts (7) 1. ✅ **Container** - Basic wrapper/frame 2. ✅ **Grid** - Multi-layout grid system (1x2, 2x1, 2x2, 3x2, 2x3, 3x3, 4x2, 2x4) 3. ✅ **SplitScreen** - Two-pane split 4. ✅ **ThreeByThreeGrid** - Perfect 3x3 grid (9 cells) 5. ✅ **ThreeColumnLayout** - Sidebar + Main + Sidebar with configurable widths 6. ✅ **ThreeRowLayout** - Header + Main + Footer with configurable heights 7. ✅ **AsymmetricLayout** - Main feed (2/3) + two demo panels (1/3 stacked) ### Specialized Layouts (10) 8. ✅ **OverTheShoulder** - Looking over someone's shoulder perspective 9. ✅ **DialogueFrame** - For conversation/dialogue scenes 10. ✅ **StackedReaction** - Reaction video style with stacked feeds 11. ✅ **HUDStyle** - Heads-up display style with overlay elements 12. ✅ **PerformanceMultiCam** - Multi-camera performance view 13. ✅ **FocusStrip** - Focused strip/banner layout 14. ✅ **PiP** - Picture-in-Picture with positions (bottom-right, bottom-left, top-right, top-left) 15. ✅ **Vertical** - 9:16 optimized for Shorts/TikTok/Reels 16. ✅ **Timeline** - Progress/timeline overlay with milestones 17. ✅ **Mosaic** - Irregular collage with layered clips ## What Each Layout Includes Every layout has been created with: - ✅ `schema.py` - Pydantic models for type safety - ✅ `builder.py` - Composition builder method - ✅ `tool.py` - MCP tool registration for AI agents - ✅ `template.tsx.j2` - React/Remotion component with design tokens - ✅ `__init__.py` - Proper exports ## Key Features All layouts now support: - ✅ **Design Token System** - Using `[[ spacing.spacing.xl ]]` syntax - ✅ **Pydantic Validation** - Type-safe props - ✅ **MCP Tools** - AI agent integration via `remotion_add_{layout_name}` - ✅ **Standard Props** - gap, padding, border_width, start_time, duration - ✅ **Proper Exports** - All layouts exported from `layouts/__init__.py` - ✅ **Track System** - Integrated with timeline/track system ## MCP Tools Available All layouts can be added via MCP tools: ``` remotion_add_container remotion_add_grid remotion_add_split_screen remotion_add_three_by_three_grid remotion_add_three_column_layout remotion_add_three_row_layout remotion_add_asymmetric_layout remotion_add_over_the_shoulder remotion_add_dialogue_frame remotion_add_stacked_reaction remotion_add_hud_style remotion_add_performance_multi_cam remotion_add_focus_strip remotion_add_pip remotion_add_vertical remotion_add_timeline remotion_add_mosaic ``` ## Token Usage Examples All templates use design tokens: ```typescript // Spacing tokens padding = parseInt('[[ spacing.spacing.xl ]]') // 32px gap = parseInt('[[ spacing.spacing.md ]]') // 16px // Border radius tokens border_radius = parseInt('[[ spacing.border_radius.md ]]') // 8px ``` ## Directory Structure ``` src/chuk_motion/components/layouts/ ├── AsymmetricLayout/ │ ├── __init__.py │ ├── builder.py │ ├── schema.py │ ├── template.tsx.j2 │ └── tool.py ├── Container/ ├── DialogueFrame/ ├── FocusStrip/ ├── Grid/ ├── HUDStyle/ ├── Mosaic/ ├── OverTheShoulder/ ├── PerformanceMultiCam/ ├── PiP/ ├── SplitScreen/ ├── StackedReaction/ ├── ThreeByThreeGrid/ ├── ThreeColumnLayout/ ├── ThreeRowLayout/ ├── Timeline/ ├── Vertical/ └── __init__.py (exports all layouts) ``` ## Layout Categories & Use Cases ### Video Production Layouts - **Vertical** - YouTube Shorts, TikTok, Instagram Reels - **PiP** - Tutorial videos with presenter - **OverTheShoulder** - Screen recording tutorials - **StackedReaction** - Reaction videos ### Content Presentation - **Grid** - Portfolio showcases, feature grids - **ThreeByThreeGrid** - Instagram-style displays - **AsymmetricLayout** - Tutorial content with side panels - **FocusStrip** - Caption overlays, key messages ### Professional/Technical - **ThreeColumnLayout** - Dashboard layouts - **ThreeRowLayout** - App interfaces with headers/footers - **DialogueFrame** - Interview videos, podcasts - **Timeline** - Progress tracking, educational content ### Gaming/Entertainment - **HUDStyle** - Gaming overlays, sports graphics - **PerformanceMultiCam** - Live performances, concerts - **Mosaic** - Creative collages, montages ## Next Steps 1. ✅ All layouts created 2. ✅ All layouts exported 3. ✅ Token system integrated 4. ✅ MCP tools registered 5. 🔄 Test layouts in actual compositions 6. 🔄 Create example videos showcasing each layout 7. 🔄 Update documentation with layout examples ## Testing To test a layout: ```python from chuk_motion.generator.composition_builder import CompositionBuilder builder = CompositionBuilder(fps=30) builder.add_vertical( top={"type": "Text", "text": "Content"}, bottom={"type": "Text", "text": "Caption"}, layout_style="content-caption", start_time=0, duration=5 ) ``` ## Success! 🎉 All 17 layouts have been successfully migrated to the new modular structure. The layout system is now: - Type-safe with Pydantic - Token-driven for consistent design - AI-agent ready with MCP tools - Fully integrated with the track system You now have a complete, professional-grade layout system for your Remotion video generation!