Scene-by-scene timeline & spoken transcript
The Hook
Designing Figma in Figma
“Normally when Sam and I are designing, we're designing Figma in Figma. I'm not going to lie, this gets a bit confusing at times.”
- On screen
- CONFIG
- Camera
- Wide stage view panning to split-screen UI desktop screencast
- Motion
- Stage screen transition to dual-speaker live screen capture
Product Reveal
Capture Code Chrome Extension
“There's one more way that you can bring your code onto the canvas. With some new updates to our Chrome extension... we're going to use this new feature called Capture Code.”
- On screen
- PICKUP Good finds, close by. Capture code
- Camera
- Desktop screen capture showing browser interaction and Figma paste
- Motion
- Interactive extension trigger, DOM capture to live code sandbox load
Feature Teaser
Mobile Mirroring and Lightweight Code Layers
“What we've been looking at on this phone is actually a code layer mirrored via the Figma mobile app... We're using a lightweight version of our app that's optimized for prototyping.”
- On screen
- Pickup Delivery checkout flow Code Beta
- Camera
- Figma desktop canvas zoom with mobile preview phone frame inset
- Motion
- Live code layer rendering connected directly to GitHub repo branches
Feature Teaser
Extract Designs and Motion Timeline
“I already like to use Extract Designs, which lets me pull out the current state or specific elements... I've asked the agent to animate these using Motion.”
- On screen
- Extract designs Update code layer Motion Timeline
- Camera
- Tight focus on timeline scrub and animation frame nodes
- Motion
- Interactive timeline scrubbing and bi-directional design-to-code push
Feature Teaser
Full-Screen Code Editor and Multi-Chat Prompting
“Every code layer has one of these... You can look at the actual files for the code and you can directly manipulate these right here... Now we have multiple chats.”
- On screen
- Browser Files Review Terminal /delivery-exploration
- Camera
- Transition to full-screen code workspace view and back to canvas
- Motion
- In-app code editor toggle, diff viewer inspection, multi-threaded AI chat
Product Reveal
Merging Code Layers and Multi-Team Polish
“What I'm going to do... I'm going to select the code layer with the animation as well as the one with this onboarding CTA... Can you add the get it delivered CTA?”
- On screen
- Merged experience Complete Experience Present
- Camera
- Canvas navigation across multiple design branches to combined frame
- Motion
- AI-assisted code merging combining independent code layers into one runtime
Call to Action
Standalone Prototype Sharing and Launch Announcement
“When I click on share prototype, this link now is just going to link people to this particular prototype... I'm most excited to see what you all do with this new primitive.”
- On screen
- Code layers FULL SEAT ALL PLANS
- Camera
- Fullscreen prototype preview cutting back to wide stage slide
- Motion
- Live web prototype simulation into bold title card release banner
Motion design primitives
Synthesizable in Remotion · key components of the keynote-code-canvas-demo template.
SandboxCanvasFrame
Renders an interactive browser viewport floating on an infinite canvas with live DOM rendering.
+ Code construction recipe
Wrap target UI within a Remotion spring-scaled frame with dynamic CSS transform coordinates matching canvas pan and zoom.
CodeDiffInspector
Switches between a rendered interface and a live monospaced diff panel showing modified lines.
+ Code construction recipe
Use an interpolate-driven opacity and horizontal slide transition to switch from mobile frame to split-view syntax-highlighted editor.
MultiChatPromptDrawer
Slides in an AI assistant drawer with conversational prompt threads updating live elements.
+ Code construction recipe
Implement an absolute positioned side drawer with spring translation on X-axis, sequentially rendering typing animations for chat bubbles.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Contextual Hook
Purpose. Establish relatable pain point of designing design tools in design tools.
Execution. Split view showing presenter on stage alongside Figma-in-Figma interface.
- 2
Bridge the Gap
Purpose. Show how production code directly imports onto canvas.
Execution. Chrome extension capture action dropping interactive site directly onto the board.
- 3
Design & Code Bi-directionality
Purpose. Demonstrate editing UI visually and pushing updates back to source code.
Execution. Visual motion timeline adjustment followed by 'Update code layer' execution.
- 4
Scale and Ship
Purpose. Merge distributed team experiments and publish isolated shareable links.
Execution. Multi-agent prompt merging layers into a final mobile presentation prototype.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Announcing a live headless CMS visual editor that syncs with Next.js code repositories.How the recipe adapts
Replace the Figma canvas with a headless CMS studio canvas, capturing components from production web pages, editing schemas in a side panel, and syncing commits back to GitHub.Remix blueprint · keynote-code-canvas-demo
Scene durations (5 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