Scene-by-scene timeline & spoken transcript
The Hook
Prompting the Agent
“(No spoken dialogue — ambient synth pulse with crisp mechanical keyboard typing sounds)”
- On screen
- Create a design system /skills from the whole website's styles, components, and layouts
- Camera
- Smooth camera zoom from canvas overview into the right-hand Agent prompt input.
- Motion
- Dynamic focal zoom and realistic typing simulation.
Product Reveal
Autonomous System Extraction
“(No spoken dialogue — ambient synth chord with subtle UI processing sound effects)”
- On screen
- Generate design system... Analyzing project... Extracted 3 breakpoint frames... Inspecting component structure...
- Camera
- Smooth zoom-out revealing simultaneous canvas layout and cascading agent execution logs.
- Motion
- Accordion-style progressive log expansion and canvas highlight state.
Feature Teaser
Saved as Project Skill
“(No spoken dialogue — soft UI click sound and ambient electronic drone)”
- On screen
- Canvas CMS Localization Analytics Settings Skills sift-design-system Apply the Sift website's existing colors, typography, responsive layouts, and reusable components
- Camera
- Pan and push into top navigation menu dropdown, followed by hard cut to Settings view.
- Motion
- Menu popover transition and list item hover highlight.
Problem Agitation
Generated Design System Spec
“(No spoken dialogue — sustained ambient pad with subtle page navigation click)”
- On screen
- sift-design-system Foundations Layout rhythm Reusable elements
- Camera
- Static centered view of the markdown document pane.
- Motion
- Text document slide-in and structured markdown formatting display.
Call to Action
Brand Resolution
“(No spoken dialogue — atmospheric synth tail fades to silence)”
- On screen
- (No on-screen text)
- Camera
- Hard cut to solid black background with centered emblem.
- Motion
- Minimal geometric logo reveal.
Motion design primitives
Synthesizable in Remotion · key components of the ai-agent-workflow-tour template.
VirtualCameraFocus
Smooth spring-interpolated pan and zoom targeting active UI components.
+ Code construction recipe
Use Remotion interpolate and spring to modulate container scale and transformOrigin towards target bounding box coordinates.
ProgressiveLogStream
Step-by-step disclosure of agent processing items with animated progress icons.
+ Code construction recipe
Map an array of log items to staggered opacity and translateY keyframes governed by frame delays.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
User Input
Purpose. Demonstrate effortless natural language instruction.
Execution. Direct camera zoom into input box with live typed command.
- 2
Agent Execution
Purpose. Show transparent multi-step reasoning and project scanning.
Execution. Terminal log stream expanding inside the sidebar beside canvas.
- 3
Output Verification
Purpose. Prove tangible design system documentation was created.
Execution. Settings navigation revealing the comprehensive generated skill sheet.
- 4
Branded Outro
Purpose. Reinforce Framer product authority.
Execution. Clean monochrome logo centered on black.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Demonstrating an AI design audit tool scanning a Shopify store theme.How the recipe adapts
Replace the canvas with an ecommerce storefront mockup and change prompt text to 'Audit accessibility and export design tokens', opening an audit results skill sheet.Remix blueprint · ai-agent-workflow-tour
Scene durations (5 scenes, 25s)
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