Remotion Video Generator

# Examples - chuk-motion Complete examples showcasing all components organized by category. ## 🎯 Component Showcases (NEW!) **Each category has a dedicated showcase demonstrating all components of that type.** ### 📊 Charts Showcase **All 6 chart components with various data visualizations** ```bash python examples/charts_showcase.py ``` **Includes:** - PieChart - Market share & proportions - LineChart - Revenue trends over time - AreaChart - Cumulative user growth - DonutChart - Team allocation breakdown - BarChart - Quarterly sales comparison - HorizontalBarChart - Feature adoption ranking Perfect for: Data presentations, analytics videos, business reports --- ### 🎬 Overlays Showcase **All 6 overlay components with different styles and positions** ```bash python examples/overlays_showcase.py ``` **Includes:** - TitleScene (Bold, Glass, Minimal variants) - TextOverlay - Floating text positioning - LowerThird - Name tags (left & right positions) - SubscribeButton - Animated call-to-action - EndScreen - Professional video outro Perfect for: YouTube videos, interviews, educational content --- ### 💻 Code Showcase **All 3 code display components with multiple languages** ```bash python examples/code_showcase.py ``` **Includes:** - CodeBlock - Static code display (Python, JavaScript, TypeScript) - TypingCode - Animated typing effect - CodeDiff - Git-style diffs and refactoring Perfect for: Tech tutorials, coding demos, documentation videos --- ### 📦 Content Showcase **All 4 content components with various use cases** ```bash python examples/content_showcase.py ``` **Includes:** - DemoBox - Quick placeholders (primary & accent colors) - WebPage - Raw HTML content display - StylizedWebPage - Pre-styled layouts (light & dark themes) - VideoContent - Video playback (shown as placeholder) Perfect for: Website demos, app showcases, prototyping --- ### 🖼️ Frames Showcase **All 3 frame components with various browser/device types** ```bash python examples/frames_showcase.py ``` **Includes:** - BrowserFrame (Chrome, Arc, Safari, Firefox) - DeviceFrame (iPhone, iPad, Android) - Terminal (bash, zsh, various themes) Perfect for: Product demos, app tutorials, development videos --- ### ✨ Animations Showcase **All 3 animation components with different effects** ```bash python examples/animations_showcase.py ``` **Includes:** - Counter - Number counting (revenue, percentages, metrics) - LayoutEntrance - Fade, slide, zoom entrances - PanelCascade - Sequential panel reveals Perfect for: Engaging intros, data reveals, sequential storytelling --- ### 🔄 Transitions Showcase **All 2 transition components with various effects** ```bash python examples/transitions_showcase.py ``` **Includes:** - LayoutTransition - Fade, slide (left/right), zoom - PixelTransition - Dissolve, wipe effects Perfect for: Scene changes, smooth visual flow, creative effects --- ### 📐 Layouts Showcase **All 18+ layout components demonstrated** ```bash python examples/layouts_showcase.py ``` **Includes:** - Container, Grid, ThreeColumnLayout, ThreeRowLayout - SplitScreen, Mosaic, Timeline, Vertical - AsymmetricLayout, BeforeAfterSlider, DialogueFrame - FocusStrip, HUDStyle, OverTheShoulder - PerformanceMultiCam, PiP, StackedReaction - ThreeByThreeGrid Perfect for: Complex compositions, multi-panel layouts, creative arrangements --- ## 🎨 Design System Examples ### **design_system_showcase.py** ✨ **Comprehensive 90-second showcase of the entire design system** ```bash python examples/design-system/design_system_showcase.py ``` Features: - All 7 YouTube-optimized themes - Typography scales and hierarchy - Charts, code components, overlays - Complete design token demonstration Perfect for: Understanding capabilities, client presentations --- ### **safe_margins_demo.py** 📱 **60-second demo of platform-specific safe margins** ```bash python examples/design-system/safe_margins_demo.py ``` Covers LinkedIn, Instagram, TikTok, YouTube, and mobile formats. Perfect for: Multi-platform content, preventing cropping --- ### **explore_design_system.py** **Interactive exploration of design tokens and components** ```bash python examples/design-system/explore_design_system.py ``` Perfect for: Learning the design system, discovering components --- ## 📚 Additional Examples ### Complete Compositions #### **ultimate_product_launch.py** Complete product launch video with all components ```bash python examples/complete/ultimate_product_launch.py ``` --- #### **multi_track_showcase.py** Multi-track composition examples ```bash python examples/complete/multi_track_showcase.py ``` --- ### Basics #### **fibonacci_demo.py** Typing code effect demonstration ```bash python examples/basics/fibonacci_demo.py ``` --- #### **code_display.py** Code syntax highlighting examples ```bash python examples/basics/code_display.py ``` --- ## 🎯 Component Categories Summary | Category | Count | Components | |----------|-------|------------| | **Charts** | 6 | PieChart, LineChart, AreaChart, DonutChart, BarChart, HorizontalBarChart | | **Overlays** | 6 | TitleScene, TextOverlay, EndScreen, LowerThird, SubscribeButton | | **Code** | 3 | CodeBlock, TypingCode, CodeDiff | | **Content** | 4 | VideoContent, StylizedWebPage, WebPage, DemoBox | | **Frames** | 3 | BrowserFrame, DeviceFrame, Terminal | | **Animations** | 3 | Counter, LayoutEntrance, PanelCascade | | **Transitions** | 2 | LayoutTransition, PixelTransition | | **Layouts** | 18+ | Grid, SplitScreen, Mosaic, Timeline, and many more | **Total: 45+ Professional Components** --- ## 🚀 Quick Start 1. **Install dependencies:** ```bash pip install -e . ``` 2. **Run any showcase:** ```bash python examples/charts_showcase.py ``` 3. **Navigate to generated project:** ```bash cd remotion-projects/charts_showcase npm install npm start ``` 4. **Render video:** ```bash npm run build ``` --- ## 📖 Example Output Each showcase generates: - ✅ Complete Remotion project - ✅ TypeScript components with design tokens - ✅ Package.json with dependencies - ✅ Ready-to-render video composition Example structure: ``` remotion-projects/ charts_showcase/ ├── src/ │ ├── components/ # Generated components │ ├── VideoComposition.tsx │ └── Root.tsx ├── package.json └── remotion.config.ts ``` --- ## 💡 Tips ### **For Learning:** Start with category showcases (charts, overlays, etc.) to understand each component type. ### **For Quick Reference:** Each showcase is organized by component category for easy navigation. ### **For Client Demos:** Use `design_system_showcase.py` to show off complete capabilities. ### **For Social Media:** Check `safe_margins_demo.py` to understand platform cropping. ### **For Production:** Study `ultimate_product_launch.py` for complex multi-track compositions. --- ## 🎨 Design System Features All examples leverage the complete design system: ### **Foundations** | Category | What's Included | |----------|----------------| | **Colors** | 7 theme palettes with primary, accent, gradients, semantic colors | | **Typography** | Font families (display, body, mono), sizes for 720p/1080p/4K, weights | | **Motion** | 5 spring configs, 8 easing curves, 8 duration presets, animation templates | | **Spacing** | Scale (xxs→5xl), safe margins (7 platforms), border radius | ### **Platform Safe Margins** Built-in safe zones for: - 📱 LinkedIn Feed (8-24px safe zones) - 📸 Instagram Stories & Square (9:16 with UI overlays) - 🎵 TikTok (side button considerations) - 📺 YouTube (standard margins) - 📱 Mobile Vertical/Horizontal ### **Themes** (7 Total) 1. **Tech** - Modern tech aesthetic (blue gradient) 2. **Finance** - Professional business (green/gold) 3. **Education** - Friendly learning (purple/orange) 4. **Lifestyle** - Warm wellness (pink/amber) 5. **Gaming** - Energetic gaming (neon purple/cyan) 6. **Minimal** - Clean modern (gray scale) 7. **Business** - Corporate professional (navy/teal) --- ## 🎯 Next Steps 1. **Explore by Category** - Run showcases for components you need 2. **Learn** - Check out `design_system_showcase.py` 3. **Create** - Build your own using the composition builder 4. **Customize** - Modify themes and tokens for your brand --- ## 📝 Documentation - [Main README](../README.md) - [Component Builder Guide](../COMPONENT_BUILDER_GUIDE.md) - Design system documentation (coming soon) --- **Made with ❤️ using chuk-motion**