From 5223eec21c4b230fd2be5d86f194f8d41701c48e Mon Sep 17 00:00:00 2001 From: calesthio Date: Mon, 30 Mar 2026 13:23:28 -0700 Subject: [PATCH] Zero-key video formula: fix rendering bugs, add 8 demo compositions, update skills Fix ComparisonCard and CalloutBox dark-theme passthrough in SceneRenderer. Add 8 demo-props JSON files (3 fixed originals + 5 new compositions). Update scene-director and compose-director skills with all 10 Remotion scene types and zero-key rendering guidance. Document the proven all-dark-background formula in remotion.md. Add cinematic renderer, onboarding skill, prompt gallery, and demo render script. --- .gitignore | 4 +- AGENT_GUIDE.md | 10 + Makefile | 11 +- PROMPT_GALLERY.md | 165 +++++++ README.md | 410 ++++++++++-------- .../public/demo-props/ai-revolution.json | 285 ++++++++++++ .../public/demo-props/climate-dashboard.json | 256 +++++++++++ .../public/demo-props/code-to-screen.json | 328 ++++++++++++++ .../public/demo-props/ecotrack-pitch.json | 225 ++++++++++ .../public/demo-props/focusflow-pitch.json | 192 ++++++++ .../public/demo-props/sleep-science.json | 200 +++++++++ .../public/demo-props/space-exploration.json | 249 +++++++++++ .../public/demo-props/world-in-numbers.json | 303 +++++++++++++ remotion-composer/src/CinematicRenderer.tsx | 93 +++- remotion-composer/src/Explainer.tsx | 174 +++++++- remotion-composer/src/Root.tsx | 11 + remotion-composer/src/cinematic/fixtures.ts | 83 ++++ remotion-composer/src/cinematic/types.ts | 12 + render-demo.sh | 120 +++++ skills/INDEX.md | 1 + skills/core/remotion.md | 62 ++- skills/meta/onboarding.md | 156 +++++++ .../pipelines/explainer/compose-director.md | 7 + skills/pipelines/explainer/scene-director.md | 36 +- 24 files changed, 3189 insertions(+), 204 deletions(-) create mode 100644 PROMPT_GALLERY.md create mode 100644 remotion-composer/public/demo-props/ai-revolution.json create mode 100644 remotion-composer/public/demo-props/climate-dashboard.json create mode 100644 remotion-composer/public/demo-props/code-to-screen.json create mode 100644 remotion-composer/public/demo-props/ecotrack-pitch.json create mode 100644 remotion-composer/public/demo-props/focusflow-pitch.json create mode 100644 remotion-composer/public/demo-props/sleep-science.json create mode 100644 remotion-composer/public/demo-props/space-exploration.json create mode 100644 remotion-composer/public/demo-props/world-in-numbers.json create mode 100644 remotion-composer/src/cinematic/fixtures.ts create mode 100644 render-demo.sh create mode 100644 skills/meta/onboarding.md diff --git a/.gitignore b/.gitignore index cbe25aa..a2c52a1 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,6 @@ node_modules/ # Remotion build output and copied project assets (regenerable at render time) remotion-composer/out/ -remotion-composer/public/ +remotion-composer/public/* +# But keep demo props (shipped with the project for zero-key demos) +!remotion-composer/public/demo-props/ diff --git a/AGENT_GUIDE.md b/AGENT_GUIDE.md index 7bc8868..9a34281 100644 --- a/AGENT_GUIDE.md +++ b/AGENT_GUIDE.md @@ -4,6 +4,16 @@ Start here. This is the complete operating guide and agent contract for OpenMont For architecture, key files, and conventions see [`PROJECT_CONTEXT.md`](PROJECT_CONTEXT.md). +## First Interaction — Onboarding + +When the user's first message is vague, exploratory, or asks what you can do ("make me a video", "what can you do?", "help me create something", "I want to make content"), read the onboarding skill **before** doing anything else: + +**Read:** `skills/meta/onboarding.md` + +This skill teaches you to run discovery, classify the user's setup, present capabilities in plain language, and offer starter prompts tailored to their available tools. The goal: get the user from "curious" to "making a video" in under 60 seconds. + +**Skip onboarding** when the user arrives with a specific, actionable request (e.g., "Make a 60-second explainer about black holes"). Go directly to Rule Zero. + ## Rule Zero — All Production Goes Through a Pipeline **Every video production request MUST go through the pipeline system. No exceptions.** diff --git a/Makefile b/Makefile index a68be27..4e4f53c 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -.PHONY: setup install install-dev install-gpu test test-contracts lint clean preflight +.PHONY: setup install install-dev install-gpu test test-contracts lint clean preflight demo # ---- One-command setup ---- @@ -48,6 +48,15 @@ test-contracts: preflight: python -c "from tools.tool_registry import registry; import json; registry.discover(); print(json.dumps(registry.provider_menu(), indent=2))" +demo: + @echo "==> Rendering zero-key demo videos (no API keys needed)..." + @echo " These use only Remotion components — animated charts, text, data viz." + @echo "" + ./render-demo.sh + +demo-list: + @./render-demo.sh --list + lint: python -m py_compile tools/base_tool.py python -m py_compile tools/tool_registry.py diff --git a/PROMPT_GALLERY.md b/PROMPT_GALLERY.md new file mode 100644 index 0000000..136631a --- /dev/null +++ b/PROMPT_GALLERY.md @@ -0,0 +1,165 @@ +# Prompt Gallery + +Tested prompts that produce impressive videos. Copy any prompt into your AI coding assistant after running `make setup`. + +## Zero-Key Demos (instant, no API keys) + +These render pre-built compositions using only Remotion components — animated charts, typography, data visualization. No external services, no cost, no waiting. + +```bash +make demo # Render all three demos +./render-demo.sh world-in-numbers # Render one specific demo +./render-demo.sh --list # See all available demos +``` + +| Demo | Duration | What It Shows | +|------|----------|--------------| +| **world-in-numbers** | 45s | KPI grids, bar charts, pie charts, line charts, comparison cards, stat reveals | +| **code-to-screen** | 50s | Developer education: HTTP request lifecycle with progress bars, charts, callouts | +| **focusflow-pitch** | 40s | Startup pitch deck: traction metrics, revenue donut chart, customer testimonial | + +--- + +## Zero-Key Prompts (free, works out of the box) + +These use the full agent pipeline — research, scripting, asset generation, composition — using only free tools (Piper TTS, stock media, Remotion). + +### Data Explainer + +> "Make a 45-second animated explainer about why the sky is blue. Use data visualization and animated text — no images needed, just charts, stat cards, and typography." + +**What you get:** Research-grounded script, Piper narration, Remotion-animated scenes with text cards, stat reveals, and callout boxes. Subtitles included. + +**Estimated time:** 5-10 minutes | **Cost:** $0 + +### Quick Fact Video + +> "Create a 60-second data-driven video about coffee consumption around the world. Include bar charts comparing countries and a pie chart of coffee types." + +**What you get:** Animated data visualization with charts, comparison cards, and narrated facts. All data sourced from the research stage. + +**Estimated time:** 8-12 minutes | **Cost:** $0 + +### History Explainer + +> "Make a short explainer about how the internet works, with narration and animated captions. Keep it under 60 seconds." + +**What you get:** Structured explainer with section titles, text cards, stat reveals, and TikTok-style word-by-word captions synced to narration. + +**Estimated time:** 8-12 minutes | **Cost:** $0 + +### Developer Education + +> "Create a 90-second animated explainer about how Git rebase works. Use animated diagrams and comparison cards to show rebase vs merge. Target audience: junior developers." + +**What you get:** Technical explainer with comparison cards (rebase vs merge), callout tips, step-by-step animated text, and developer-friendly narration. + +**Estimated time:** 10-15 minutes | **Cost:** $0 + +--- + +## One-Key Prompts (FAL_KEY only, ~$0.50-$1.50) + +Adding `FAL_KEY` to your `.env` unlocks FLUX image generation. These prompts combine AI-generated visuals with Remotion animation. + +### Science Explainer + +> "Create an animated explainer about how CRISPR gene editing works, with AI-generated visuals of DNA and cell diagrams. Make it 90 seconds, educational but exciting." + +**What you get:** Research-backed script, FLUX-generated images with Ken Burns animation, spring-animated transitions, narration, subtitles, and music. + +**Estimated time:** 15-20 minutes | **Cost:** ~$0.80 + +### Product Teaser + +> "Make a product launch teaser for a fictional smart water bottle called AquaPulse. 45 seconds, modern and minimal, with AI-generated product shots." + +**What you get:** Cinematic product teaser with FLUX-generated visuals, stat reveals (hydration data), comparison cards, and a punchy closing. + +**Estimated time:** 12-18 minutes | **Cost:** ~$0.60 + +### Marketing Explainer + +> "Build a 90-second explainer about the psychology of color in marketing. Use AI-generated images showing color associations and include data about color impact on purchasing decisions." + +**What you get:** Research-grounded explainer with AI-generated color psychology illustrations, bar charts, pie charts, and narrated insights. + +**Estimated time:** 15-20 minutes | **Cost:** ~$1.00 + +--- + +## Full Setup Prompts (~$1-$3) + +With video generation (Veo, Kling, Runway) + premium TTS (ElevenLabs) + music (Suno). These produce broadcast-quality content. + +### Cinematic Trailer + +> "Create a cinematic 30-second trailer for a sci-fi concept: humanity receives a warning from 1000 years in the future. Use motion video clips, a cinematic soundtrack, and dramatic title cards." + +**What you get:** Veo/Kling-generated motion clips, cinematic title cards with signal texture effects, Hans Zimmer-style soundtrack, and dramatic pacing. + +**Estimated time:** 25-40 minutes | **Cost:** ~$2.50 + +### Animated Explainer (Premium) + +> "Make a 90-second animated explainer about quantum computing for middle school students. Use a fun narrator voice, custom soundtrack, and AI-generated visuals of qubits and quantum gates." + +**What you get:** Full production: ElevenLabs narration, FLUX visuals, Suno soundtrack, Remotion composition with animated charts and text overlays. + +**Estimated time:** 20-30 minutes | **Cost:** ~$2.00 + +### Avatar Spokesperson + +> "Create a 60-second avatar spokesperson video announcing a company rebrand. Professional tone, clean background, with animated text overlays showing the new brand values." + +**What you get:** HeyGen avatar video with TTS narration, overlaid section titles, stat reveals, and branded text cards. + +**Estimated time:** 15-25 minutes | **Cost:** ~$1.50 + +--- + +## For Specific Audiences + +### For Teachers + +> "Create a 3-minute animated explainer about photosynthesis for 8th graders. Make it fun and visual — use diagrams, charts showing energy conversion, and a friendly narrator voice." + +### For Developer Advocates + +> "Make a 60-second product demo video for our new REST API. Show the request/response flow with animated diagrams, include latency benchmarks as bar charts, and end with a quick start code snippet." + +### For Indie Hackers + +> "Create a 30-second Product Hunt launch video for my SaaS tool that helps teams track OKRs. Show 3 key features with animated stat cards and comparison views. Upbeat, modern." + +### For Content Creators + +> "Take my recent blog post about AI trends in 2026 and turn it into a 90-second video. Research current data to ground it, use animated charts for the statistics, and add a conversational narrator." + +--- + +## Tips for Better Results + +**Be specific about visual components.** Instead of "make it look good," say "use bar charts for the comparison, a donut chart for the breakdown, and stat cards for the key numbers." + +**Mention your target audience.** "For junior developers" or "for 8th graders" dramatically changes the script, pacing, and visual style. + +**Specify duration.** The agent optimizes content density based on your target length. 45 seconds needs ~110 words of narration; 90 seconds needs ~225 words. + +**Request specific chart types.** The system has bar charts, line charts, pie/donut charts, KPI grids, progress bars, comparison cards, and callout boxes. Name the ones you want. + +**Ask for the zero-key path.** If you want free results, say "use only free tools" or "no paid APIs." The agent will route to Piper TTS, stock media, and Remotion-only compositions. + +--- + +## Contributing Prompts + +Found a prompt that produces great results? Share it: + +1. Open a [GitHub Discussion](../../discussions) in the "Prompt Exchange" category +2. Include: your prompt, a screenshot or description of the output, cost, and which providers you used +3. The best prompts get added to this gallery with credit + +--- + +*This gallery is community-maintained. All prompts have been tested and produce complete videos.* diff --git a/README.md b/README.md index 7b0c28d..90b7ba5 100644 --- a/README.md +++ b/README.md @@ -6,122 +6,143 @@

The first open-source, agentic video production system.

-OpenMontage turns your AI coding assistant into a full video production studio. Tell it what you want — a 60-second explainer, a cinematic brand teaser, a batch of TikTok clips from your podcast — and your agent handles the entire pipeline: research, scripting, asset generation, editing, and final composition. +

+ Quick Start  ·  + Try These Prompts  ·  + Pipelines  ·  + How It Works  ·  + Providers  ·  + Agent Guide +

-No video editing experience required. No complex UI to learn. Just describe your vision in plain language. +

+ License +

-Works with **Claude Code, Cursor, Copilot, Windsurf, Codex** — any AI coding assistant that can read files and run code. +--- + +Turn your AI coding assistant into a full video production studio. Describe what you want in plain language — your agent handles research, scripting, asset generation, editing, and final composition.
-> **"SIGNAL FROM TOMORROW"** — a cinematic sci-fi trailer produced through OpenMontage's staged pipeline: concept, script, scene plan, Veo-generated motion clips, approvals, soundtrack, and final Remotion composition. +> **"SIGNAL FROM TOMORROW"** — a cinematic sci-fi trailer fully produced through OpenMontage: concept, script, scene plan, Veo-generated motion clips, soundtrack, and Remotion composition. + +Works with **Claude Code, Cursor, Copilot, Windsurf, Codex** — any AI coding assistant that can read files and run code. + +--- + +## Quick Start + +### Prerequisites + +- **Python 3.10+** — [python.org](https://www.python.org/downloads/) +- **FFmpeg** — `brew install ffmpeg` / `sudo apt install ffmpeg` / [ffmpeg.org](https://ffmpeg.org/download.html) +- **Node.js 18+** — [nodejs.org](https://nodejs.org/) +- **An AI coding assistant** — Claude Code, Cursor, Copilot, Windsurf, or Codex + +### Install & Run + +```bash +git clone https://github.com/calesthio/OpenMontage.git +cd OpenMontage +make setup +``` + +Open the project in your AI coding assistant and tell it what you want: + +``` +"Make a 60-second animated explainer about how neural networks learn" +``` + +That's it. The agent discovers your available tools, researches the topic, presents you with concept options and cost estimates, then produces the video stage by stage — asking for your approval at every creative decision. + +> **No `make`?** Run manually: `pip install -r requirements.txt && cd remotion-composer && npm install && cd .. && pip install piper-tts && cp .env.example .env` > -> OpenMontage turns agent orchestration into a real production workflow — with provider locking, checkpointed creative stages, sample-before-batch generation, and a finished video as the output. +> **Windows:** If `npm install` fails with `ERR_INVALID_ARG_TYPE`, use `npx --yes npm install` instead. + +### Add API Keys (optional — more keys = more tools) + +```bash +# .env — every key is optional, add what you have + +# Best bang for buck — one key unlocks 5 tools: +FAL_KEY=your-key # FLUX images + Google Veo, Kling, MiniMax video + Recraft images + +# Free stock media: +PEXELS_API_KEY=your-key # Free — stock footage and images +PIXABAY_API_KEY=your-key # Free — stock footage and images + +# Music: +SUNO_API_KEY=your-key # Full songs, instrumentals, any genre + +# Voice & images: +ELEVENLABS_API_KEY=your-key # Premium TTS, AI music, sound effects +OPENAI_API_KEY=your-key # OpenAI TTS, DALL-E 3 images +GOOGLE_API_KEY=your-key # Google Imagen images, Google TTS (700+ voices) + +# More video providers: +HEYGEN_API_KEY=your-key # HeyGen — VEO, Sora, Runway, Kling via single gateway +RUNWAY_API_KEY=your-key # Runway Gen-4 direct +``` + +
+Have a GPU? Unlock free local video generation + +```bash +make install-gpu + +# Then add to .env: +VIDEO_GEN_LOCAL_ENABLED=true +VIDEO_GEN_LOCAL_MODEL=wan2.1-1.3b # or wan2.1-14b, hunyuan-1.5, ltx2-local, cogvideo-5b +``` + +
--- -## Why OpenMontage? +## What You Get With Zero API Keys -Most AI video tools give you a single clip from a prompt. OpenMontage gives you an **end-to-end production pipeline** — the same structured process a real production team follows, automated by your AI agent. +You don't need any API keys to make real videos. Out of the box, `make setup` gives you: -Edit your own talking-head footage. Generate a fully animated explainer from scratch. Cut a 2-hour podcast into a dozen social clips. Translate and dub your content into 10 languages. Build a cinematic brand teaser from stock footage and AI-generated scenes. **If a production team can make it, OpenMontage can orchestrate it.** +| Capability | Free Tool | What It Does | +|-----------|-----------|-------------| +| **Narration** | Piper TTS | Free offline text-to-speech — real human-sounding narration | +| **Visuals** | Pexels + Pixabay | Free stock images and footage (API keys are free to get) | +| **Composition** | Remotion | Turns still images into animated video with spring physics, transitions, typography, and TikTok-style captions | +| **Post-production** | FFmpeg | Encoding, subtitle burn-in, audio mixing, color grading | +| **Subtitles** | Built-in | Auto-generated captions with word-level timing | -- **11 production pipelines** — explainers, talking heads, screen demos, cinematic trailers, animations, podcasts, localization, and more -- **49 production tools** — spanning video generation, image creation, text-to-speech, music, audio mixing, subtitles, enhancement, and analysis -- **400+ agent skills** — production skills, pipeline directors, creative techniques, quality checklists, and deep technology knowledge packs that teach the agent how to use every tool like an expert -- **Live web research built in** — before writing a single word of script, the agent runs 15-25+ web searches across YouTube, Reddit, news sites, and academic sources to ground your video in real, current data -- **Both free/local AND cloud providers** — every capability supports open-source local alternatives alongside premium APIs. Use what you have. -- **No vendor lock-in** — swap providers freely. The selector pattern auto-routes to whatever's available on your machine. -- **Budget governance built in** — cost estimation before execution, spend caps, per-action approval thresholds. No surprise bills. +**The zero-key path:** Piper narrates your script, stock images provide the visuals, and Remotion animates everything into a polished video with transitions, text overlays, and synced captions. Add API keys later to unlock AI-generated images, video clips, premium voices, and music. --- -## Supported Providers +## Try These Prompts -> **Detailed setup instructions, pricing, and free tiers for every provider:** [`docs/PROVIDERS.md`](docs/PROVIDERS.md) +Copy any of these into your AI coding assistant after setup. Each one runs a full production pipeline. -### Video Generation (12 providers) -| Provider | Type | Notes | -|----------|------|-------| -| **Kling** | Cloud API | High quality, fast | -| **Runway Gen-4** | Cloud API | Cinematic quality | -| **Google Veo 3** | Cloud API | Long-form, cinematic. Via fal.ai or HeyGen. | -| **MiniMax** | Cloud API | Cost-effective | -| **HeyGen** | Cloud API | Multi-model gateway | -| **WAN 2.1** | Local GPU | Free, 1.3B and 14B variants | -| **Hunyuan** | Local GPU | Free, high quality | -| **CogVideo** | Local GPU | Free, 2B and 5B variants | -| **LTX-Video** | Local GPU / Modal | Free locally, or self-hosted cloud | -| **Pexels** | Stock | Free stock footage | -| **Pixabay** | Stock | Free stock footage | +### Zero keys needed -### Image Generation (8 providers) -| Provider | Type | Notes | -|----------|------|-------| -| **FLUX** | Cloud API | State-of-the-art quality | -| **Google Imagen** | Cloud API | Imagen 4 — high-quality, multiple aspect ratios | -| **DALL-E 3** | Cloud API | OpenAI's image model | -| **Recraft** | Cloud API | Design-focused generation | -| **Local Diffusion** | Local GPU | Stable Diffusion, free | -| **Pexels** | Stock | Free stock images | -| **Pixabay** | Stock | Free stock images | -| **ManimCE** | Local | Mathematical animations | +> "Make a 45-second animated explainer about why the sky is blue" -### Text-to-Speech (4 providers) -| Provider | Type | Notes | -|----------|------|-------| -| **ElevenLabs** | Cloud API | Premium voice quality | -| **Google TTS** | Cloud API | 700+ voices, 50+ languages — best for localization | -| **OpenAI TTS** | Cloud API | Fast, affordable | -| **Piper** | Local | Completely free, offline | +> "Create a 60-second video about the history of the internet, with narration and captions" -### Music & Sound -| Provider | Type | Notes | -|----------|------|-------| -| **Suno AI** | Cloud API | Full song generation with vocals, lyrics, any genre. Up to 8 minutes. | -| **ElevenLabs Music** | Cloud API | AI music generation | -| **ElevenLabs SFX** | Cloud API | Sound effect generation | +> "Make a data-driven explainer about coffee consumption around the world" -### Post-Production (always available, always free) -| Tool | What It Does | -|------|-------------| -| **FFmpeg** | Video composition, encoding, subtitle burn-in, audio muxing | -| **Video Stitch** | Multi-clip assembly, crossfades, picture-in-picture, spatial layouts | -| **Video Trimmer** | Precision cutting and extraction | -| **Audio Mixer** | Multi-track mixing, ducking, fades | -| **Audio Enhance** | Noise reduction, normalization | -| **Color Grade** | LUT-based color grading | -| **Subtitle Gen** | SRT/VTT generation from timestamps | +### With FAL_KEY (~$0.50–$1.50) -### Enhancement -| Tool | What It Does | -|------|-------------| -| **Upscale** | Real-ESRGAN image/video upscaling | -| **Background Remove** | rembg / U2Net background removal | -| **Face Enhance** | Face quality enhancement | -| **Face Restore** | CodeFormer / GFPGAN face restoration | +> "Create an animated explainer about how CRISPR gene editing works, using AI-generated visuals" -### Analysis -| Tool | What It Does | -|------|-------------| -| **Transcriber** | WhisperX speech-to-text with word-level timestamps | -| **Scene Detect** | Automatic scene boundary detection | -| **Frame Sampler** | Intelligent frame extraction | -| **Video Understand** | CLIP/BLIP-2 vision-language analysis | +> "Make a product launch teaser for a fictional smart water bottle called AquaPulse" -### Avatar & Lip Sync -| Tool | What It Does | -|------|-------------| -| **Talking Head** | SadTalker / MuseTalk avatar animation | -| **Lip Sync** | Wav2Lip audio-driven lip synchronization | +### Full setup (~$1–$3) -### Composition & Rendering -| Engine | Type | What It Does | -|--------|------|-------------| -| **Remotion** | Local (Node.js) | React-based programmatic video — spring-animated image scenes, stat reveals, section titles, hero cards, TikTok-style word-by-word captions, scene transitions (fade/slide/wipe/flip), Google Fonts, and audio with fade curves. **When no video generation providers are configured, the agent generates still images and Remotion turns them into fully animated video.** | -| **FFmpeg** | Local | Core video assembly, encoding, subtitle burn, audio muxing, color grading | +> "Create a cinematic 30-second trailer for a sci-fi concept: humanity receives a warning from 1000 years in the future" + +> "Make a 90-second animated explainer about quantum computing for middle school students, with a fun narrator voice and custom soundtrack" + +Want more? See the full **[Prompt Gallery](PROMPT_GALLERY.md)** for tested prompts with expected costs and output examples, or run `make demo` to render zero-key demo videos instantly. --- @@ -154,6 +175,22 @@ Each stage has a dedicated **director skill** — a markdown instruction file th --- +## Why OpenMontage? + +Most AI video tools give you a single clip from a prompt. OpenMontage gives you an **end-to-end production pipeline** — the same structured process a real production team follows, automated by your AI agent. + +Edit your own talking-head footage. Generate a fully animated explainer from scratch. Cut a 2-hour podcast into a dozen social clips. Translate and dub your content into 10 languages. Build a cinematic brand teaser from stock footage and AI-generated scenes. **If a production team can make it, OpenMontage can orchestrate it.** + +- **11 production pipelines** — explainers, talking heads, screen demos, cinematic trailers, animations, podcasts, localization, and more +- **49 production tools** — spanning video generation, image creation, text-to-speech, music, audio mixing, subtitles, enhancement, and analysis +- **400+ agent skills** — production skills, pipeline directors, creative techniques, quality checklists, and deep technology knowledge packs that teach the agent how to use every tool like an expert +- **Live web research built in** — before writing a single word of script, the agent runs 15-25+ web searches across YouTube, Reddit, news sites, and academic sources to ground your video in real, current data +- **Both free/local AND cloud providers** — every capability supports open-source local alternatives alongside premium APIs. Use what you have. +- **No vendor lock-in** — swap providers freely. The selector pattern auto-routes to whatever's available on your machine. +- **Budget governance built in** — cost estimation before execution, spend caps, per-action approval thresholds. No surprise bills. + +--- + ## How It Works OpenMontage uses an **agent-first architecture**. There is no code orchestrator. Your AI coding assistant IS the orchestrator. @@ -187,91 +224,6 @@ Final video output --- -## Quick Start - -### 1. Prerequisites - -Make sure these are installed before you begin: - -- **Python 3.10+** — [python.org](https://www.python.org/downloads/) -- **FFmpeg** — `brew install ffmpeg` / `sudo apt install ffmpeg` / [ffmpeg.org](https://ffmpeg.org/download.html) -- **Node.js 18+** — [nodejs.org](https://nodejs.org/) -- **An AI coding assistant** — Claude Code, Cursor, Copilot, Windsurf, or Codex - -### 2. Install - -```bash -git clone https://github.com/calesthio/OpenMontage.git -cd OpenMontage -make setup -``` - -That's it. `make setup` installs Python dependencies, the Remotion composer, free offline TTS (Piper), and creates your `.env` file. - -> **No `make`?** Run the steps manually: -> ```bash -> pip install -r requirements.txt -> cd remotion-composer && npm install && cd .. -> pip install piper-tts -> cp .env.example .env -> ``` -> -> **Windows users:** If `npm install` fails with `ERR_INVALID_ARG_TYPE`, use `npx --yes npm install` instead. - -### 3. Add API Keys (optional) - -Open `.env` in your editor and add any keys you have. Every key is optional — the more you add, the more providers unlock. - -```bash -# .env — add your keys here - -# Best bang for buck — one key unlocks 5 tools: -FAL_KEY=your-key # FLUX images + Google Veo, Kling, MiniMax video + Recraft images - -# Free stock media: -PEXELS_API_KEY=your-key # Free — stock footage and images -PIXABAY_API_KEY=your-key # Free — stock footage and images - -# Music: -SUNO_API_KEY=your-key # Suno AI — full songs, instrumentals, any genre - -# Voice & images: -ELEVENLABS_API_KEY=your-key # Premium TTS, AI music, sound effects -OPENAI_API_KEY=your-key # OpenAI TTS, DALL-E 3 images -GOOGLE_API_KEY=your-key # Google Imagen images, Google TTS (700+ voices) - -# More video providers: -HEYGEN_API_KEY=your-key # HeyGen — VEO, Sora, Runway, Kling via single gateway -RUNWAY_API_KEY=your-key # Runway Gen-4 direct -``` - -**Have a GPU?** Unlock free local video and image generation: -```bash -make install-gpu - -# Then add to .env: -VIDEO_GEN_LOCAL_ENABLED=true -VIDEO_GEN_LOCAL_MODEL=wan2.1-1.3b # or wan2.1-14b, hunyuan-1.5, ltx2-local, cogvideo-5b -``` - -### 4. Run - -Open the project in your AI coding assistant and tell it what you want: - -``` -"Make a 60-second animated explainer about how neural networks learn" -``` - -The agent will: -1. Run preflight to discover your available tools and show you what's configured -2. Research the topic with live web searches — grounding the script in real data -3. Present you with concept directions, a production plan, and cost estimates -4. Execute the pipeline stage by stage, checkpointing as it goes -5. Ask for your approval at creative decision points -6. Deliver the final composed video - ---- - ## Architecture ``` @@ -311,6 +263,116 @@ Each tool declares which Layer 3 skills it relies on. The agent reads Layer 1 to --- +## Supported Providers + +> **Full setup guide with pricing and free tiers:** [`docs/PROVIDERS.md`](docs/PROVIDERS.md) + +
+Video Generation — 12 providers + +| Provider | Type | Notes | +|----------|------|-------| +| **Kling** | Cloud API | High quality, fast | +| **Runway Gen-4** | Cloud API | Cinematic quality | +| **Google Veo 3** | Cloud API | Long-form, cinematic. Via fal.ai or HeyGen. | +| **MiniMax** | Cloud API | Cost-effective | +| **HeyGen** | Cloud API | Multi-model gateway | +| **WAN 2.1** | Local GPU | Free, 1.3B and 14B variants | +| **Hunyuan** | Local GPU | Free, high quality | +| **CogVideo** | Local GPU | Free, 2B and 5B variants | +| **LTX-Video** | Local GPU / Modal | Free locally, or self-hosted cloud | +| **Pexels** | Stock | Free stock footage | +| **Pixabay** | Stock | Free stock footage | + +
+ +
+Image Generation — 8 providers + +| Provider | Type | Notes | +|----------|------|-------| +| **FLUX** | Cloud API | State-of-the-art quality | +| **Google Imagen** | Cloud API | Imagen 4 — high-quality, multiple aspect ratios | +| **DALL-E 3** | Cloud API | OpenAI's image model | +| **Recraft** | Cloud API | Design-focused generation | +| **Local Diffusion** | Local GPU | Stable Diffusion, free | +| **Pexels** | Stock | Free stock images | +| **Pixabay** | Stock | Free stock images | +| **ManimCE** | Local | Mathematical animations | + +
+ +
+Text-to-Speech — 4 providers + +| Provider | Type | Notes | +|----------|------|-------| +| **ElevenLabs** | Cloud API | Premium voice quality | +| **Google TTS** | Cloud API | 700+ voices, 50+ languages — best for localization | +| **OpenAI TTS** | Cloud API | Fast, affordable | +| **Piper** | Local | Completely free, offline | + +
+ +
+Music, Sound & Post-Production + +**Music & Sound:** + +| Provider | Type | Notes | +|----------|------|-------| +| **Suno AI** | Cloud API | Full song generation with vocals, lyrics, any genre. Up to 8 minutes. | +| **ElevenLabs Music** | Cloud API | AI music generation | +| **ElevenLabs SFX** | Cloud API | Sound effect generation | + +**Post-Production (always available, always free):** + +| Tool | What It Does | +|------|-------------| +| **FFmpeg** | Video composition, encoding, subtitle burn-in, audio muxing | +| **Video Stitch** | Multi-clip assembly, crossfades, picture-in-picture, spatial layouts | +| **Video Trimmer** | Precision cutting and extraction | +| **Audio Mixer** | Multi-track mixing, ducking, fades | +| **Audio Enhance** | Noise reduction, normalization | +| **Color Grade** | LUT-based color grading | +| **Subtitle Gen** | SRT/VTT generation from timestamps | + +**Enhancement:** + +| Tool | What It Does | +|------|-------------| +| **Upscale** | Real-ESRGAN image/video upscaling | +| **Background Remove** | rembg / U2Net background removal | +| **Face Enhance** | Face quality enhancement | +| **Face Restore** | CodeFormer / GFPGAN face restoration | + +**Analysis:** + +| Tool | What It Does | +|------|-------------| +| **Transcriber** | WhisperX speech-to-text with word-level timestamps | +| **Scene Detect** | Automatic scene boundary detection | +| **Frame Sampler** | Intelligent frame extraction | +| **Video Understand** | CLIP/BLIP-2 vision-language analysis | + +**Avatar & Lip Sync:** + +| Tool | What It Does | +|------|-------------| +| **Talking Head** | SadTalker / MuseTalk avatar animation | +| **Lip Sync** | Wav2Lip audio-driven lip synchronization | + +**Composition & Rendering:** + +| Engine | Type | What It Does | +|--------|------|-------------| +| **Remotion** | Local (Node.js) | React-based programmatic video — spring-animated image scenes, stat reveals, section titles, hero cards, TikTok-style word-by-word captions, scene transitions (fade/slide/wipe/flip), Google Fonts, and audio with fade curves. **When no video generation providers are configured, the agent generates still images and Remotion turns them into fully animated video.** | +| **FFmpeg** | Local | Core video assembly, encoding, subtitle burn, audio muxing, color grading | + +
+ +--- + ## Style System Style playbooks define the visual language for your productions: diff --git a/remotion-composer/public/demo-props/ai-revolution.json b/remotion-composer/public/demo-props/ai-revolution.json new file mode 100644 index 0000000..69cc0ef --- /dev/null +++ b/remotion-composer/public/demo-props/ai-revolution.json @@ -0,0 +1,285 @@ +{ + "cuts": [ + { + "id": "scene-1-hero", + "source": "", + "in_seconds": 0, + "out_seconds": 4, + "type": "hero_title", + "text": "THE AI REVOLUTION IN NUMBERS", + "heroSubtitle": "How artificial intelligence is reshaping our world" + }, + { + "id": "scene-2-kpi-dashboard", + "source": "", + "in_seconds": 4, + "out_seconds": 10, + "type": "kpi_grid", + "title": "AI at a Glance — 2025", + "columns": 4, + "chartAnimation": "cascade", + "chartColors": ["#6366F1", "#22D3EE", "#A78BFA", "#34D399"], + "backgroundColor": "#0F172A", + "chartData": [ + { + "label": "Global AI Market", + "value": 184, + "prefix": "$", + "suffix": "B", + "change": 38.1, + "icon": "💰" + }, + { + "label": "AI Startups Funded", + "value": 6500, + "prefix": "", + "suffix": "+", + "change": 22.4, + "icon": "🚀" + }, + { + "label": "AI Research Papers", + "value": 240, + "prefix": "", + "suffix": "K/yr", + "change": 41.6, + "icon": "📄" + }, + { + "label": "Companies Using AI", + "value": 77, + "prefix": "", + "suffix": "%", + "change": 12.3, + "icon": "🏢" + } + ] + }, + { + "id": "scene-3-bar-investment", + "source": "", + "in_seconds": 10, + "out_seconds": 16, + "type": "bar_chart", + "title": "AI Investment by Sector ($B, 2024)", + "chartAnimation": "grow-up", + "showValues": true, + "showGrid": true, + "backgroundColor": "#0F172A", + "chartColors": [ + "#6366F1", + "#8B5CF6", + "#A78BFA", + "#22D3EE", + "#06B6D4", + "#34D399" + ], + "chartData": [ + { "label": "Healthcare", "value": 28.4 }, + { "label": "Finance", "value": 24.6 }, + { "label": "Automotive", "value": 19.8 }, + { "label": "Retail", "value": 14.2 }, + { "label": "Manufacturing", "value": 12.7 }, + { "label": "Education", "value": 8.1 } + ] + }, + { + "id": "scene-4-line-growth", + "source": "", + "in_seconds": 16, + "out_seconds": 22, + "type": "line_chart", + "title": "AI Market Revenue Growth (Billions USD)", + "xLabel": "Year", + "yLabel": "Revenue ($B)", + "chartAnimation": "draw", + "showGrid": true, + "showMarkers": true, + "showLegend": true, + "backgroundColor": "#0F172A", + "chartColors": ["#6366F1", "#22D3EE"], + "chartSeries": [ + { + "label": "Generative AI", + "data": [ + { "x": 2020, "y": 1.2 }, + { "x": 2021, "y": 3.8 }, + { "x": 2022, "y": 8.5 }, + { "x": 2023, "y": 22 }, + { "x": 2024, "y": 67 }, + { "x": 2025, "y": 137 } + ] + }, + { + "label": "Traditional AI/ML", + "data": [ + { "x": 2020, "y": 28 }, + { "x": 2021, "y": 38 }, + { "x": 2022, "y": 52 }, + { "x": 2023, "y": 68 }, + { "x": 2024, "y": 86 }, + { "x": 2025, "y": 105 } + ] + } + ] + }, + { + "id": "scene-5-pie-talent", + "source": "", + "in_seconds": 22, + "out_seconds": 28, + "type": "pie_chart", + "title": "Global AI Talent Distribution", + "donut": true, + "centerLabel": "AI Talent", + "centerValue": "4.7M", + "chartAnimation": "spin", + "showLegend": true, + "backgroundColor": "#0F172A", + "chartData": [ + { "label": "United States", "value": 28 }, + { "label": "China", "value": 18 }, + { "label": "India", "value": 14 }, + { "label": "United Kingdom", "value": 8 }, + { "label": "Germany", "value": 6 }, + { "label": "Rest of World", "value": 26 } + ] + }, + { + "id": "scene-6-comparison", + "source": "", + "in_seconds": 28, + "out_seconds": 34, + "type": "comparison", + "title": "Training Cost: GPT-3 vs GPT-4", + "leftLabel": "GPT-3 (2020)", + "leftValue": "$4.6M", + "rightLabel": "GPT-4 (2023)", + "rightValue": "$100M+" + }, + { + "id": "scene-7-kpi-impact", + "source": "", + "in_seconds": 34, + "out_seconds": 40, + "type": "kpi_grid", + "title": "AI Impact on Productivity", + "columns": 3, + "chartAnimation": "pop", + "chartColors": ["#22D3EE", "#A78BFA", "#34D399"], + "backgroundColor": "#0F172A", + "chartData": [ + { + "label": "Code Written Faster", + "value": 55, + "prefix": "", + "suffix": "%", + "change": 0, + "icon": "⚡" + }, + { + "label": "Customer Service Automated", + "value": 67, + "prefix": "", + "suffix": "%", + "change": 0, + "icon": "🤖" + }, + { + "label": "Drug Discovery Speedup", + "value": 4, + "prefix": "", + "suffix": "x", + "change": 0, + "icon": "💊" + } + ] + }, + { + "id": "scene-8-stat-dramatic", + "source": "", + "in_seconds": 40, + "out_seconds": 46, + "type": "stat_card", + "stat": "$15.7 Trillion", + "subtitle": "Projected AI contribution to global GDP by 2030 — more than the current output of China and India combined", + "accentColor": "#6366F1", + "backgroundColor": "#0A0F1E" + }, + { + "id": "scene-9-closing", + "source": "", + "in_seconds": 46, + "out_seconds": 50, + "type": "text_card", + "text": "The question is no longer whether AI will change the world. It's whether we're ready.", + "fontSize": 38, + "color": "#E2E8F0", + "backgroundColor": "#0F172A" + } + ], + "overlays": [ + { + "id": "overlay-market", + "type": "section_title", + "in_seconds": 4, + "out_seconds": 10, + "text": "THE LANDSCAPE", + "subtitle": "A global snapshot of AI today", + "accentColor": "#6366F1", + "position": "top-left" + }, + { + "id": "overlay-investment", + "type": "section_title", + "in_seconds": 10, + "out_seconds": 16, + "text": "CAPITAL FLOW", + "subtitle": "Where the billions are going", + "accentColor": "#8B5CF6", + "position": "top-left" + }, + { + "id": "overlay-growth", + "type": "section_title", + "in_seconds": 16, + "out_seconds": 22, + "text": "EXPONENTIAL GROWTH", + "subtitle": "Generative AI is rewriting the curve", + "accentColor": "#22D3EE", + "position": "top-left" + }, + { + "id": "overlay-talent", + "type": "section_title", + "in_seconds": 22, + "out_seconds": 28, + "text": "GLOBAL TALENT", + "subtitle": "The race for AI expertise", + "accentColor": "#A78BFA", + "position": "top-left" + }, + { + "id": "overlay-cost", + "type": "section_title", + "in_seconds": 28, + "out_seconds": 34, + "text": "SCALE & COST", + "subtitle": "The price of frontier intelligence", + "accentColor": "#F59E0B", + "position": "top-left" + }, + { + "id": "overlay-impact", + "type": "section_title", + "in_seconds": 34, + "out_seconds": 40, + "text": "REAL-WORLD IMPACT", + "subtitle": "Productivity gains across industries", + "accentColor": "#34D399", + "position": "top-left" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/climate-dashboard.json b/remotion-composer/public/demo-props/climate-dashboard.json new file mode 100644 index 0000000..0976e11 --- /dev/null +++ b/remotion-composer/public/demo-props/climate-dashboard.json @@ -0,0 +1,256 @@ +{ + "cuts": [ + { + "id": "scene-1-hero", + "source": "", + "in_seconds": 0, + "out_seconds": 4, + "type": "hero_title", + "text": "CLIMATE DASHBOARD", + "heroSubtitle": "The numbers behind the crisis" + }, + { + "id": "scene-2-temp-rise", + "source": "", + "in_seconds": 4, + "out_seconds": 9, + "type": "stat_card", + "stat": "+1.2\u00b0C", + "subtitle": "Global temperature rise since pre-industrial era \u2014 and accelerating", + "accentColor": "#F59E0B", + "backgroundColor": "#0A0F1E" + }, + { + "id": "scene-3-kpi-indicators", + "source": "", + "in_seconds": 9, + "out_seconds": 15, + "type": "kpi_grid", + "title": "Climate Indicators 2024", + "columns": 4, + "chartAnimation": "cascade", + "backgroundColor": "#0F172A", + "chartData": [ + { + "label": "CO\u2082 Concentration", + "value": 421, + "prefix": "", + "suffix": " ppm", + "change": 0.6, + "icon": "\ud83c\udf2b\ufe0f" + }, + { + "label": "Sea Level Rise", + "value": 3.6, + "prefix": "+", + "suffix": " mm/yr", + "change": 12.5, + "icon": "\ud83c\udf0a" + }, + { + "label": "Arctic Ice Loss", + "value": 13, + "prefix": "", + "suffix": "% /decade", + "change": -13, + "icon": "\u2744\ufe0f" + }, + { + "label": "Extreme Events", + "value": 387, + "prefix": "", + "suffix": "/year", + "change": 5.2, + "icon": "\u26a1" + } + ] + }, + { + "id": "scene-4-temp-anomaly", + "source": "", + "in_seconds": 15, + "out_seconds": 21, + "type": "line_chart", + "title": "Global Temperature Anomaly (\u00b0C vs 1951\u20131980 avg)", + "xLabel": "Year", + "yLabel": "Anomaly (\u00b0C)", + "chartAnimation": "draw", + "showGrid": true, + "showMarkers": true, + "showLegend": false, + "backgroundColor": "#0F172A", + "chartColors": ["#EF4444", "#F59E0B"], + "chartSeries": [ + { + "label": "Temperature Anomaly", + "data": [ + { "x": 1975, "y": -0.01 }, + { "x": 1980, "y": 0.26 }, + { "x": 1985, "y": 0.12 }, + { "x": 1990, "y": 0.45 }, + { "x": 1995, "y": 0.46 }, + { "x": 2000, "y": 0.40 }, + { "x": 2005, "y": 0.67 }, + { "x": 2010, "y": 0.72 }, + { "x": 2015, "y": 0.87 }, + { "x": 2020, "y": 1.02 }, + { "x": 2024, "y": 1.19 } + ] + } + ] + }, + { + "id": "scene-5-emitters", + "source": "", + "in_seconds": 21, + "out_seconds": 27, + "type": "bar_chart", + "title": "Top CO\u2082 Emitters (Gt/year)", + "chartAnimation": "grow-up", + "showValues": true, + "backgroundColor": "#0F172A", + "chartColors": ["#EF4444", "#3B82F6", "#F59E0B", "#10B981", "#8B5CF6", "#EC4899"], + "chartData": [ + { "label": "China", "value": 11.4 }, + { "label": "USA", "value": 4.7 }, + { "label": "India", "value": 2.9 }, + { "label": "EU", "value": 2.6 }, + { "label": "Russia", "value": 1.8 }, + { "label": "Japan", "value": 1.0 } + ] + }, + { + "id": "scene-6-energy-mix", + "source": "", + "in_seconds": 27, + "out_seconds": 33, + "type": "pie_chart", + "title": "Global Energy Sources 2024", + "donut": true, + "centerLabel": "Total", + "centerValue": "580 EJ", + "chartAnimation": "spin", + "backgroundColor": "#0F172A", + "chartData": [ + { "label": "Oil", "value": 30 }, + { "label": "Coal", "value": 26 }, + { "label": "Natural Gas", "value": 23 }, + { "label": "Renewables", "value": 14 }, + { "label": "Nuclear", "value": 4 }, + { "label": "Other", "value": 3 } + ] + }, + { + "id": "scene-7-comparison", + "source": "", + "in_seconds": 33, + "out_seconds": 38, + "type": "comparison", + "title": "Renewable Energy Share", + "leftLabel": "Year 2000", + "leftValue": "6.6%", + "rightLabel": "Year 2024", + "rightValue": "30.3%", + "backgroundColor": "#0F172A", + "color": "#F8FAFC" + }, + { + "id": "scene-8-progress", + "source": "", + "in_seconds": 38, + "out_seconds": 43, + "type": "progress_bar", + "progress": 29, + "progressLabel": "Renewable Energy Transition", + "progressColor": "#10B981", + "backgroundColor": "#0F172A" + }, + { + "id": "scene-9-quote", + "source": "", + "in_seconds": 43, + "out_seconds": 47, + "type": "callout", + "title": "Antonio Guterres, UN Secretary-General", + "text": "We are on a highway to climate hell with our foot still on the accelerator.", + "callout_type": "quote", + "backgroundColor": "#1E293B", + "color": "#E2E8F0" + }, + { + "id": "scene-10-closing", + "source": "", + "in_seconds": 47, + "out_seconds": 51, + "type": "text_card", + "text": "The data is clear. The window is closing. The time to act is now.", + "fontSize": 36, + "color": "#F8FAFC", + "backgroundColor": "#0A0F1E" + } + ], + "overlays": [ + { + "id": "overlay-crisis-section", + "type": "section_title", + "in_seconds": 4, + "out_seconds": 15, + "text": "THE CRISIS", + "subtitle": "Where we stand today", + "accentColor": "#EF4444", + "position": "top-left" + }, + { + "id": "overlay-stat-co2", + "type": "stat_reveal", + "in_seconds": 9, + "out_seconds": 15, + "text": "50%", + "subtitle": "more CO\u2082 than 1750", + "accentColor": "#F59E0B", + "position": "bottom-right" + }, + { + "id": "overlay-emitters-section", + "type": "section_title", + "in_seconds": 15, + "out_seconds": 27, + "text": "THE EMITTERS", + "subtitle": "Who drives the crisis", + "accentColor": "#3B82F6", + "position": "top-left" + }, + { + "id": "overlay-stat-warming", + "type": "stat_reveal", + "in_seconds": 15, + "out_seconds": 21, + "text": "10x", + "subtitle": "faster than any era in history", + "accentColor": "#EF4444", + "position": "bottom-right" + }, + { + "id": "overlay-transition-section", + "type": "section_title", + "in_seconds": 27, + "out_seconds": 43, + "text": "THE TRANSITION", + "subtitle": "A race against time", + "accentColor": "#10B981", + "position": "top-left" + }, + { + "id": "overlay-stat-renewables", + "type": "stat_reveal", + "in_seconds": 33, + "out_seconds": 38, + "text": "4.6\u00d7", + "subtitle": "growth in renewables since 2000", + "accentColor": "#10B981", + "position": "bottom-right" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/code-to-screen.json b/remotion-composer/public/demo-props/code-to-screen.json new file mode 100644 index 0000000..855ba37 --- /dev/null +++ b/remotion-composer/public/demo-props/code-to-screen.json @@ -0,0 +1,328 @@ +{ + "cuts": [ + { + "id": "scene-1-hero", + "source": "", + "in_seconds": 0, + "out_seconds": 4, + "type": "hero_title", + "text": "FROM CODE TO SCREEN", + "heroSubtitle": "The life of a web request" + }, + { + "id": "scene-2-text-card", + "source": "", + "in_seconds": 4, + "out_seconds": 10, + "type": "text_card", + "text": "You type a URL and press Enter. In the next 200 milliseconds, a symphony of systems springs into action.", + "fontSize": 44, + "color": "#F8FAFC", + "backgroundColor": "#0F172A" + }, + { + "id": "scene-3-kpi-grid", + "source": "", + "in_seconds": 10, + "out_seconds": 16, + "type": "kpi_grid", + "title": "The Invisible Timeline", + "backgroundColor": "#0F172A", + "columns": 4, + "chartAnimation": "count-up", + "chartData": [ + { + "label": "DNS Lookups", + "value": 150, + "prefix": "", + "suffix": " ms", + "change": 0, + "icon": "globe" + }, + { + "label": "TCP Handshake", + "value": 50, + "prefix": "", + "suffix": " ms", + "change": 0, + "icon": "link" + }, + { + "label": "TLS Setup", + "value": 100, + "prefix": "", + "suffix": " ms", + "change": 0, + "icon": "lock" + }, + { + "label": "First Byte", + "value": 200, + "prefix": "", + "suffix": " ms", + "change": 0, + "icon": "zap" + } + ] + }, + { + "id": "scene-4-bar-chart", + "source": "", + "in_seconds": 16, + "out_seconds": 22, + "type": "bar_chart", + "title": "What Takes the Longest?", + "backgroundColor": "#0F172A", + "chartAnimation": "grow-up", + "showGrid": true, + "showValues": true, + "chartColors": [ + "#2563EB", + "#F59E0B", + "#10B981", + "#EC4899", + "#06B6D4", + "#8B5CF6" + ], + "chartData": [ + { + "label": "DNS", + "value": 150 + }, + { + "label": "TCP", + "value": 50 + }, + { + "label": "TLS", + "value": 100 + }, + { + "label": "Server Processing", + "value": 120 + }, + { + "label": "Content Download", + "value": 80 + }, + { + "label": "DOM Parsing", + "value": 200 + } + ] + }, + { + "id": "scene-5-progress-bar", + "source": "", + "in_seconds": 22, + "out_seconds": 28, + "type": "progress_bar", + "title": "Request Journey", + "backgroundColor": "#0F172A", + "progress": 100, + "progressLabel": "Complete", + "progressColor": "#10B981", + "progressAnimation": "fill", + "progressSegments": [ + { + "value": 20, + "color": "#2563EB", + "label": "DNS" + }, + { + "value": 10, + "color": "#F59E0B", + "label": "TCP" + }, + { + "value": 15, + "color": "#10B981", + "label": "TLS" + }, + { + "value": 20, + "color": "#EC4899", + "label": "Server" + }, + { + "value": 15, + "color": "#06B6D4", + "label": "Download" + }, + { + "value": 20, + "color": "#8B5CF6", + "label": "Parse" + } + ] + }, + { + "id": "scene-6-comparison", + "source": "", + "in_seconds": 28, + "out_seconds": 34, + "type": "comparison", + "title": "Connection Efficiency", + "backgroundColor": "#0F172A", + "color": "#F8FAFC", + "leftLabel": "HTTP/1.1", + "leftValue": "6 connections", + "rightLabel": "HTTP/2", + "rightValue": "1 connection (multiplexed)", + "changeIndicator": "10x faster", + "changeDirection": "up" + }, + { + "id": "scene-7-pie-chart", + "source": "", + "in_seconds": 34, + "out_seconds": 40, + "type": "pie_chart", + "title": "Average Web Page Composition", + "backgroundColor": "#0F172A", + "donut": true, + "centerLabel": "Total", + "centerValue": "2.5 MB", + "chartAnimation": "spin", + "showLegend": true, + "chartData": [ + { + "label": "Images", + "value": 50 + }, + { + "label": "JavaScript", + "value": 25 + }, + { + "label": "CSS", + "value": 10 + }, + { + "label": "HTML", + "value": 5 + }, + { + "label": "Fonts", + "value": 5 + }, + { + "label": "Other", + "value": 5 + } + ] + }, + { + "id": "scene-8-callout", + "source": "", + "in_seconds": 40, + "out_seconds": 46, + "type": "callout", + "title": "Pro Tip", + "text": "The fastest request is the one you never make. Use caching, CDNs, and lazy loading to skip steps entirely.", + "backgroundColor": "#1E293B", + "color": "#E2E8F0", + "callout_type": "tip" + }, + { + "id": "scene-9-stat-card", + "source": "", + "in_seconds": 46, + "out_seconds": 50, + "type": "stat_card", + "stat": "200", + "subtitle": "The status code that means everything worked", + "accentColor": "#10B981", + "backgroundColor": "#0F172A" + } + ], + "overlays": [ + { + "id": "overlay-1-request", + "in_seconds": 4, + "out_seconds": 10, + "type": "section_title", + "text": "THE REQUEST", + "subtitle": "It all starts with a URL", + "accentColor": "#2563EB", + "position": "top-left" + }, + { + "id": "overlay-2-timing", + "in_seconds": 10, + "out_seconds": 22, + "type": "section_title", + "text": "TIMING", + "subtitle": "Milliseconds matter", + "accentColor": "#F59E0B", + "position": "top-left" + }, + { + "id": "overlay-3-optimization", + "in_seconds": 28, + "out_seconds": 40, + "type": "section_title", + "text": "OPTIMIZATION", + "subtitle": "Making requests faster", + "accentColor": "#10B981", + "position": "top-left" + } + ], + "captions": [ + { + "id": "caption-1", + "in_seconds": 0, + "out_seconds": 4, + "text": "FROM CODE TO SCREEN: The life of a web request" + }, + { + "id": "caption-2", + "in_seconds": 4, + "out_seconds": 10, + "text": "You type a URL and press Enter. In the next 200 milliseconds, a symphony of systems springs into action." + }, + { + "id": "caption-3", + "in_seconds": 10, + "out_seconds": 16, + "text": "The Invisible Timeline: DNS, TCP, TLS, and First Byte all happen in milliseconds" + }, + { + "id": "caption-4", + "in_seconds": 16, + "out_seconds": 22, + "text": "DOM Parsing takes the longest at 200ms. DNS lookups are second at 150ms." + }, + { + "id": "caption-5", + "in_seconds": 22, + "out_seconds": 28, + "text": "The complete request journey from DNS to DOM parsing takes approximately 700ms total" + }, + { + "id": "caption-6", + "in_seconds": 28, + "out_seconds": 34, + "text": "HTTP/2 multiplexing allows one connection instead of six, making requests 10x faster" + }, + { + "id": "caption-7", + "in_seconds": 34, + "out_seconds": 40, + "text": "Images dominate modern web pages at 50% of total size, averaging 2.5 MB per page" + }, + { + "id": "caption-8", + "in_seconds": 40, + "out_seconds": 46, + "text": "Pro Tip: The fastest request is the one you never make. Use caching, CDNs, and lazy loading." + }, + { + "id": "caption-9", + "in_seconds": 46, + "out_seconds": 50, + "text": "Status 200: Everything worked perfectly" + } + ], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/ecotrack-pitch.json b/remotion-composer/public/demo-props/ecotrack-pitch.json new file mode 100644 index 0000000..f8026eb --- /dev/null +++ b/remotion-composer/public/demo-props/ecotrack-pitch.json @@ -0,0 +1,225 @@ +{ + "cuts": [ + { + "id": "scene_1_hero", + "source": "", + "in_seconds": 0, + "out_seconds": 5, + "type": "hero_title", + "text": "ECOTRACK", + "heroSubtitle": "Know your carbon. Shrink your footprint." + }, + { + "id": "scene_2_problem", + "source": "", + "in_seconds": 5, + "out_seconds": 10, + "type": "stat_card", + "stat": "36.8 Billion Tons", + "subtitle": "Global CO\u2082 emissions per year \u2014 and rising 1.1% annually", + "accentColor": "#DC2626", + "backgroundColor": "#1A1A2E" + }, + { + "id": "scene_3_market", + "source": "", + "in_seconds": 10, + "out_seconds": 15, + "type": "kpi_grid", + "title": "Market Opportunity", + "columns": 3, + "chartAnimation": "cascade", + "chartData": [ + { + "label": "Carbon Market", + "value": 2.4, + "prefix": "$", + "suffix": "T", + "change": 31, + "icon": "\ud83c\udf0d" + }, + { + "label": "CAGR Growth", + "value": 24.3, + "prefix": "", + "suffix": "%", + "change": 24.3, + "icon": "\ud83d\udcc8" + }, + { + "label": "Consumers Willing", + "value": 73, + "prefix": "", + "suffix": "%", + "change": 12, + "icon": "\ud83c\udf31" + } + ] + }, + { + "id": "scene_4_sources", + "source": "", + "in_seconds": 15, + "out_seconds": 20, + "type": "bar_chart", + "title": "Carbon Emissions by Sector", + "chartAnimation": "grow-up", + "showGrid": true, + "showValues": true, + "chartColors": [ + "#064E3B", + "#065F46", + "#047857", + "#059669", + "#10B981", + "#34D399" + ], + "chartData": [ + { + "label": "Energy", + "value": 73 + }, + { + "label": "Agriculture", + "value": 12 + }, + { + "label": "Industry", + "value": 6 + }, + { + "label": "Transport", + "value": 5 + }, + { + "label": "Buildings", + "value": 3 + }, + { + "label": "Other", + "value": 1 + } + ] + }, + { + "id": "scene_5_progress", + "source": "", + "in_seconds": 20, + "out_seconds": 25, + "type": "progress_bar", + "progress": 73, + "progressLabel": "73% to Public Launch", + "title": "Product Readiness", + "progressColor": "#059669", + "progressAnimation": "fill", + "backgroundColor": "#0F172A" + }, + { + "id": "scene_6_comparison", + "source": "", + "in_seconds": 25, + "out_seconds": 30, + "type": "comparison", + "title": "Personal Carbon Impact", + "leftLabel": "Without EcoTrack", + "leftValue": "16 tons/yr", + "rightLabel": "With EcoTrack", + "rightValue": "9.4 tons/yr" + }, + { + "id": "scene_7_revenue", + "source": "", + "in_seconds": 30, + "out_seconds": 35, + "type": "pie_chart", + "title": "Revenue Model", + "donut": true, + "chartAnimation": "sequential", + "centerLabel": "ARR", + "centerValue": "$1.8M", + "chartData": [ + { + "label": "Premium Sub", + "value": 45 + }, + { + "label": "Enterprise API", + "value": 30 + }, + { + "label": "Carbon Offsets", + "value": 15 + }, + { + "label": "Data Insights", + "value": 10 + } + ] + }, + { + "id": "scene_8_cta", + "source": "", + "in_seconds": 35, + "out_seconds": 40, + "type": "text_card", + "text": "Raising $3M Seed \u00b7 Join the Climate Revolution", + "fontSize": 44, + "color": "#ECFDF5", + "backgroundColor": "#064E3B" + } + ], + "overlays": [ + { + "id": "overlay_problem", + "in_seconds": 5, + "out_seconds": 10, + "type": "section_title", + "text": "THE PROBLEM", + "subtitle": "A crisis in numbers", + "accentColor": "#DC2626", + "position": "top-left" + }, + { + "id": "overlay_opportunity", + "in_seconds": 10, + "out_seconds": 20, + "type": "section_title", + "text": "THE OPPORTUNITY", + "subtitle": "A $2.4 trillion market", + "accentColor": "#059669", + "position": "top-left" + }, + { + "id": "overlay_solution", + "in_seconds": 20, + "out_seconds": 30, + "type": "section_title", + "text": "THE SOLUTION", + "subtitle": "Track. Reduce. Offset.", + "accentColor": "#10B981", + "position": "top-left" + }, + { + "id": "overlay_reduction", + "in_seconds": 25, + "out_seconds": 30, + "type": "stat_reveal", + "text": "41%", + "subtitle": "carbon reduction", + "accentColor": "#10B981", + "position": "bottom-right" + }, + { + "id": "overlay_business", + "in_seconds": 30, + "out_seconds": 35, + "type": "section_title", + "text": "THE BUSINESS", + "subtitle": "Four revenue streams", + "accentColor": "#0D9488", + "position": "top-left" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/focusflow-pitch.json b/remotion-composer/public/demo-props/focusflow-pitch.json new file mode 100644 index 0000000..a475f63 --- /dev/null +++ b/remotion-composer/public/demo-props/focusflow-pitch.json @@ -0,0 +1,192 @@ +{ + "cuts": [ + { + "id": "scene_1_hero", + "source": "", + "in_seconds": 0, + "out_seconds": 4, + "type": "hero_title", + "text": "FOCUSFLOW", + "heroSubtitle": "AI-powered deep work, reimagined" + }, + { + "id": "scene_2_stat_card", + "source": "", + "in_seconds": 4, + "out_seconds": 9, + "type": "stat_card", + "stat": "2.1 Hours", + "subtitle": "Average daily time lost to context switching", + "accentColor": "#EF4444", + "backgroundColor": "#0F172A" + }, + { + "id": "scene_3_comparison", + "source": "", + "in_seconds": 9, + "out_seconds": 14, + "type": "comparison", + "title": "Context Switching", + "backgroundColor": "#0F172A", + "color": "#F8FAFC", + "leftLabel": "Time Lost", + "leftValue": "2.1 hrs", + "rightLabel": "Time Lost", + "rightValue": "0.3 hrs", + "changeIndicator": "86% reduction", + "changeDirection": "down" + }, + { + "id": "scene_4_kpi_grid", + "source": "", + "in_seconds": 14, + "out_seconds": 20, + "type": "kpi_grid", + "title": "Traction Metrics", + "backgroundColor": "#0F172A", + "columns": 3, + "chartAnimation": "cascade", + "chartData": [ + { + "label": "Active Users", + "value": 12500, + "prefix": "", + "suffix": "", + "change": 24, + "icon": "\ud83d\udc64" + }, + { + "label": "Avg Focus Time", + "value": 4.2, + "prefix": "", + "suffix": "hrs", + "change": 18, + "icon": "\u23f1\ufe0f" + }, + { + "label": "NPS Score", + "value": 72, + "prefix": "", + "suffix": "", + "change": 8, + "icon": "\u2b50" + } + ] + }, + { + "id": "scene_5_bar_chart", + "source": "", + "in_seconds": 20, + "out_seconds": 25, + "type": "bar_chart", + "title": "Productivity Gain by Role", + "backgroundColor": "#0F172A", + "chartAnimation": "pop", + "showGrid": true, + "showValues": true, + "chartColors": [ + "#3B82F6", + "#8B5CF6", + "#EC4899", + "#F59E0B", + "#10B981" + ], + "chartData": [ + { + "label": "Engineers", + "value": 34 + }, + { + "label": "Designers", + "value": 28 + }, + { + "label": "PMs", + "value": 41 + }, + { + "label": "Writers", + "value": 22 + }, + { + "label": "Analysts", + "value": 31 + } + ] + }, + { + "id": "scene_6_pie_chart", + "source": "", + "in_seconds": 25, + "out_seconds": 30, + "type": "pie_chart", + "title": "Revenue Breakdown", + "backgroundColor": "#0F172A", + "donut": true, + "chartAnimation": "sequential", + "centerLabel": "ARR", + "centerValue": "$2.4M", + "chartData": [ + { + "label": "Pro Plan", + "value": 55 + }, + { + "label": "Enterprise", + "value": 30 + }, + { + "label": "Free\u2192Paid", + "value": 15 + } + ] + }, + { + "id": "scene_7_callout", + "source": "", + "in_seconds": 30, + "out_seconds": 36, + "type": "callout", + "title": "", + "text": "FocusFlow changed how our entire engineering team works. We shipped 40% more features last quarter.", + "backgroundColor": "#1E293B", + "color": "#E2E8F0", + "callout_type": "quote" + }, + { + "id": "scene_8_text_card", + "source": "", + "in_seconds": 36, + "out_seconds": 40, + "type": "text_card", + "text": "Raising $5M Series A \u00b7 Q2 2026", + "fontSize": 48, + "color": "#F8FAFC", + "backgroundColor": "#0F172A" + } + ], + "overlays": [ + { + "id": "overlay_stat_reveal", + "in_seconds": 9, + "out_seconds": 14, + "type": "stat_reveal", + "text": "86%", + "subtitle": "less switching", + "accentColor": "#10B981", + "position": "bottom-right" + }, + { + "id": "overlay_traction_section", + "in_seconds": 14, + "out_seconds": 25, + "type": "section_title", + "text": "TRACTION", + "subtitle": "", + "accentColor": "#3B82F6", + "position": "top-left" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/sleep-science.json b/remotion-composer/public/demo-props/sleep-science.json new file mode 100644 index 0000000..93cc3fa --- /dev/null +++ b/remotion-composer/public/demo-props/sleep-science.json @@ -0,0 +1,200 @@ +{ + "cuts": [ + { + "id": "scene-1-hero", + "source": "", + "in_seconds": 0, + "out_seconds": 5, + "type": "hero_title", + "text": "THE SCIENCE OF SLEEP", + "heroSubtitle": "Why the third of your life you spend unconscious matters most" + }, + { + "id": "scene-2-stat", + "source": "", + "in_seconds": 5, + "out_seconds": 10, + "type": "stat_card", + "stat": "26 Years", + "subtitle": "The average person spends 26 years of their life asleep \u2014 and another 7 years trying to fall asleep", + "accentColor": "#7C3AED", + "backgroundColor": "#0F0B2E" + }, + { + "id": "scene-3-pie", + "source": "", + "in_seconds": 10, + "out_seconds": 17, + "type": "pie_chart", + "title": "What Happens While You Sleep", + "donut": true, + "centerLabel": "Sleep Cycle", + "centerValue": "90 min", + "chartAnimation": "sequential", + "chartData": [ + { "label": "Light Sleep (N1-N2)", "value": 50 }, + { "label": "Deep Sleep (N3)", "value": 20 }, + { "label": "REM Sleep", "value": 25 }, + { "label": "Awake", "value": 5 } + ] + }, + { + "id": "scene-4-bar", + "source": "", + "in_seconds": 17, + "out_seconds": 24, + "type": "bar_chart", + "title": "Average Nightly Sleep by Country (hours)", + "chartAnimation": "grow-up", + "showGrid": true, + "showValues": true, + "chartColors": [ + "#818CF8", + "#A78BFA", + "#8B5CF6", + "#7C3AED", + "#6D28D9", + "#5B21B6" + ], + "chartData": [ + { "label": "New Zealand", "value": 7.5 }, + { "label": "Netherlands", "value": 7.3 }, + { "label": "Finland", "value": 7.1 }, + { "label": "UK", "value": 6.8 }, + { "label": "USA", "value": 6.5 }, + { "label": "Japan", "value": 5.9 } + ] + }, + { + "id": "scene-5-comparison", + "source": "", + "in_seconds": 24, + "out_seconds": 30, + "type": "comparison", + "title": "The Sleep Divide", + "leftLabel": "8 Hours of Sleep", + "leftValue": "Stronger immunity, sharper memory, 12% lower mortality risk", + "rightLabel": "Under 6 Hours", + "rightValue": "4x cold risk, 48% higher heart disease, impaired cognition" + }, + { + "id": "scene-6-callout", + "source": "", + "in_seconds": 30, + "out_seconds": 36, + "type": "callout", + "callout_type": "tip", + "title": "Dr. Matthew Walker, Neuroscientist", + "text": "Sleep is the single most effective thing we can do to reset our brain and body health each day. There is no major organ or brain process that isn\u2019t optimally enhanced by sleep.", + "accentColor": "#A78BFA", + "backgroundColor": "#110D2B", + "color": "#E0D7F5" + }, + { + "id": "scene-7-kpi", + "source": "", + "in_seconds": 36, + "out_seconds": 42, + "type": "kpi_grid", + "title": "Sleep By the Numbers", + "columns": 4, + "chartAnimation": "cascade", + "chartData": [ + { + "label": "Dreams Per Night", + "value": 5, + "prefix": "~", + "suffix": "", + "icon": "\ud83c\udf19" + }, + { + "label": "Ideal Temperature", + "value": 65, + "prefix": "", + "suffix": "\u00b0F", + "icon": "\u2744\ufe0f" + }, + { + "label": "Sleep Deprived Adults", + "value": 35, + "prefix": "", + "suffix": "%", + "change": 4.2, + "icon": "\u26a0\ufe0f" + }, + { + "label": "Memory Boost from Naps", + "value": 20, + "prefix": "+", + "suffix": "%", + "icon": "\ud83e\udde0" + } + ] + }, + { + "id": "scene-8-closing", + "source": "", + "in_seconds": 42, + "out_seconds": 47, + "type": "text_card", + "text": "Sleep is not a luxury. It is a biological necessity. Tonight, give yourself the gift of rest.", + "fontSize": 36, + "color": "#E0D7F5", + "backgroundColor": "#0A0720" + } + ], + "overlays": [ + { + "id": "overlay-lifecycle", + "in_seconds": 5, + "out_seconds": 10, + "type": "section_title", + "text": "A LIFETIME ASLEEP", + "subtitle": "The scale of slumber", + "accentColor": "#7C3AED", + "position": "top-left" + }, + { + "id": "overlay-cycles", + "in_seconds": 10, + "out_seconds": 17, + "type": "section_title", + "text": "SLEEP ARCHITECTURE", + "subtitle": "The stages that restore you", + "accentColor": "#818CF8", + "position": "top-left" + }, + { + "id": "overlay-global", + "in_seconds": 17, + "out_seconds": 24, + "type": "section_title", + "text": "GLOBAL PATTERNS", + "subtitle": "Who sleeps the most \u2014 and least", + "accentColor": "#A78BFA", + "position": "top-left" + }, + { + "id": "overlay-health", + "in_seconds": 24, + "out_seconds": 30, + "type": "section_title", + "text": "HEALTH IMPACT", + "subtitle": "What sleep deprivation really costs", + "accentColor": "#C084FC", + "position": "top-left" + }, + { + "id": "overlay-expert", + "in_seconds": 30, + "out_seconds": 36, + "type": "section_title", + "text": "EXPERT INSIGHT", + "subtitle": "From Why We Sleep", + "accentColor": "#A78BFA", + "position": "top-left" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/space-exploration.json b/remotion-composer/public/demo-props/space-exploration.json new file mode 100644 index 0000000..62e69eb --- /dev/null +++ b/remotion-composer/public/demo-props/space-exploration.json @@ -0,0 +1,249 @@ +{ + "cuts": [ + { + "id": "scene-1-hero", + "source": "", + "in_seconds": 0, + "out_seconds": 5, + "type": "hero_title", + "text": "BEYOND EARTH", + "heroSubtitle": "Humanity's greatest journey across the cosmos" + }, + { + "id": "scene-2-universe-age", + "source": "", + "in_seconds": 5, + "out_seconds": 10, + "type": "stat_card", + "stat": "13.8 Billion Years", + "subtitle": "The age of the observable universe — and we are here for a blink", + "accentColor": "#F5A623", + "backgroundColor": "#0A0A1A" + }, + { + "id": "scene-3-milestones", + "source": "", + "in_seconds": 10, + "out_seconds": 16, + "type": "kpi_grid", + "title": "Space by the Numbers", + "columns": 4, + "chartAnimation": "cascade", + "chartData": [ + { + "label": "Distance to Moon", + "value": 384400, + "prefix": "", + "suffix": " km", + "change": 0, + "icon": "\uD83C\uDF19" + }, + { + "label": "ISS Orbit Speed", + "value": 27600, + "prefix": "", + "suffix": " km/h", + "change": 0, + "icon": "\uD83D\uDE80" + }, + { + "label": "Humans in Space", + "value": 622, + "prefix": "", + "suffix": "", + "change": 4.8, + "icon": "\uD83E\uDDD1\u200D\uD83D\uDE80" + }, + { + "label": "Active Satellites", + "value": 10500, + "prefix": "", + "suffix": "", + "change": 32.1, + "icon": "\uD83D\uDCE1" + } + ] + }, + { + "id": "scene-4-nasa-budget", + "source": "", + "in_seconds": 16, + "out_seconds": 22, + "type": "line_chart", + "title": "NASA Budget (Billions USD, Inflation-Adjusted)", + "xLabel": "Decade", + "yLabel": "Budget ($B)", + "chartAnimation": "draw", + "showGrid": true, + "showMarkers": true, + "showLegend": false, + "chartColors": ["#F5A623", "#7C3AED"], + "chartSeries": [ + { + "label": "NASA Budget", + "data": [ + { "x": 1960, "y": 5.9 }, + { "x": 1965, "y": 49.4 }, + { "x": 1970, "y": 27.6 }, + { "x": 1975, "y": 19.1 }, + { "x": 1980, "y": 17.8 }, + { "x": 1985, "y": 18.5 }, + { "x": 1990, "y": 23.4 }, + { "x": 1995, "y": 22.1 }, + { "x": 2000, "y": 22.9 }, + { "x": 2005, "y": 24.3 }, + { "x": 2010, "y": 24.9 }, + { "x": 2015, "y": 25.2 }, + { "x": 2020, "y": 25.2 }, + { "x": 2025, "y": 25.4 } + ] + } + ] + }, + { + "id": "scene-5-missions", + "source": "", + "in_seconds": 22, + "out_seconds": 28, + "type": "bar_chart", + "title": "Orbital Launches by Organization (2024)", + "chartAnimation": "grow-up", + "showValues": true, + "chartColors": ["#3B82F6", "#F5A623", "#EF4444", "#10B981", "#8B5CF6"], + "chartData": [ + { "label": "SpaceX", "value": 96 }, + { "label": "CNSA", "value": 67 }, + { "label": "NASA", "value": 12 }, + { "label": "ESA", "value": 8 }, + { "label": "ISRO", "value": 7 } + ] + }, + { + "id": "scene-6-cost-comparison", + "source": "", + "in_seconds": 28, + "out_seconds": 33, + "type": "comparison", + "title": "The Cost Revolution", + "leftLabel": "Apollo Program (1969)", + "leftValue": "$257 Billion", + "rightLabel": "Falcon 9 Launch (2024)", + "rightValue": "$67 Million" + }, + { + "id": "scene-7-budget-pie", + "source": "", + "in_seconds": 33, + "out_seconds": 39, + "type": "pie_chart", + "title": "Where Global Space Budgets Go", + "donut": true, + "centerLabel": "Global", + "centerValue": "$103B", + "chartAnimation": "spin", + "chartData": [ + { "label": "Launch Vehicles", "value": 31 }, + { "label": "R&D", "value": 28 }, + { "label": "Crew & Life Support", "value": 17 }, + { "label": "Ground Operations", "value": 14 }, + { "label": "Deep Space Missions", "value": 10 } + ] + }, + { + "id": "scene-8-proxima", + "source": "", + "in_seconds": 39, + "out_seconds": 44, + "type": "stat_card", + "stat": "4.24 Light Years", + "subtitle": "Distance to Proxima Centauri — the nearest star beyond our Sun", + "accentColor": "#7C3AED", + "backgroundColor": "#0B0B2A" + }, + { + "id": "scene-9-quote", + "source": "", + "in_seconds": 44, + "out_seconds": 48, + "type": "callout", + "title": "Carl Sagan", + "text": "Somewhere, something incredible is waiting to be known.", + "callout_type": "quote" + }, + { + "id": "scene-10-closing", + "source": "", + "in_seconds": 48, + "out_seconds": 52, + "type": "text_card", + "text": "The cosmos is within us. We are made of star-stuff. We are a way for the universe to know itself.", + "fontSize": 36, + "color": "#FFFFFF", + "backgroundColor": "#070714" + } + ], + "overlays": [ + { + "id": "overlay-cosmos-section", + "type": "section_title", + "in_seconds": 5, + "out_seconds": 10, + "text": "THE COSMOS", + "subtitle": "Where it all began", + "accentColor": "#F5A623", + "position": "top-left" + }, + { + "id": "overlay-missions-section", + "type": "section_title", + "in_seconds": 16, + "out_seconds": 28, + "text": "THE MISSIONS", + "subtitle": "Six decades of reaching further", + "accentColor": "#3B82F6", + "position": "top-left" + }, + { + "id": "overlay-stat-cost-drop", + "type": "stat_reveal", + "in_seconds": 28, + "out_seconds": 33, + "text": "3,836x", + "subtitle": "cheaper per launch", + "accentColor": "#10B981", + "position": "bottom-right" + }, + { + "id": "overlay-future-section", + "type": "section_title", + "in_seconds": 33, + "out_seconds": 44, + "text": "THE FUTURE", + "subtitle": "What lies ahead", + "accentColor": "#7C3AED", + "position": "top-left" + }, + { + "id": "overlay-stat-budget", + "type": "stat_reveal", + "in_seconds": 22, + "out_seconds": 28, + "text": "190+", + "subtitle": "launches in 2024", + "accentColor": "#F5A623", + "position": "bottom-right" + }, + { + "id": "overlay-stat-proxima", + "type": "stat_reveal", + "in_seconds": 39, + "out_seconds": 44, + "text": "73,000", + "subtitle": "years at current speed", + "accentColor": "#EF4444", + "position": "bottom-right" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/public/demo-props/world-in-numbers.json b/remotion-composer/public/demo-props/world-in-numbers.json new file mode 100644 index 0000000..2b554d2 --- /dev/null +++ b/remotion-composer/public/demo-props/world-in-numbers.json @@ -0,0 +1,303 @@ +{ + "cuts": [ + { + "id": "scene-1-hero", + "source": "", + "in_seconds": 0, + "out_seconds": 4, + "type": "hero_title", + "text": "THE WORLD IN NUMBERS", + "heroSubtitle": "5 facts that will change how you see the planet" + }, + { + "id": "scene-2-kpi-grid", + "source": "", + "in_seconds": 4, + "out_seconds": 10, + "type": "kpi_grid", + "title": "Global Snapshot 2024", + "backgroundColor": "#0F172A", + "columns": 4, + "chartAnimation": "count-up", + "chartData": [ + { + "label": "World Population", + "value": 8.1, + "prefix": "", + "suffix": " Billion", + "change": 0.8, + "icon": "people" + }, + { + "label": "Internet Users", + "value": 5.5, + "prefix": "", + "suffix": " Billion", + "change": 3.2, + "icon": "globe" + }, + { + "label": "Languages Spoken", + "value": 7168, + "prefix": "", + "suffix": "", + "change": -0.5, + "icon": "chat" + }, + { + "label": "Countries", + "value": 195, + "prefix": "", + "suffix": "", + "change": 0, + "icon": "map" + } + ] + }, + { + "id": "scene-3-bar-chart", + "source": "", + "in_seconds": 10, + "out_seconds": 16, + "type": "bar_chart", + "title": "Daily Coffee Consumption by Country", + "backgroundColor": "#0F172A", + "chartAnimation": "grow-up", + "chartColors": [ + "#FF6B6B", + "#4ECDC4", + "#45B7D1", + "#FFA07A", + "#98D8C8", + "#F7DC6F" + ], + "chartData": [ + { + "label": "Finland", + "value": 4.3 + }, + { + "label": "Norway", + "value": 3.8 + }, + { + "label": "Netherlands", + "value": 3.4 + }, + { + "label": "Sweden", + "value": 3.2 + }, + { + "label": "Denmark", + "value": 3.0 + }, + { + "label": "USA", + "value": 2.1 + } + ] + }, + { + "id": "scene-4-pie-chart", + "source": "", + "in_seconds": 16, + "out_seconds": 22, + "type": "pie_chart", + "title": "Where Does the World's Fresh Water Go?", + "backgroundColor": "#0F172A", + "donut": true, + "centerLabel": "Fresh Water", + "centerValue": "3%", + "chartAnimation": "spin", + "chartData": [ + { + "label": "Agriculture", + "value": 70 + }, + { + "label": "Industry", + "value": 19 + }, + { + "label": "Domestic", + "value": 11 + } + ] + }, + { + "id": "scene-5-line-chart", + "source": "", + "in_seconds": 22, + "out_seconds": 28, + "type": "line_chart", + "title": "Global Internet Users (Billions)", + "backgroundColor": "#0F172A", + "xLabel": "Year", + "yLabel": "Users (Billions)", + "chartAnimation": "draw", + "chartSeries": [ + { + "label": "Mobile", + "data": [ + { + "x": 2015, + "y": 2.1 + }, + { + "x": 2016, + "y": 2.4 + }, + { + "x": 2017, + "y": 2.7 + }, + { + "x": 2018, + "y": 3.0 + }, + { + "x": 2019, + "y": 3.4 + }, + { + "x": 2020, + "y": 3.9 + }, + { + "x": 2021, + "y": 4.2 + }, + { + "x": 2022, + "y": 4.6 + }, + { + "x": 2023, + "y": 5.0 + }, + { + "x": 2024, + "y": 5.5 + } + ] + }, + { + "label": "Desktop", + "data": [ + { + "x": 2015, + "y": 1.8 + }, + { + "x": 2016, + "y": 1.9 + }, + { + "x": 2017, + "y": 1.9 + }, + { + "x": 2018, + "y": 1.8 + }, + { + "x": 2019, + "y": 1.7 + }, + { + "x": 2020, + "y": 1.7 + }, + { + "x": 2021, + "y": 1.6 + }, + { + "x": 2022, + "y": 1.5 + }, + { + "x": 2023, + "y": 1.4 + }, + { + "x": 2024, + "y": 1.3 + } + ] + } + ] + }, + { + "id": "scene-6-comparison", + "source": "", + "in_seconds": 28, + "out_seconds": 34, + "type": "comparison", + "title": "Our Planet's Surface", + "backgroundColor": "#0F172A", + "color": "#F8FAFC", + "leftLabel": "Land Area", + "leftValue": "149M km\u00b2", + "rightLabel": "Ocean Area", + "rightValue": "361M km\u00b2" + }, + { + "id": "scene-7-stat-card", + "source": "", + "in_seconds": 34, + "out_seconds": 40, + "type": "stat_card", + "stat": "4.6 Billion", + "subtitle": "Years until the sun expands to engulf Earth", + "accentColor": "#FF6B6B", + "backgroundColor": "#1A1A2E" + }, + { + "id": "scene-8-closing", + "source": "", + "in_seconds": 40, + "out_seconds": 45, + "type": "text_card", + "text": "Every number tells a story. What will you explore next?", + "fontSize": 32, + "color": "#F8FAFC", + "backgroundColor": "#0F172A" + } + ], + "overlays": [ + { + "id": "overlay-consumption", + "in_seconds": 10, + "out_seconds": 16, + "type": "section_title", + "text": "CONSUMPTION", + "subtitle": "How the world fuels itself", + "accentColor": "#FF6B6B", + "position": "top-left" + }, + { + "id": "overlay-resources", + "in_seconds": 16, + "out_seconds": 22, + "type": "section_title", + "text": "RESOURCES", + "subtitle": "The distribution of Earth's lifeblood", + "accentColor": "#4ECDC4", + "position": "top-left" + }, + { + "id": "overlay-connectivity", + "in_seconds": 22, + "out_seconds": 28, + "type": "section_title", + "text": "CONNECTIVITY", + "subtitle": "How the world connects", + "accentColor": "#45B7D1", + "position": "top-left" + } + ], + "captions": [], + "audio": {} +} diff --git a/remotion-composer/src/CinematicRenderer.tsx b/remotion-composer/src/CinematicRenderer.tsx index e73a676..c738a01 100644 --- a/remotion-composer/src/CinematicRenderer.tsx +++ b/remotion-composer/src/CinematicRenderer.tsx @@ -2,6 +2,7 @@ import React from "react"; import { loadFont } from "@remotion/google-fonts/SpaceGrotesk"; import { AbsoluteFill, + Audio, CalculateMetadataFunction, OffthreadVideo, Sequence, @@ -36,16 +37,24 @@ const toneGradient = (tone: CinematicTone) => { const SceneVideo: React.FC<{ scene: CinematicVideoScene }> = ({ scene }) => { const frame = useCurrentFrame(); const { durationInFrames, fps } = useVideoConfig(); - - const opacity = interpolate( - frame, - [0, 10, durationInFrames - 10, durationInFrames], - [0, 1, 1, 0], - { - extrapolateLeft: "clamp", - extrapolateRight: "clamp", - }, - ); + const fadeInFrames = scene.fadeInFrames ?? 10; + const fadeOutFrames = scene.fadeOutFrames ?? 10; + const fadeOutStart = Math.max(fadeInFrames, durationInFrames - fadeOutFrames); + const fadeInOpacity = + fadeInFrames === 0 + ? 1 + : interpolate(frame, [0, fadeInFrames], [0, 1], { + extrapolateLeft: "clamp", + extrapolateRight: "clamp", + }); + const fadeOutOpacity = + fadeOutFrames === 0 + ? 1 + : interpolate(frame, [fadeOutStart, durationInFrames], [1, 0], { + extrapolateLeft: "clamp", + extrapolateRight: "clamp", + }); + const opacity = Math.min(fadeInOpacity, fadeOutOpacity); const scale = interpolate(frame, [0, durationInFrames], [1.015, 1], { extrapolateLeft: "clamp", @@ -242,6 +251,59 @@ const TitleCard: React.FC<{ ); }; +const Soundtrack: React.FC<{ + src: string; + volume: number; + trimBeforeSeconds?: number; + trimAfterSeconds?: number; + fadeInSeconds: number; + fadeOutSeconds: number; +}> = ({ + src, + volume, + trimBeforeSeconds, + trimAfterSeconds, + fadeInSeconds, + fadeOutSeconds, +}) => { + const frame = useCurrentFrame(); + const { durationInFrames, fps } = useVideoConfig(); + + const fadeInFrames = Math.max(1, Math.round(fadeInSeconds * fps)); + const fadeOutFrames = Math.max(1, Math.round(fadeOutSeconds * fps)); + const trimBefore = + trimBeforeSeconds !== undefined + ? Math.round(trimBeforeSeconds * fps) + : undefined; + const trimAfter = + trimAfterSeconds !== undefined + ? Math.round(trimAfterSeconds * fps) + : undefined; + + const fadeIn = interpolate(frame, [0, fadeInFrames], [0, volume], { + extrapolateLeft: "clamp", + extrapolateRight: "clamp", + }); + const fadeOut = interpolate( + frame, + [durationInFrames - fadeOutFrames, durationInFrames], + [volume, 0], + { + extrapolateLeft: "clamp", + extrapolateRight: "clamp", + }, + ); + + return ( +