Mike Bespalov · Launch Video Breakdown: Hook, Pacing & Motion Design
I built a tool that generates a DESIGN.md from any website. Paste a URL → get a semantic design document your AI agent actually understands: color relationships, typography, spacing logic, and comp…
Scene-by-scene timeline & spoken transcript
The Hook
Catalog Discovery
“(No spoken dialogue — silent screen capture)”
- On screen
- Design taste, extracted. AI design gets better with real references. Paste any URL - get a DESIGN.md with its colors, type, and spacing in plain language your agent understands. Paste a URL like stripe.com... Extract
- Camera
- Static wide view zooming into the Duolingo card
- Motion
- Cursor tracking and smooth viewport punch-in
Product Reveal
Duolingo System Inspection
“(No spoken dialogue — silent screen capture)”
- On screen
- Vivid Green Simplicity Duolingo Color Palette feather din-round Spacing & Shape Component Preview DESIGN.md Compact Extended Design JSON Tailwind v4 CSS Variables Design Tokens Copy .md
- Camera
- Fixed split-screen with vertical scrolling
- Motion
- Coordinated side-by-side pane scrolling and button state change
Feature Teaser
Preset Switching
“(No spoken dialogue — silent screen capture)”
- On screen
- Style Extractor Intercom Notion Sketch Airbnb Host Revolut Pulse
- Camera
- Zoom out to grid overview and re-zoom to Revolut
- Motion
- Page transition with cursor selection
Call to Action
Revolut Pulse Extraction
“(No spoken dialogue — silent screen capture)”
- On screen
- Revolut Pulse Clean Fintech Utility Aeonik Pro Inter Spacing & Shape #raw Spacing Scale
- Camera
- Static split-view focusing on token export
- Motion
- Scroll demonstration highlighting markdown specifications
Motion design primitives
Synthesizable in Remotion · key components of the split-pane-ui-tour template.
CursorFollower
Simulates smooth pointer movement and scale pulse upon click.
+ Code construction recipe
Animate x and y coordinates with interpolate and spring-driven scale drop on click keyframes.
SplitScrollSync
Smoothly translates visual UI and markdown code containers at independent speeds.
+ Code construction recipe
Use translateY driven by frame progress with easing functions to mimic browser scrolling.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Setup
Purpose. Establish product premise and brand catalog.
Execution. Wide catalog hero with cursor moving to item.
- 2
Inspection
Purpose. Demonstrate extracted tokens and export options.
Execution. Split-view scroll between typography, components, and DESIGN.md.
- 3
Verification
Purpose. Prove repeatability across diverse design languages.
Execution. Navigate to Revolut preset and review specifications.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Demonstrate a Tailwind CSS code generator for design systems.How the recipe adapts
Replace markdown code views with live Tailwind configuration previews and token color swatches.Remix blueprint · split-pane-ui-tour
Scene durations (4 scenes, 20s)
Key Remotion components
Related Creative Tools Product Launches
Explore all Creative Tools launches →
Anthropic Labs launches Claude Design, which turns conversation into prototypes, slides and one-pagers, powered by Claude Opus 4.7.
A vibe design partner with an AI-native canvas for turning ideas into UI.
Your work tools in Claude are now available on mobile. Explore Figma designs, create Canva slides, check Amplitude dashboards, all from your phone. Give it a try: