Vercel · Launch Video Breakdown: Hook, Pacing & Motion Design
Connect coding agents to AI Gateway with one command — auto-configures 8 popular coding harnesses, 300+ models from 30+ providers at no markup, open-weight models with ZDR and US inference. `vercel ai-gateway coding-agents setup`.
Scene-by-scene timeline & spoken transcript
The Hook
Instant Agent Configuration
“(No spoken dialogue — ambient electronic score with pizzicato synths and sub-bass)”
- On screen
- Point every coding agent
- Camera
- Static, centered text on black background, then a terminal window fades in.
- Motion
- Text fade-in, terminal UI reveal with typing animation and dynamic output.
Product Reveal
Unified API Key for 300+ Models
“(No spoken dialogue — ambient electronic score with pizzicato synths and sub-bass)”
- On screen
- vercel ai-gateway coding-agents setup Connected Claude Code Connected Pi Connected OpenClaw New API Key vck_••••4ab1 • macOS Keychain One key for every agent and 300+ models
- Camera
- Static terminal window, then text fades to black, followed by new centered text.
- Motion
- Typing animation, list item reveal, text fade-out/fade-in.
Feature Teaser
Seamless Model Integration
“(No spoken dialogue — ambient electronic score with pizzicato synths and sub-bass)”
- On screen
- /model moonshotai/kimi-k3 zai/glm-5.2 amazon/nova-2-lite cohere/command-a morph/morph-v3-large inception/mercury-coder-small interfaze/interfaze-beta openai/gpt-5.6-sol anthropic/claude-fable-5 Budgets, control, observability all
- Camera
- Static terminal window with a scrolling list of models, then text fades to black, followed by new centered text.
- Motion
- Typing animation, vertical scrolling list, text fade-out/fade-in.
Feature Teaser
Granular Observability Dashboard
“(No spoken dialogue — ambient electronic score with pizzicato synths and sub-bass)”
- On screen
- Live Search model, provider, or request ID Export Last 12 hours All providers All models All modalities All credentials All statuses 06:30 10:00 13:20 18:30 Time Status Model Provider Usage Cost Duration Region AUG 04 18:21:59 200 Claude Sonnet 5 Anthropic 3.9K → 31 tokens $0.0012 2.22s AUG 04 18:21:59 200 GPT 5.6 Sol OpenAI 86K → 534 tokens $0.0117 8.17s claude-fable-5 Anthropic 0.07s DeepSeek V4 Pro Fireworks 92K → 388 tokens $0.0410 5.87s Qwen3 Coder Next Fireworks 31K → 512 tokens $0.0119 3.11s GPT 5.3 Codex OpenAI 128K → 402 tokens $0.2210 7.02s Claude Haiku 4.5 Anthropic 9.2K → 77 tokens $0.0008 1.31s GLM 5 Fireworks 25K → 195 tokens $0.0071 3.42s GPT 5.1 Codex Max OpenAI 154K → 486 tokens $0.2617 8.44s Claude Sonnet 4.6 Anthropic 188K → 9 tokens $0.0384 3.68s Kimi K2.7 Code Fireworks 57K → 341 tokens $0.0198 4.05s Claude Opus 4.6 Anthropic 41K → 105 tokens $0.0332 4.66s GPT 5.5 OpenAI 12K → 164 tokens $0.0242 2.98s DeepSeek V3.2 Fireworks 18K → 96 tokens $0.0036 2.11s Claude Sonnet 4.5 Anthropic 3.8K → 106 tokens $0.0019 2.45s GLM 5 Turbo Fireworks 8.4K → 88 tokens $0.0021 1.87s Qwen3 Coder Plus Fireworks 66K → 429 tokens $0.0254 4.92s GPT 5.4 12K → 88 tokens $0.0041 2.89s GPT 5.2 Pro 71K → 288 tokens $0.1204 6.05s Claude Haiku 5 5.1K → 64 tokens $0.0006 1.12s Qwen3 Max Thinking 143K → 712 tokens $0.0612 9.34s DeepSeek R2 38K → 194 tokens $0.0083 3.27s GLM 5 Air 11K → 102 tokens $0.0027 2.08s gpt-5.4-mini 0.09s Kimi K2.5 73K → 265 tokens $0.0287 4.83s Claude Opus 4.7 156K → 341 tokens $0.2946 8.55s MiniMax M2.5 16K → 77 tokens $0.0011 1.48s GPT 5.1 27K → 152 tokens $0.0050 3.21s Llama 4 Maverick 34K → 128 tokens $0.0052 2.57s
- Camera
- Dashboard UI with a scrolling table of data, then fades to black.
- Motion
- Vertical scrolling of data table, subtle graph animation.
Call to Action
One Command to Connect
“(No spoken dialogue — ambient electronic score with pizzicato synths and sub-bass)”
- On screen
- $ vercel ai-gateway coding-agents setup
- Camera
- Static, centered terminal command on a black background.
- Motion
- Text fade-in, static display.
Motion design primitives
Synthesizable in Remotion · key components of the developer-cli-launch template.
TerminalTypewriter
Text appears character by character within a stylized terminal window, mimicking real-time typing, followed by dynamic output lines appearing instantly or with a slight delay.
+ Code construction recipe
Use Remotion's `Sequence` and `AbsoluteFill` for the terminal background. Implement `spring` or `interpolate` for character opacity and position, with `delay` for sequential character reveal. Output lines can use `spring` for opacity and Y-translation.
ScrollingDataGrid
A data table within a dashboard UI scrolls vertically, revealing new rows of information while older rows exit the frame, simulating a live data feed.
+ Code construction recipe
Utilize Remotion's `AbsoluteFill` for the dashboard container. Animate the `transform: translateY` property of a `div` containing the table rows using `interpolate` with `extrapolate: 'clamp'` to control the scrolling bounds. Individual row elements can have subtle `opacity` or `scale` animations on entry.
TextFadeReveal
Centered text fades in smoothly from a black background, holds for a duration, then fades out, providing clear, concise messaging.
+ Code construction recipe
Employ Remotion's `AbsoluteFill` for the background. Animate the `opacity` property of a `Text` component using `interpolate` with `easing` functions like `easeOutCubic` for a smooth fade-in and `easeInCubic` for fade-out.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Setup
Purpose. Introduce the core problem of connecting coding agents and immediately present the one-command solution.
Execution. Text headline followed by a terminal typing animation demonstrating the `setup` command and its immediate success.
- 2
The Breadth
Purpose. Showcase the extensive compatibility with 300+ models and providers.
Execution. Text headline, then a terminal window with a rapidly scrolling list of diverse model names, implying vast integration.
- 3
The Control
Purpose. Highlight the advanced observability, budgeting, and control features.
Execution. Text headline, followed by a detailed dashboard UI with live data, usage metrics, and cost breakdowns, scrolling to reveal more information.
- 4
The Simplicity
Purpose. Reiterate the ease of use and call to action with the single command.
Execution. A final, clear display of the `vercel ai-gateway coding-agents setup` command on a black screen.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new CLI tool, 'CloudPilot', that deploys serverless functions across AWS, Azure, and GCP with a single command.How the recipe adapts
The TerminalTypewriter primitive will show `cloudpilot deploy serverless-function --region us-east-1` followed by 'Deployed to AWS Lambda', 'Deployed to Azure Functions', 'Deployed to Google Cloud Functions'. The ScrollingDataGrid will display a dashboard with real-time function invocations, latency, and cost per provider. TextFadeReveal will introduce headlines like 'Deploy Anywhere, Instantly' and 'Unified Monitoring & Cost Control'.Remix blueprint · developer-cli-launch
Scene durations (5 scenes, 30s)
Key Remotion components
Related Developer Tools Product Launches
Explore all Developer Tools launches →
xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.
Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
Agentic CLI for coding, building apps, and automating workflows.