Claude · Launch Video Breakdown: Hook, Pacing & Motion Design
Anthropic Labs launches Claude Design, which turns conversation into prototypes, slides and one-pagers, powered by Claude Opus 4.7.
Scene-by-scene timeline & spoken transcript
The Hook
Conversational Design Generation
“(No spoken dialogue — The track begins with a percussive, almost mechanical, rhythmic element that transitions into a driving electronic beat with pizzicato synth melodies and a prominent sub-bass line. High-energy audio transitions, risers, and sweeps are used.)”
- On screen
- Describe what you w Let's design an interactive, dark themed graphic showing how culture flows between cities. A rot| Tweaking... Soldering... THEME DARK LIGHT BREAKPOINT DESKTOP TABLET MOBILE Help me design a... Project Interactive landing... Every place has a story. Discover how ideas, art, and culture flow between cities. 112 cities. 168 routes. One living map. NETWORK Arc color Arc width Arc glow Arc density City size Initial speed Show arcs Show cities City labels GLOBE Grid opacity Country fill Globe glow Rotation Tilt Outer rings Sub-grid You Great-circle arcs with pulse animations City nodes with label on the front hemisphere Atmospheric glow for depth "Every place has a story" headline with vertical stats You Add controls for the globe and arc details, and testing different breakpoints Claude Plan write_file Progress 5/5 Read-current-page layout and components Build tweaks-state with defaults Create-floating-tweaks-panel-UI Add-arc-and-city-toggle-controls Add-breakpoint-viewport-switcher Verifier Add a floating Tweaks panel with controls for: Globe - rotation speed, radius, atmospheric glow intensity Arcs - color, width, opacity, pulse speed, show/ hide toggles Cities - dot size, label visibility, front-hemisphere only Breakpoints - Desktop (1440) / Tablet (768) / Mobile (390) pills that resize the viewport with smooth animation and adapt the layout Describe what you want to create... Import Send Let's prototype... Project Meditation app.html Share Export Tweaks Comment Edit text Knobs Draw 100% 9:41 GOOD MORNING Jared DAILY INTENTION Let each breath return you to what it is already whole. Continue AMBIENT SOUNDSCAPE Forest Rain 30 min Explore See all Breathwork Soundscape Deep Recent Home Meditate Profile Verifier I've built a serene meditation app with 3 screens inside an iOS phone frame. The prototype features: Japandi-inspired palette with warm gold accents on cream Home screen with session cards, daily intention, and category tiles Meditation player with an enso-style progress ring Profile screen with weekly stats and milestone tracking Describe what you want to create... Import Send NOW PLAYING 12:39 17:21 remaining Forest Rain Soundscape Dark mode THEME Stone Moss Mist Clay Dusk Sakura Ink TYPOGRAPHY Heading size Body size 100% 100% TEAM OFFSITE Hemlark Retreat '26 Three days of workshops, hikes, and real talk — because the best ideas happen away from the screen. DATES Oct 7 – 9, 2026 LOCATION Big Sur, CA VENUE Fern Hollow Lodge TEAM 48 people DAY 1 - WEDNESDAY, OCT 7 ARRIVAL & Getting Settled 10:00 AM Shuttles Depart SFO Two coach buses from Terminal 1 - 2.5 hr drive Look for the Hemlark sign at arrivals. Snacks provided. 12:30 PM Arrive + Check In Main Lodge - Room keys & welcome bags Find your cabin, decompress. Lunch is on the deck. Lunch: 12:30 - 2:00 PM - Lodge Deck 2:30 PM - All Hands Welcome + State of Hemlark Sam & Jess - Main Lodge Where we've been, where we're headed, and what to figure out this week. 3:30 PM - Workshop Icebreaker: 36 Questions Pairs + small groups - Main Lodge A conversation-based icebreaker adapted for 5:00 PM Free Time Hike, nap, explore the grounds 7:00 PM Welcome Dinner Outdoor pavilion | family-style 9:00 PM Bonfire + S'mores Fire pit | Blankets provided Comment Swap this to Knobs add a control for... Add TYPOGRAPHY Font Space Grotesk Size 48px Weight 700 Color #000000 Align left Line 50.4 Tracking -1px SIZE Width 424px Height 50px BOX Opacity 1 Padding 0px Margin Mixed Radius 0px Export Can you help me I... Project Company offsite.html You Can you help me turn this document into a beautiful welcome guide we can print and hand out at the company retreat? Claude Read, Write +3 Plan write_file Progress 5/5 Personal schedule, activities & nightlife Leverage cover page and layout updates Build a schedule spread (Day 1 & 2) Create activities spread (Day 3 & 4) Add-pull-quotes and testimonials Hemlark Retreat.html Verifier Flat design for a 2-page welcome guide from your planning doc. It includes: Bordered cover with photo area and event details Two-column schedule spread for Day 1 and Day 2 Activity-builder spread with 4 different options Big Sur area recommendations and nearby spots Travel info, travel logistics, and quick reference Toggle the Tweaks tab to adjust accent color, headline size, and content density. Drop in photos and it place them for you. Describe what you want to create... Import Send Interactive landing... Share Export CY Help me build an is... Project Miller residence I need to create a... Claude Read, Write +3 Plan write_file Progress 5/5 Deliver a brand personality and voice Integrate logo mark and wordmark Build a responsive layout with hero image Consistent typography and colors Design a cohesive navigation for 3 sections Create a site structure and sitemap for navigation Build a proposal and call to action Compile a full tweakable code with Tweaks panel Brandbook.jsx Verifier I've created a comprehensive brand identity with: Botanical logo mark with Cormorant serif Earth tone palette: Moss, Ember, Ink, Stone Three packaging designs: Understated, bold, and playful Instagram presence with avatar and grid templates Full tweakable panel for brand personality, era, and palette Describe what you want to create... Import Send Share Export JM Download project as .zip Export as PDF Export as PPTX Send to Canva Export as standalone HTML Handoff to Claude Code Send to local coding agent Send to Claude Code Web Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/ v1/design/sp8M0041yFropen_file=Interactive+globe.html Implement: Interactive globe.html Copy command
- Camera
- The camera starts with a close-up on a text input field, then zooms out to reveal a full UI, often panning and zooming to highlight specific interactive elements or generated content. The perspective shifts between a direct screen capture and a slightly angled, almost 3D-rendered view of the UI.
- Motion
- Rapid text typing animation, UI element reveals with subtle fades and slides, cursor interaction, progress bar fills, and quick cuts between different product outputs (globe, mobile app, document). The 'tweaking' and 'soldering' loading screens use a radial burst animation.
Product Reveal
Claude Design Title Card
“(No spoken dialogue — A sharp, impactful sub-bass drop accompanies the title card reveal, emphasizing the product name.)”
- On screen
- Design Claude
- Camera
- Static, centered shot on the title card.
- Motion
- Text and logo appear with a quick, clean fade-in and slight scale-up, synchronized with the audio impact.
Feature Teaser
Dynamic Design Iteration & Export
“(No spoken dialogue — The driving electronic beat continues, punctuated by sound design elements like clicks, whooshes, and subtle impacts that align with UI interactions and scene transitions. The rhythm maintains a high energy.)”
- On screen
- (No on-screen text)
- Camera
- Similar to the hook, the camera navigates the UI, focusing on different aspects of the design process: adjusting parameters, viewing different outputs (slides, one-pagers), and demonstrating export options. It uses a mix of close-ups and wider shots of the full interface.
- Motion
- Smooth UI transitions, parameter sliders animating values, content generation (e.g., slides appearing), and menu expansions. The cursor interaction remains a key visual element, guiding the viewer through the features. There's a consistent use of quick, purposeful cuts.
Call to Action
Claude Design: Conversation to Creation
“(No spoken dialogue — The music builds in intensity towards the end, with a more pronounced beat and synth layers, culminating in a final, powerful sub-bass impact and a sustained electronic chord.)”
- On screen
- Claude Design Turns conversation into prototypes, slides and one-pagers. Powered by Claude Opus 4.7. Claude.ai/design
- Camera
- The camera pulls back to reveal the full Claude Design logo and tagline, then transitions to a clean, centered display of the call to action. The final shot is static on the URL.
- Motion
- Logo reveal with a subtle glow and scale, followed by text appearing with a smooth, staggered fade-in. The final URL appears with a clean, confident reveal. The overall pacing remains energetic but settles into a clear, impactful final message.
Motion design primitives
Synthesizable in Remotion · key components of the ai-creative-tool-launch-template template.
TypingCursorReveal
Text appears character by character as if being typed, accompanied by a blinking cursor. This is often used within input fields to simulate user interaction.
+ Code construction recipe
Use `interpolate` to reveal characters of a string based on `frame` or `progress`. Implement a blinking cursor using `spring` for opacity or a simple `loop` for visibility, synchronized with the typing speed.
RadialBurstProgress
A loading indicator featuring a central icon or text with radiating lines or shapes that animate outwards, suggesting activity or processing.
+ Code construction recipe
Utilize `SVG` paths or `div` elements with `transform: rotate` and `opacity` animations. Animate `stroke-dasharray` for line growth or `scale` for radiating shapes, potentially with a `stagger` effect for multiple elements.
UIParameterSlider
A UI slider control animates its handle and associated value, demonstrating a parameter change and its immediate visual effect on the product output.
+ Code construction recipe
Animate the `left` or `transform: translateX` property of the slider handle using `spring` or `tween` for smooth movement. Simultaneously `interpolate` the displayed numerical value and any linked visual properties (e.g., `opacity`, `scale`, `color`) of the generated content.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Interactive Prompt & Processing
Purpose. Immediately demonstrates the core value proposition: turning natural language into design outputs.
Execution. Typing animation in an input field, followed by 'Tweakng...' and 'Soldering...' loading screens with radial burst animations, leading to the first generated design.
- 2
Multi-Modal Design Generation
Purpose. Showcases the breadth of design outputs Claude can create (interactive globe, mobile app, documents).
Execution. Rapid cuts between different UI contexts, each demonstrating a unique design project being generated and refined, with cursor interactions highlighting key features.
- 3
Real-time Customization & Iteration
Purpose. Emphasizes the product's flexibility and user control over generated designs.
Execution. Sliders and toggles in a 'Tweaks' panel are animated, showing immediate visual changes to the design (e.g., theme, typography, layout adjustments).
- 4
Seamless Export & Handoff
Purpose. Highlights the product's integration into existing workflows and its practical utility.
Execution. Demonstration of various export options (PDF, PPTX, HTML, Canva) and the ability to hand off code to a local agent, concluding with the brand and call to action.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch an AI-powered video editing tool that generates short-form social media videos from text prompts.How the recipe adapts
The TypingCursorReveal primitive will be used for entering video prompts like 'Create a 15-second TikTok about sustainable fashion with upbeat music.' The RadialBurstProgress will animate during 'Generating clips...' or 'Applying transitions...' states. UIParameterSlider will be adapted for adjusting video length, aspect ratio, or music tempo, showing real-time preview updates. The overall fast-cut rhythm and energetic soundtrack will be maintained to convey efficiency and creativity.Remix blueprint · ai-creative-tool-launch-template
Scene durations (4 scenes, 81s)
Key Remotion components
Related Creative Tools Product Launches
Explore all Creative Tools launches →
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:
Figma Motion is here — announced live from Config 2026.