Zoah MCP — an agent on the design canvas · Launch Video Breakdown: Hook, Pacing & Motion Design
Scene-by-scene timeline & spoken transcript
The Hook
Visual Showcase & Title Reveal
“All you gotta do is just install this Zoah CLI package...”
- On screen
- Introducing ZOAH MCP
- Camera
- Isometric pan over mobile UI screens transitioning to black title card
- Motion
- 3D perspective mockup tilting and smooth camera drift
Product Reveal
CLI Initialization & Infinite Canvas Flythrough
“...and then that unlocks so much for you.”
- On screen
- npm install -g @zoahhq/cli zoah Zoah CLI v0.1.9 Authenticated as rick@zoah.com Let us add this project to Zoah.
- Camera
- CRT terminal view zooming out into 3D isometric dashboard boards
- Motion
- Terminal typing animation followed by wide multi-board spatial camera sweep
Problem Agitation
Designer Perspective on AI Collaboration
“I just like that it gives you this way of not replacing the human designer and not taking away from these traditional design processes.”
- On screen
- (No on-screen text)
- Camera
- Static webcam shot cutting to dynamic multi-screen panning
- Motion
- Live webcam overlay cut against floating UI product boards
Feature Teaser
Agent Generates Full App Flow
“So we can do pretty much everything in Zoah just very simple instructions to our agents.”
- On screen
- design Mise, a meal kit app: onboarding to delivery Calling zoah 14 times... Mise is on the canvas: five screens, seven photos and the components behind them.
- Camera
- Terminal prompt zoom to horizontal array of mobile screens appearing sequentially
- Motion
- Command-line triggered visual layout generation with staggered card reveals
Feature Teaser
MCP Harness Setup & Canvas Direct Control
“Doing so with the Zoah MCP server means I can just kind of describe what I want in a conversational-like way over here in the context of my agent session with whatever harness I want to use.”
- On screen
- Give your agent a canvas. zoah mcp init Which agent harness should use the Zoah MCP server? 1. Claude Code (.mcp.json) 2. Cursor (.cursor/mcp.json) 3. VS Code (.vscode/mcp.json) 4. Codex 5. Just print the JSON snippet
- Camera
- Interactive menu navigation cutting to wide isometric grid of dark UI views
- Motion
- Monochrome terminal option selection, vector node path tracing, and design token inspection
Feature Teaser
66 MCP Tools & Platform Scalability
“As the AI model gets better, then the platform becomes that much more valuable because what AI can then do on that platform is just better and better and better too.”
- On screen
- Tools for zoah · 66 tools openProject getCanvasState applyCanvasEdits createNode updateNode moveNode deleteNode createMedia
- Camera
- Vertical scrolling command list followed by talking head and high-angle UI board drift
- Motion
- Text list focus highlight, screen-to-screen perspective transitions
Feature Teaser
Persona Brainstorming & Design Systems
“And it just feels natural, like I don't feel awkward doing this... I can brainstorm personas... I can spend as much time iterating here just thinking about the wireframe...”
- On screen
- brainstorm personas for Rally, a rec league app Calling zoah 6 times... add three more: a teen player, a ref, a free agent
- Camera
- Continuous slow lateral camera tracking across generated cards, wireframes, and design token sheets
- Motion
- Dynamic card insertion into canvas grid and real-time variant switching
Feature Teaser
Atomic Agentic Flow Testimonial
“This is the first time walking through an agentic flow where it's like atomic-based design system, you know? It's building components... You started with persona. This is not stuff that's out there right now.”
- On screen
- (No on-screen text)
- Camera
- Static framed interview with studio lighting and brand backdrop
- Motion
- Clean jump cut talking head paired with animated gestures
Call to Action
Outro & Waitlist CTA
“(No spoken dialogue — ambient synthesizer chime outro)”
- On screen
- Give your agent a canvas. ZOAH MCP Join the waitlist at zoah.com
- Camera
- Locked center punch on black textured backdrop
- Motion
- Subtle grain overlay and clean typography fade-in
Motion design primitives
Synthesizable in Remotion · key components of the cli-agent-canvas-launch template.
TerminalTypewriterSnippet
Simulates monospace CLI command execution with glowing block cursor and instant response logs.
+ Code construction recipe
Use slice on current text string driven by frame count, render monospace font, toggle blinking cursor opacity using frame % 30 < 15.
IsometricCanvasPlane
Rotates flat UI designs in 3D space with subtle camera dolly and slight perspective tilt.
+ Code construction recipe
Wrap target UI component in a container with perspective: 1200px, animate rotateX, rotateY, and translateZ with spring().
StaggeredCardPopulator
Sequentially spawns interface cards onto canvas when an MCP tool call finishes.
+ Code construction recipe
Map items with an index offset delay: interpolate(frame - i * 4, [0, 10], [0, 1], { extrapolateLeft: 'clamp' }) applied to opacity and translateY.Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Hook & Value Thesis
Purpose. Establish product category: MCP bridge from AI agents to design canvases.
Execution. Juxtaposes terminal installation command with immediate high-fidelity UI outputs.
- 2
Social Proof Validation
Purpose. Demonstrate that human designers remain in control rather than being replaced.
Execution. Interview clips interwoven with infinite canvas navigation.
- 3
Full Stack Workflow Proof
Purpose. Prove end-to-end capability from personas to atomic components and live layouts.
Execution. Terminal prompts calling Zoah tools followed by real-time canvas population.
- 4
Actionable Outro
Purpose. Drive conversion to waitlist.
Execution. Minimal title card on dark textured field with website URL.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch video for an AI backend schema generator integrating with Figma.How the recipe adapts
Replace mobile food and sports UIs with backend ERD diagrams and database schema nodes that generate automatically via CLI agent calls.Remix blueprint · cli-agent-canvas-launch
Scene durations (6 scenes, 60s)
Key Remotion components
Related AI & ML Product Launches
Explore all AI & ML launches →
Introducing Griffin, the first AI to pass the video Turing test
The most emotive and controllable TTS model
We just released QVAC TranscribePsy, a speech-to-text model small enough to run inside a phone app. It covers 25 European languages on a laptop and 8 on a phone, and on an iPhone 17 Pro Max's Ne