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.
This commit is contained in:
calesthio
+3
-1
@@ -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/
|
||||
|
||||
@@ -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.**
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.*
|
||||
@@ -6,122 +6,143 @@
|
||||
|
||||
<p align="center"><strong>The first open-source, agentic video production system.</strong></p>
|
||||
|
||||
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.
|
||||
<p align="center">
|
||||
<a href="#quick-start">Quick Start</a> ·
|
||||
<a href="#try-these-prompts">Try These Prompts</a> ·
|
||||
<a href="#pipelines">Pipelines</a> ·
|
||||
<a href="#how-it-works">How It Works</a> ·
|
||||
<a href="docs/PROVIDERS.md">Providers</a> ·
|
||||
<a href="AGENT_GUIDE.md">Agent Guide</a>
|
||||
</p>
|
||||
|
||||
No video editing experience required. No complex UI to learn. Just describe your vision in plain language.
|
||||
<p align="center">
|
||||
<a href="LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-blue.svg" alt="License"></a>
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
<div align="center">
|
||||
<video src="https://github.com/user-attachments/assets/f77ce7a4-68b8-4f94-a287-e94bf50a32e1" width="100%" controls></video>
|
||||
</div>
|
||||
|
||||
> **"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
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary><strong>Have a GPU? Unlock free local video generation</strong></summary>
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
## 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)
|
||||
|
||||
<details>
|
||||
<summary><strong>Video Generation — 12 providers</strong></summary>
|
||||
|
||||
| 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 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Image Generation — 8 providers</strong></summary>
|
||||
|
||||
| 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 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Text-to-Speech — 4 providers</strong></summary>
|
||||
|
||||
| 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 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Music, Sound & Post-Production</strong></summary>
|
||||
|
||||
**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 |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
## Style System
|
||||
|
||||
Style playbooks define the visual language for your productions:
|
||||
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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": {}
|
||||
}
|
||||
@@ -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 (
|
||||
<Audio
|
||||
src={src}
|
||||
trimBefore={trimBefore}
|
||||
trimAfter={trimAfter}
|
||||
volume={() => Math.min(fadeIn, fadeOut)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const calculateCinematicMetadata: CalculateMetadataFunction<CinematicRendererProps> =
|
||||
async ({ props }) => {
|
||||
const totalSeconds =
|
||||
@@ -264,9 +326,20 @@ export const CinematicRenderer: React.FC<CinematicRendererProps> = ({
|
||||
titleFontSize = 78,
|
||||
titleWidth = 1320,
|
||||
signalLineCount = 18,
|
||||
soundtrack,
|
||||
}) => {
|
||||
return (
|
||||
<AbsoluteFill style={{ backgroundColor: "#000000" }}>
|
||||
{soundtrack ? (
|
||||
<Soundtrack
|
||||
src={soundtrack.src}
|
||||
volume={soundtrack.volume ?? 0.45}
|
||||
trimBeforeSeconds={soundtrack.trimBeforeSeconds}
|
||||
trimAfterSeconds={soundtrack.trimAfterSeconds}
|
||||
fadeInSeconds={soundtrack.fadeInSeconds ?? 1.5}
|
||||
fadeOutSeconds={soundtrack.fadeOutSeconds ?? 2}
|
||||
/>
|
||||
) : null}
|
||||
{scenes.map((scene) => (
|
||||
<Sequence
|
||||
key={scene.id}
|
||||
|
||||
@@ -25,6 +25,11 @@ import { TextCard } from "./components/TextCard";
|
||||
import { StatCard } from "./components/StatCard";
|
||||
import { CalloutBox } from "./components/CalloutBox";
|
||||
import { ComparisonCard } from "./components/ComparisonCard";
|
||||
import { BarChart } from "./components/charts/BarChart";
|
||||
import { LineChart } from "./components/charts/LineChart";
|
||||
import { PieChart } from "./components/charts/PieChart";
|
||||
import { KPIGrid } from "./components/charts/KPIGrid";
|
||||
import { ProgressBar } from "./components/ProgressBar";
|
||||
import { CaptionOverlay, WordCaption } from "./components/CaptionOverlay";
|
||||
import { SectionTitle } from "./components/SectionTitle";
|
||||
import { StatReveal } from "./components/StatReveal";
|
||||
@@ -58,6 +63,34 @@ interface Cut {
|
||||
rightLabel?: string;
|
||||
leftValue?: string;
|
||||
rightValue?: string;
|
||||
// Chart props
|
||||
chartData?: any[];
|
||||
chartSeries?: any[];
|
||||
chartColors?: string[];
|
||||
chartAnimation?: string;
|
||||
donut?: boolean;
|
||||
centerLabel?: string;
|
||||
centerValue?: string;
|
||||
showGrid?: boolean;
|
||||
showValues?: boolean;
|
||||
showLegend?: boolean;
|
||||
showMarkers?: boolean;
|
||||
xLabel?: string;
|
||||
yLabel?: string;
|
||||
columns?: 2 | 3 | 4;
|
||||
// Progress bar props
|
||||
progress?: number;
|
||||
progressLabel?: string;
|
||||
progressColor?: string;
|
||||
progressAnimation?: string;
|
||||
progressSegments?: any[];
|
||||
// Hero title props (when used as scene, not overlay)
|
||||
heroSubtitle?: string;
|
||||
// Styling overrides
|
||||
backgroundColor?: string;
|
||||
color?: string;
|
||||
accentColor?: string;
|
||||
fontSize?: number;
|
||||
// Animation & transitions
|
||||
animation?: string;
|
||||
transition_in?: string;
|
||||
@@ -246,14 +279,36 @@ const VideoScene: React.FC<{ src: string; startFrom?: number }> = ({
|
||||
const SceneRenderer: React.FC<{ cut: Cut }> = ({ cut }) => {
|
||||
// Explicit component types
|
||||
if (cut.type === "text_card" && cut.text) {
|
||||
return <TextCard text={cut.text} />;
|
||||
return (
|
||||
<TextCard
|
||||
text={cut.text}
|
||||
fontSize={cut.fontSize}
|
||||
color={cut.color}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "stat_card" && cut.stat) {
|
||||
return <StatCard stat={cut.stat} subtitle={cut.subtitle} />;
|
||||
return (
|
||||
<StatCard
|
||||
stat={cut.stat}
|
||||
subtitle={cut.subtitle}
|
||||
accentColor={cut.accentColor}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "callout" && cut.text) {
|
||||
return (
|
||||
<CalloutBox text={cut.text} type={cut.callout_type} title={cut.title} />
|
||||
<CalloutBox
|
||||
text={cut.text}
|
||||
type={cut.callout_type}
|
||||
title={cut.title}
|
||||
borderColor={cut.accentColor}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
textColor={cut.color}
|
||||
containerBackgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (
|
||||
@@ -270,21 +325,128 @@ const SceneRenderer: React.FC<{ cut: Cut }> = ({ cut }) => {
|
||||
leftValue={cut.leftValue}
|
||||
rightValue={cut.rightValue}
|
||||
title={cut.title}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
textColor={cut.color}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "hero_title" && cut.text) {
|
||||
return <HeroTitle title={cut.text} subtitle={cut.heroSubtitle || cut.subtitle} />;
|
||||
}
|
||||
|
||||
// --- Chart types ---
|
||||
if (cut.type === "bar_chart" && cut.chartData) {
|
||||
return (
|
||||
<BarChart
|
||||
data={cut.chartData}
|
||||
title={cut.title}
|
||||
colors={cut.chartColors}
|
||||
animationStyle={(cut.chartAnimation as any) || "grow-up"}
|
||||
showGrid={cut.showGrid}
|
||||
showValues={cut.showValues}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "line_chart" && cut.chartSeries) {
|
||||
return (
|
||||
<LineChart
|
||||
series={cut.chartSeries}
|
||||
title={cut.title}
|
||||
colors={cut.chartColors}
|
||||
animationStyle={(cut.chartAnimation as any) || "draw"}
|
||||
showGrid={cut.showGrid}
|
||||
showMarkers={cut.showMarkers}
|
||||
showLegend={cut.showLegend}
|
||||
xLabel={cut.xLabel}
|
||||
yLabel={cut.yLabel}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "pie_chart" && cut.chartData) {
|
||||
return (
|
||||
<PieChart
|
||||
data={cut.chartData}
|
||||
title={cut.title}
|
||||
colors={cut.chartColors}
|
||||
animationStyle={(cut.chartAnimation as any) || "expand"}
|
||||
donut={cut.donut}
|
||||
centerLabel={cut.centerLabel}
|
||||
centerValue={cut.centerValue}
|
||||
showLegend={cut.showLegend}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "kpi_grid" && cut.chartData) {
|
||||
return (
|
||||
<KPIGrid
|
||||
metrics={cut.chartData}
|
||||
title={cut.title}
|
||||
columns={cut.columns}
|
||||
colors={cut.chartColors}
|
||||
animationStyle={(cut.chartAnimation as any) || "count-up"}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (cut.type === "progress_bar" && cut.progress !== undefined) {
|
||||
return (
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
backgroundColor: cut.backgroundColor || "#FFFFFF",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "80px 120px",
|
||||
}}
|
||||
>
|
||||
{cut.title && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 120,
|
||||
fontSize: 48,
|
||||
fontWeight: 700,
|
||||
color: "#1F2937",
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{cut.title}
|
||||
</div>
|
||||
)}
|
||||
<ProgressBar
|
||||
progress={cut.progress}
|
||||
label={cut.progressLabel}
|
||||
color={cut.progressColor || cut.accentColor}
|
||||
animationStyle={(cut.progressAnimation as any) || "fill"}
|
||||
segments={cut.progressSegments}
|
||||
backgroundColor={cut.backgroundColor}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Media types (image / video fallback) ---
|
||||
const animation = cut.animation || cut.transform?.animation;
|
||||
|
||||
if (isImage(cut.source)) {
|
||||
if (cut.source && isImage(cut.source)) {
|
||||
return <ImageScene src={cut.source} animation={animation} />;
|
||||
}
|
||||
|
||||
if (isVideo(cut.source)) {
|
||||
if (cut.source && isVideo(cut.source)) {
|
||||
return <VideoScene src={cut.source} startFrom={cut.in_seconds} />;
|
||||
}
|
||||
|
||||
return <ImageScene src={cut.source} animation={animation} />;
|
||||
// Final fallback — try as image if source exists, otherwise show text_card
|
||||
if (cut.source) {
|
||||
return <ImageScene src={cut.source} animation={animation} />;
|
||||
}
|
||||
|
||||
// No source, no type — render as text card with cut id as fallback
|
||||
return <TextCard text={cut.text || cut.id} />;
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
CinematicRenderer,
|
||||
calculateCinematicMetadata,
|
||||
} from "./CinematicRenderer";
|
||||
import { signalFromTomorrowWithMusicFixture } from "./cinematic/fixtures";
|
||||
|
||||
const calculateMetadata: CalculateMetadataFunction<ExplainerProps> = async ({
|
||||
props,
|
||||
@@ -50,6 +51,16 @@ export const Root: React.FC = () => {
|
||||
}}
|
||||
calculateMetadata={calculateCinematicMetadata}
|
||||
/>
|
||||
<Composition
|
||||
id="SignalFromTomorrowWithMusic"
|
||||
component={CinematicRenderer}
|
||||
durationInFrames={30 * 30}
|
||||
fps={30}
|
||||
width={1920}
|
||||
height={1080}
|
||||
defaultProps={signalFromTomorrowWithMusicFixture}
|
||||
calculateMetadata={calculateCinematicMetadata}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { staticFile } from "remotion";
|
||||
import { CinematicRendererProps } from "./types";
|
||||
|
||||
export const signalFromTomorrowWithMusicFixture: CinematicRendererProps = {
|
||||
titleFontSize: 78,
|
||||
titleWidth: 1320,
|
||||
signalLineCount: 18,
|
||||
soundtrack: {
|
||||
src: staticFile(
|
||||
"music/signal-from-tomorrow/cinematic_time_hans_zimmer_style.mp3",
|
||||
),
|
||||
volume: 0.42,
|
||||
fadeInSeconds: 1.5,
|
||||
fadeOutSeconds: 2.5,
|
||||
},
|
||||
scenes: [
|
||||
{
|
||||
id: "sc1",
|
||||
kind: "video",
|
||||
startSeconds: 0,
|
||||
durationSeconds: 4,
|
||||
src: staticFile("video/signal-from-tomorrow/sample_observatory_veo31_ref.mp4"),
|
||||
tone: "cold",
|
||||
trimBeforeSeconds: 1,
|
||||
fadeInFrames: 0,
|
||||
},
|
||||
{
|
||||
id: "sc2",
|
||||
kind: "video",
|
||||
startSeconds: 4,
|
||||
durationSeconds: 4,
|
||||
src: staticFile(
|
||||
"video/signal-from-tomorrow/sc2_mission_control_veo31_ref_8s.mp4",
|
||||
),
|
||||
tone: "steel",
|
||||
},
|
||||
{
|
||||
id: "sc3",
|
||||
kind: "title",
|
||||
startSeconds: 8,
|
||||
durationSeconds: 3,
|
||||
text: "YESTERDAY, THEY LAUNCHED.",
|
||||
accent: "#89d7ff",
|
||||
intensity: 1,
|
||||
},
|
||||
{
|
||||
id: "sc4",
|
||||
kind: "video",
|
||||
startSeconds: 11,
|
||||
durationSeconds: 7,
|
||||
src: staticFile("video/signal-from-tomorrow/sc4_launch_departure_veo31_ref.mp4"),
|
||||
tone: "cold",
|
||||
},
|
||||
{
|
||||
id: "sc5",
|
||||
kind: "title",
|
||||
startSeconds: 18,
|
||||
durationSeconds: 3,
|
||||
text: "THE SIGNAL CAME FROM EARTH.",
|
||||
accent: "#a6e6ff",
|
||||
intensity: 1.15,
|
||||
},
|
||||
{
|
||||
id: "sc6",
|
||||
kind: "video",
|
||||
startSeconds: 21,
|
||||
durationSeconds: 6,
|
||||
src: staticFile(
|
||||
"video/signal-from-tomorrow/sc6_orbital_paradox_veo31_ref_8s.mp4",
|
||||
),
|
||||
tone: "void",
|
||||
},
|
||||
{
|
||||
id: "sc7",
|
||||
kind: "title",
|
||||
startSeconds: 27,
|
||||
durationSeconds: 3,
|
||||
text: "SIGNAL FROM TOMORROW",
|
||||
accent: "#d6f1ff",
|
||||
intensity: 0.9,
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -13,6 +13,8 @@ export interface CinematicVideoScene extends CinematicBaseScene {
|
||||
trimBeforeSeconds?: number;
|
||||
trimAfterSeconds?: number;
|
||||
filter?: string;
|
||||
fadeInFrames?: number;
|
||||
fadeOutFrames?: number;
|
||||
}
|
||||
|
||||
export interface CinematicTitleScene extends CinematicBaseScene {
|
||||
@@ -24,10 +26,20 @@ export interface CinematicTitleScene extends CinematicBaseScene {
|
||||
|
||||
export type CinematicScene = CinematicVideoScene | CinematicTitleScene;
|
||||
|
||||
export interface CinematicSoundtrack {
|
||||
src: string;
|
||||
volume?: number;
|
||||
trimBeforeSeconds?: number;
|
||||
trimAfterSeconds?: number;
|
||||
fadeInSeconds?: number;
|
||||
fadeOutSeconds?: number;
|
||||
}
|
||||
|
||||
export interface CinematicRendererProps {
|
||||
[key: string]: unknown;
|
||||
scenes: CinematicScene[];
|
||||
titleFontSize?: number;
|
||||
titleWidth?: number;
|
||||
signalLineCount?: number;
|
||||
soundtrack?: CinematicSoundtrack;
|
||||
}
|
||||
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
#!/usr/bin/env bash
|
||||
# render-demo.sh — Render zero-key demo videos using only Remotion components
|
||||
# No API keys, no external services, no GPU required.
|
||||
#
|
||||
# Usage:
|
||||
# ./render-demo.sh # Render all demos
|
||||
# ./render-demo.sh world-in-numbers # Render one specific demo
|
||||
# ./render-demo.sh --list # List available demos
|
||||
#
|
||||
# Prerequisites: Node.js 18+, npm install in remotion-composer/
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
COMPOSER_DIR="$SCRIPT_DIR/remotion-composer"
|
||||
PROPS_DIR="$COMPOSER_DIR/public/demo-props"
|
||||
OUTPUT_DIR="$SCRIPT_DIR/projects/demos/renders"
|
||||
|
||||
# Available demos
|
||||
declare -A DEMOS=(
|
||||
["world-in-numbers"]="The World in Numbers — 45s data visualization showcase"
|
||||
["code-to-screen"]="From Code to Screen — 50s developer education explainer"
|
||||
["focusflow-pitch"]="FocusFlow Pitch — 40s startup pitch deck video"
|
||||
)
|
||||
|
||||
# Colors
|
||||
GREEN='\033[0;32m'
|
||||
CYAN='\033[0;36m'
|
||||
YELLOW='\033[1;33m'
|
||||
NC='\033[0m'
|
||||
|
||||
list_demos() {
|
||||
echo ""
|
||||
echo -e "${CYAN}Available zero-key demos:${NC}"
|
||||
echo ""
|
||||
for name in "${!DEMOS[@]}"; do
|
||||
echo -e " ${GREEN}$name${NC} ${DEMOS[$name]}"
|
||||
done
|
||||
echo ""
|
||||
echo "Usage: ./render-demo.sh [demo-name]"
|
||||
echo " ./render-demo.sh (renders all)"
|
||||
echo ""
|
||||
}
|
||||
|
||||
render_demo() {
|
||||
local name="$1"
|
||||
local props_file="$PROPS_DIR/$name.json"
|
||||
local output_file="$OUTPUT_DIR/$name.mp4"
|
||||
|
||||
if [ ! -f "$props_file" ]; then
|
||||
echo "Error: Props file not found: $props_file"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
mkdir -p "$OUTPUT_DIR"
|
||||
|
||||
echo ""
|
||||
echo -e "${CYAN}Rendering:${NC} ${DEMOS[$name]:-$name}"
|
||||
echo -e "${CYAN}Props:${NC} $props_file"
|
||||
echo -e "${CYAN}Output:${NC} $output_file"
|
||||
echo ""
|
||||
|
||||
cd "$COMPOSER_DIR"
|
||||
npx remotion render src/index.tsx Explainer "$output_file" \
|
||||
--props "$props_file" \
|
||||
--codec h264
|
||||
|
||||
if [ -f "$output_file" ]; then
|
||||
local size=$(du -h "$output_file" | cut -f1)
|
||||
echo ""
|
||||
echo -e "${GREEN}Done!${NC} $output_file ($size)"
|
||||
else
|
||||
echo "Render may have failed — check output above."
|
||||
fi
|
||||
}
|
||||
|
||||
# Main
|
||||
if [ "${1:-}" = "--list" ] || [ "${1:-}" = "-l" ]; then
|
||||
list_demos
|
||||
exit 0
|
||||
fi
|
||||
|
||||
if [ "${1:-}" = "--help" ] || [ "${1:-}" = "-h" ]; then
|
||||
echo "render-demo.sh — Render zero-key demo videos"
|
||||
echo ""
|
||||
echo "These demos use ONLY Remotion components (animated charts, text cards,"
|
||||
echo "stat reveals, comparisons) — no API keys, no images, no external services."
|
||||
echo ""
|
||||
list_demos
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Check prerequisites
|
||||
if ! command -v node &> /dev/null; then
|
||||
echo "Error: Node.js is required. Install from https://nodejs.org/"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ ! -d "$COMPOSER_DIR/node_modules" ]; then
|
||||
echo -e "${YELLOW}Installing Remotion dependencies...${NC}"
|
||||
cd "$COMPOSER_DIR" && npm install
|
||||
fi
|
||||
|
||||
if [ -n "${1:-}" ]; then
|
||||
# Render specific demo
|
||||
if [ -z "${DEMOS[$1]+x}" ]; then
|
||||
echo "Unknown demo: $1"
|
||||
list_demos
|
||||
exit 1
|
||||
fi
|
||||
render_demo "$1"
|
||||
else
|
||||
# Render all demos
|
||||
echo -e "${CYAN}Rendering all zero-key demos...${NC}"
|
||||
for name in world-in-numbers code-to-screen focusflow-pitch; do
|
||||
render_demo "$name"
|
||||
done
|
||||
echo ""
|
||||
echo -e "${GREEN}All demos rendered!${NC} Check $OUTPUT_DIR/"
|
||||
fi
|
||||
@@ -271,6 +271,7 @@ Cross-cutting skills that apply to all pipelines:
|
||||
|
||||
| Skill | File | Purpose |
|
||||
|-------|------|---------|
|
||||
| Onboarding | `meta/onboarding.md` | First-interaction greeting, capability discovery, starter prompts |
|
||||
| Reviewer | `meta/reviewer.md` | Self-review protocol after every stage |
|
||||
| Checkpoint Protocol | `meta/checkpoint-protocol.md` | When/how to checkpoint and request human approval |
|
||||
| Skill Creator | `meta/skill-creator.md` | Dynamically create new skills during pipeline runs |
|
||||
|
||||
+60
-2
@@ -27,8 +27,66 @@ stages, how artifacts flow in, and how renders are triggered.
|
||||
| Talking-head (video-only cuts) | FFmpeg | No images/animations needed |
|
||||
|
||||
**Note:** The `render` operation auto-routes — if any cut contains images,
|
||||
animations, transitions, or component types (text_card, stat_card, etc.),
|
||||
it delegates to Remotion automatically. No need to manually select backend.
|
||||
animations, transitions, or component types, it delegates to Remotion
|
||||
automatically. No need to manually select backend.
|
||||
|
||||
## Supported Scene Types (Cut Types)
|
||||
|
||||
The Explainer composition supports the following cut types:
|
||||
|
||||
| Type | Props Required | Best For |
|
||||
|------|---------------|----------|
|
||||
| `text_card` | `text` | Statements, titles, closing messages |
|
||||
| `stat_card` | `stat`, optional `subtitle`, `accentColor` | Big numbers, impactful metrics |
|
||||
| `hero_title` | `text`, optional `heroSubtitle` | Opening titles, dramatic reveals |
|
||||
| `callout` | `text`, optional `title`, `callout_type` (info/warning/tip/quote) | Tips, quotes, important notes |
|
||||
| `comparison` | `leftLabel`, `rightLabel`, `leftValue`, `rightValue` | Before/after, A/B, versus |
|
||||
| `bar_chart` | `chartData` [{label, value}], optional `title`, `chartAnimation` | Category comparisons, rankings |
|
||||
| `line_chart` | `chartSeries` [{label, data: [{x,y}]}], optional `title` | Trends, time series, growth |
|
||||
| `pie_chart` | `chartData` [{label, value}], optional `donut`, `centerLabel` | Proportions, breakdowns |
|
||||
| `kpi_grid` | `chartData` [{label, value, prefix, suffix, change, icon}] | Dashboards, traction metrics |
|
||||
| `progress_bar` | `progress` (0-100), optional `progressSegments` | Journey viz, completion, stacked metrics |
|
||||
|
||||
**Chart animations:** `grow-up`, `slide-in`, `pop` (bar), `draw`, `fade-in` (line), `spin`, `expand`, `sequential` (pie), `count-up`, `pop`, `cascade` (kpi)
|
||||
|
||||
**Zero-key video strategy:** When no image or video generation is available, build
|
||||
entire videos from these component types. A well-composed sequence of hero_title →
|
||||
kpi_grid → bar_chart → comparison → stat_card → text_card produces a polished,
|
||||
professional video with zero external dependencies.
|
||||
|
||||
### The Proven Formula for Zero-Key Videos
|
||||
|
||||
These rules were discovered through systematic render testing and produce cinematic results:
|
||||
|
||||
**1. ALL-DARK BACKGROUNDS (mandatory).** Set `backgroundColor: "#0F172A"` on EVERY scene.
|
||||
This prevents jarring white↔dark flash transitions and makes chart colors pop dramatically.
|
||||
Dark backgrounds transform basic charts into cinematic data visualization.
|
||||
|
||||
**2. Flat props format.** All scene properties go at the TOP LEVEL of the cut object
|
||||
(e.g., `cut.text`, `cut.chartData`), NOT nested under a `props` key.
|
||||
|
||||
**3. KPI Grid data rules:**
|
||||
- `value` must be a small, human-readable number. The component auto-formats ≥1M→"XM", ≥1K→"XK".
|
||||
For "8.1 Billion" use `value: 8.1, suffix: " Billion"`. Never use raw huge numbers with a suffix.
|
||||
- `change` must be a NUMBER (e.g., `3.2`), not a string (e.g., NOT `"+3.2%"`).
|
||||
|
||||
**4. Comparison and Callout theming:**
|
||||
- `comparison` accepts `backgroundColor` and `color` (text color) for dark themes.
|
||||
- `callout` accepts `backgroundColor` which sets both the container and card background.
|
||||
|
||||
**5. Overlays add polish.**
|
||||
- `section_title` overlays group scenes narratively ("THE CRISIS", "THE DATA").
|
||||
- `stat_reveal` overlays float dramatic numbers over chart scenes (e.g., "10x" in corner).
|
||||
|
||||
**6. Scene pacing:** 4-6 seconds per scene, 8-10 scenes for a 45-50s video. Give chart
|
||||
animations at least 4 seconds to complete. Hero title needs only 4 seconds.
|
||||
|
||||
**7. Color palette cohesion.** Pick 4-5 accent colors that relate to the topic and use
|
||||
them consistently across charts, overlays, and accents. Use the same chartColors array
|
||||
across bar/pie/line scenes for visual unity.
|
||||
|
||||
**Reference compositions:** See `remotion-composer/public/demo-props/climate-dashboard.json`
|
||||
as the gold standard, and other demo files for additional patterns.
|
||||
|
||||
## Architecture
|
||||
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
# Onboarding — Meta Skill
|
||||
|
||||
## When to Use
|
||||
|
||||
On the **very first interaction** with a user in a new session when the user has not yet specified a concrete production request — or when their request is vague ("make me a video", "what can you do?", "help me create something").
|
||||
|
||||
Skip this skill when the user arrives with a specific, actionable request like "Make a 60-second explainer about black holes." In that case, go directly to Rule Zero (identify pipeline → preflight → execute). The user already knows what they want.
|
||||
|
||||
**This skill transforms the agent from a passive executor into a creative partner.** Most users don't know what's possible. Your job is to show them — fast, clearly, and with copy-paste prompts they can try right now.
|
||||
|
||||
## Protocol
|
||||
|
||||
### Step 1: Run Preflight Discovery
|
||||
|
||||
Before saying anything creative, know what you're working with:
|
||||
|
||||
```bash
|
||||
python -c "
|
||||
from tools.tool_registry import registry
|
||||
import json
|
||||
registry.discover()
|
||||
envelope = registry.support_envelope()
|
||||
menu = registry.provider_menu()
|
||||
print('=== ENVELOPE ===')
|
||||
print(json.dumps(envelope, indent=2))
|
||||
print('=== MENU ===')
|
||||
print(json.dumps(menu, indent=2))
|
||||
"
|
||||
```
|
||||
|
||||
Parse the output into three buckets:
|
||||
|
||||
1. **Available** — tools with `status: AVAILABLE`
|
||||
2. **Quick unlocks** — tools with `status: UNAVAILABLE` whose `install_instructions` reference an env var (1-minute fixes)
|
||||
3. **Hardware unlocks** — tools requiring GPU or local model downloads
|
||||
|
||||
### Step 2: Determine the User's Setup Tier
|
||||
|
||||
Based on discovery, classify the setup:
|
||||
|
||||
| Tier | What's Available | Best Pipelines |
|
||||
|------|-----------------|----------------|
|
||||
| **Zero-key** | Piper TTS + Pexels/Pixabay stock (if keys added) + Remotion + FFmpeg | Animated Explainer (stock visuals + free narration) |
|
||||
| **Starter** | One image gen provider (e.g., FLUX via FAL_KEY) + free TTS + Remotion | Animated Explainer, Animation (AI-generated visuals) |
|
||||
| **Standard** | Image gen + TTS + music gen | Animated Explainer, Animation, Screen Demo, Hybrid |
|
||||
| **Full** | Video gen + image gen + premium TTS + music | All pipelines including Cinematic, Avatar, Talking Head |
|
||||
| **Full + GPU** | Cloud APIs + local video gen models | All pipelines with free local fallbacks |
|
||||
|
||||
### Step 3: Greet and Orient
|
||||
|
||||
Present a **short, friendly capability summary**. Do NOT dump the raw provider menu. Instead, translate it into plain language.
|
||||
|
||||
**Template (adapt to actual discovery results):**
|
||||
|
||||
---
|
||||
|
||||
**Welcome to OpenMontage!** I'm your video production agent. Here's what I can do with your current setup:
|
||||
|
||||
**Ready to go:**
|
||||
- [List 2-4 key capabilities in plain language, e.g., "Generate narration with free offline TTS (Piper)", "Create animated videos with spring transitions, captions, and charts (Remotion)", "Stock footage and images from Pexels"]
|
||||
|
||||
**Available pipelines:** [List the pipelines that work with their setup, with one-line descriptions]
|
||||
|
||||
**Quick upgrades:** [If applicable — "Add `FAL_KEY` to your `.env` to unlock AI-generated images (FLUX) and video (Veo, Kling, MiniMax) — one key, five tools."]
|
||||
|
||||
---
|
||||
|
||||
**Rules for this presentation:**
|
||||
- Lead with what WORKS, not what's missing. The user should feel empowered, not inadequate.
|
||||
- Keep it to 8-12 lines max. Don't overwhelm.
|
||||
- Mention at most 2 quick-unlock suggestions. Don't nag about every missing key.
|
||||
- Read actual `install_instructions` from the registry — do not hardcode provider names or key names.
|
||||
|
||||
### Step 4: Offer Starter Prompts
|
||||
|
||||
Based on the user's tier, present **3 ready-to-use prompts** they can copy right now. These should be prompts that will work well with their specific setup and produce impressive results.
|
||||
|
||||
**Zero-key prompts:**
|
||||
|
||||
> **Try this now:** "Make a 45-second animated explainer about why the sky is blue"
|
||||
>
|
||||
> This will research the topic, write a script, find stock visuals, generate narration with Piper, and compose an animated video with transitions and captions — all free.
|
||||
|
||||
> **Also try:** "Create a 60-second data-driven video about coffee consumption around the world"
|
||||
|
||||
> **Or:** "Make a short explainer about how the internet works, with narration and animated captions"
|
||||
|
||||
**Starter-tier prompts (image gen available):**
|
||||
|
||||
> **Try this:** "Create an animated explainer about how CRISPR gene editing works, with AI-generated visuals"
|
||||
>
|
||||
> I'll use FLUX to generate custom images for each scene — much more visually striking than stock.
|
||||
|
||||
> **Also try:** "Make a product launch teaser for a fictional smart water bottle called AquaPulse"
|
||||
|
||||
> **Or:** "Build a 90-second explainer about the psychology of color in marketing"
|
||||
|
||||
**Full-tier prompts (video gen available):**
|
||||
|
||||
> **Try this:** "Create a cinematic 30-second trailer for a sci-fi concept: humanity receives a warning from 1000 years in the future"
|
||||
>
|
||||
> I'll generate actual motion video clips, compose a soundtrack, and deliver a finished cinematic trailer.
|
||||
|
||||
> **Also try:** "Make a 60-second avatar spokesperson video announcing a company rebrand"
|
||||
|
||||
> **Or:** "Create a 90-second animated explainer about quantum computing for middle school students, with a fun narrator voice and custom soundtrack"
|
||||
|
||||
**Rules for prompt suggestions:**
|
||||
- Present exactly 3 prompts.
|
||||
- The first prompt should be the most impressive thing their setup can produce.
|
||||
- Each prompt should target a different pipeline or style.
|
||||
- Include a brief note explaining what makes this prompt a good fit for their setup.
|
||||
- Use blockquote formatting so prompts are visually distinct and easy to copy.
|
||||
|
||||
### Step 5: Explain the Workflow (Briefly)
|
||||
|
||||
After prompts, give a 2-3 sentence summary of what happens when they start:
|
||||
|
||||
"When you give me a prompt, I'll first research the topic with live web searches, then present you with concept options and cost estimates. You pick your favorite, and I'll produce the video stage by stage — asking for your approval at each creative decision. The final video lands in `projects/<name>/renders/`."
|
||||
|
||||
Do NOT explain the full architecture, three-layer knowledge system, or pipeline internals here. That's for the curious — point them to `AGENT_GUIDE.md` if they want to go deeper.
|
||||
|
||||
### Step 6: Handle Follow-Up Questions
|
||||
|
||||
Common questions and how to respond:
|
||||
|
||||
**"What does it cost?"**
|
||||
- Zero-key path: $0
|
||||
- With FAL_KEY: typically $0.30–$1.50 per video depending on image count
|
||||
- Full setup: $1–$3 for most videos
|
||||
- Always: "I'll show you exact cost estimates before spending anything."
|
||||
|
||||
**"Can you make [specific type]?"**
|
||||
- Match to a pipeline. If it fits, say which pipeline and what tools you'd use.
|
||||
- If it doesn't fit any pipeline, be honest — suggest the closest match and explain what would be different.
|
||||
|
||||
**"How long does it take?"**
|
||||
- Explainer (zero-key): 5-15 minutes
|
||||
- Explainer (with image gen): 10-20 minutes
|
||||
- Cinematic (with video gen): 20-40 minutes
|
||||
- "Most of the time is asset generation. The research and scripting stages are fast."
|
||||
|
||||
**"I just want to test it quickly"**
|
||||
- Suggest the shortest zero-key prompt: "Try: 'Make a 30-second explainer about why leaves change color.' It'll use free tools and finish in about 5 minutes."
|
||||
|
||||
**"Show me what you can do"**
|
||||
- Point to the demo video in the README, then offer the starter prompts from Step 4.
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
- **Don't dump the raw JSON** from `support_envelope()` or `provider_menu()` on the user. Translate it into plain language.
|
||||
- **Don't list every tool.** Group by capability ("I can generate images with FLUX" not "I have flux_image, google_imagen, openai_image, recraft_image...").
|
||||
- **Don't explain the architecture** unless asked. "Agent-first, instruction-driven" is interesting to developers, but the user came to make a video, not study the codebase.
|
||||
- **Don't apologize for missing capabilities.** Frame as "here's what you have" and optionally "here's a quick upgrade." Never "unfortunately you don't have..."
|
||||
- **Don't skip straight to production** if the user seems uncertain or exploratory. Take 30 seconds to orient them — it saves 10 minutes of confusion later.
|
||||
- **Don't suggest prompts that require tools the user doesn't have.** Every prompt must be achievable with their current setup. Mark any that need specific keys clearly.
|
||||
@@ -84,6 +84,13 @@ If using Remotion for animated segments:
|
||||
2. Call `video_compose` with `operation: "remotion_render"` for animated segments
|
||||
3. Assemble Remotion outputs with remaining segments via FFmpeg
|
||||
|
||||
**Zero-key Remotion render (component-only videos):**
|
||||
When all scenes are Remotion component types (hero_title, stat_card, bar_chart, line_chart,
|
||||
pie_chart, kpi_grid, comparison, callout, progress_bar, text_card), render the entire video
|
||||
as a single Remotion composition using the Explainer entry point. No FFmpeg assembly needed.
|
||||
The edit_decisions cuts array maps directly to Remotion props. See `skills/core/remotion.md`
|
||||
for the proven formula — especially the all-dark-background rule for visual consistency.
|
||||
|
||||
### Step 5: Audio Post-Processing
|
||||
|
||||
Call the `audio_mixer` tool to:
|
||||
|
||||
@@ -67,15 +67,25 @@ Transform each script section into 1-3 visual scenes. Each scene is a distinct v
|
||||
|
||||
| Type | Best For | Available Tools | Duration Guidance |
|
||||
|------|----------|-----------------|-------------------|
|
||||
| `animation` | Concepts needing motion (data flow, transformations, math) | Remotion, Manim | 4-10s |
|
||||
| `diagram` | Processes, architecture, relationships | `diagram_gen` (Mermaid), `image_selector` (stylized) | 4-8s |
|
||||
| `text_card` | Key terms, definitions, statistics, quotes | Remotion TextCard component | 3-5s |
|
||||
| `hero_title` | Opening titles, dramatic reveals | Remotion HeroTitle (cyan first word, animated underline) | 3-5s |
|
||||
| `stat_card` | Big dramatic numbers, impactful metrics | Remotion StatCard (large stat + subtitle) | 4-6s |
|
||||
| `bar_chart` | Category comparisons, rankings | Remotion BarChart (animated grow-up/slide-in/pop) | 5-7s |
|
||||
| `line_chart` | Trends, time series, growth curves | Remotion LineChart (draw/fade animation, multi-series) | 5-7s |
|
||||
| `pie_chart` | Proportions, breakdowns, distributions | Remotion PieChart (donut mode, center label, spin/expand) | 5-7s |
|
||||
| `kpi_grid` | Dashboards, traction metrics, at-a-glance data | Remotion KPIGrid (2-4 columns, count-up/pop/cascade) | 5-7s |
|
||||
| `comparison` | Before/after, A/B, versus comparisons | Remotion ComparisonCard (dual-value with divider) | 4-6s |
|
||||
| `callout` | Expert quotes, tips, warnings, important notes | Remotion CalloutBox (info/warning/tip/quote types) | 4-6s |
|
||||
| `progress_bar` | Journey visualization, completion, stacked metrics | Remotion ProgressBar (fill/pulse/step animations) | 4-6s |
|
||||
| `text_card` | Statements, closing messages, key terms | Remotion TextCard (centered, spring animation) | 3-5s |
|
||||
| `animation` | Concepts needing motion (data flow, math) | Remotion, Manim | 4-10s |
|
||||
| `diagram` | Processes, architecture, relationships | `diagram_gen` (Mermaid), `image_selector` | 4-8s |
|
||||
| `generated` | Illustrations, metaphors, real-world imagery | `image_selector` (FLUX/DALL-E) | 3-6s |
|
||||
| `talking_head` | AI avatar speaking (if HeyGen available) | HeyGen tools | 5-15s |
|
||||
| `broll` | Context, real-world examples | Stock or generated footage | 3-6s |
|
||||
| `transition` | Dedicated transition moment between topics | Remotion transition | 1-2s |
|
||||
| `screen_recording` | Code demos, UI walkthroughs | Recorded or simulated | 5-15s |
|
||||
|
||||
**Zero-key scene selection:** When no image/video generation is available, prefer `hero_title`, `stat_card`, `bar_chart`, `line_chart`, `pie_chart`, `kpi_grid`, `comparison`, `callout`, `progress_bar`, and `text_card`. These render entirely from Remotion components with zero external dependencies and produce professional, animated results. See `skills/core/remotion.md` for the proven formula (all-dark backgrounds, KPI data formatting rules, overlay techniques).
|
||||
|
||||
### Step 4: Apply the Visual Technique Library
|
||||
|
||||
These are proven patterns for explainer visuals. Reference them by name in scene descriptions:
|
||||
@@ -91,14 +101,20 @@ Show the abstract concept alongside its real-world analogy. Split screen or side
|
||||
- Example: "Left: actual vector space with dots. Right: a library with books sorted by topic."
|
||||
|
||||
**Stat Card Punch**
|
||||
Full-screen number or comparison. Appears with impact animation (scale up, slight bounce). Hold for 2-3 seconds.
|
||||
- Tools: Remotion TextCard component
|
||||
- Example: "1ms" in large text, then smaller text below: "vs 500ms with traditional search"
|
||||
Full-screen number with impact animation (scale up, slight bounce). Use `stat_card` type with a dark background and bold accent color. Hold for 4-5 seconds.
|
||||
- Tools: Remotion StatCard component
|
||||
- Example: stat="1ms", subtitle="vs 500ms with traditional search", accentColor="#22D3EE"
|
||||
|
||||
**Data Dashboard Sequence**
|
||||
A series of data visualization scenes that tell a story through numbers. Start with a KPI overview, then drill into specific charts. Use section_title overlays to group related data. This pattern works with zero external tools.
|
||||
- Tools: Remotion chart components (bar_chart, line_chart, pie_chart, kpi_grid)
|
||||
- Example: kpi_grid (4 key stats) → bar_chart (breakdown) → line_chart (trend) → pie_chart (distribution)
|
||||
- Always use dark backgrounds (`backgroundColor: "#0F172A"`) for cinematic feel.
|
||||
|
||||
**Before/After Split**
|
||||
Show the problem, then the solution. Can be sequential (problem → transition → solution) or split-screen.
|
||||
- Tools: `image_selector` for both states
|
||||
- Example: "Before: SQL query scanning millions of rows (slow). After: vector search finding nearest neighbors (fast)."
|
||||
Show the problem, then the solution using `comparison` type. The comparison card shows dual values side-by-side with animated entrance.
|
||||
- Tools: Remotion ComparisonCard component
|
||||
- Example: leftLabel="Before", leftValue="500ms", rightLabel="After", rightValue="1ms"
|
||||
|
||||
**Timeline Progression**
|
||||
Left-to-right or top-to-bottom sequence showing evolution or process steps. Each step appears as narrator describes it.
|
||||
|
||||
Reference in New Issue
Block a user