Y Combinator · Launch Video Breakdown: Hook, Pacing & Motion Design
21st (@21stdev) is the production layer for frontier AI agents. 1.4M developers already use their platform to build AI apps, 15K+ GitHub stars - now they're making it dead simple to deploy Claude C…
Scene-by-scene timeline & spoken transcript
The Hook
Introducing 21st.dev: The AI App Platform
“Last year we built 21st.dev, a platform that used to build UI for their AI-native applications.”
- On screen
- 21st dev Components Screens Themes Bookmarks Tools Magic MCP VS Code Extension Aceternity UI From Scratch Dark Sidebar Default Transform your ideas into beautiful digital experiences Aceternity UI Aurora Background Default Background lights are cool you know. And this is chemical burn. Interactive 3D Generating sheldon sheldon sheldon sheldon sheldon Aceternity UI Feature Section with hover... Built for developers Ease of use Pricing like no other Multi-tenant Architecture 24/7 Customer Support Money back guarantee Aceternity UI Early 2023 Aceternity UI Scroll Animations Aceternity UI Feature Section with hover... Tommy Japsen Aceternity UI Scroll Snap Default
- Camera
- Alternates between a medium shot of two founders seated on a couch and a screen recording of the 21st.dev platform, with a slight zoom into specific UI elements.
- Motion
- Rapid cuts between live-action founder footage and product UI screen recordings. UI elements are highlighted with a mouse cursor and subtle zoom.
Problem Agitation
The Challenge of AI Agent Deployment
“Along the way, we built our own custom AI agents to power the product. Those agents got more than 15,000 GitHub stars. Then Claude Code arrived. We rewrote our agents on top of it. But getting Claude Code Agent SDK, Sandboxes, OAuth, streaming, observability, and then we realized every team building on Claude Agent SDK”
- On screen
- More than 15,000 CLAUDE CODE System message Critical error Ok
- Camera
- Alternates between medium shots of founders and animated graphic overlays. The camera remains static during founder segments.
- Motion
- Animated text overlays revealing key metrics (15,000 GitHub stars). A retro-style 'Critical error' pop-up animates over the founders to visually represent the problem.
Product Reveal
Introducing 21st Agents: The Production Layer
“So we turned our infrastructure into a product. 21st Agents, the production layer for Claude Code SDK. Define your agent in TypeScript, and ship your agent today.”
- On screen
- 21st Agents
- Camera
- Transitions from founder footage to a clean, white background with animated text and logo reveals. Returns to founder footage for a concluding statement.
- Motion
- Text-based product name reveal with a subtle background pattern of plus signs. The 21st Agents logo animates into view with a quick, impactful transition.
Feature Teaser
Key Features & Benefits
“(No spoken dialogue — The audio track features a consistent, driving electronic beat with a prominent sub-bass. Throughout the video, there are several high-energy audio transitions, including a significant sub-bass drop/impact at [00:26] and a rising synth sweep at [00:48] that leads into a more melodic, yet still energetic, synth-driven outro. The instrumentation primarily consists of various synthesizers, including pizzicato synths, pads, and a strong rhythmic bassline.)”
- On screen
- (No on-screen text)
- Camera
- Dynamic camera movements showcasing various UI elements and abstract data visualizations. Includes quick pans, zooms, and rotations.
- Motion
- Fast-paced montage of product UI, code snippets, and abstract data visualizations. Features smooth camera pans, zooms, and rotations, often with a subtle depth of field effect. Elements animate in and out with quick, precise movements.
Call to Action
Final Call to Action & Branding
“(No spoken dialogue — A rising synth sweep at [00:48] leads into a more melodic, yet still energetic, synth-driven outro.)”
- On screen
- 21ST
- Camera
- Zooms out from a blurred background to reveal the full 21st logo, then fades to white.
- Motion
- Logo reveal with a subtle blur and fade effect. The logo animates into focus, then the entire screen fades to white, leaving a faint ghost of the logo.
Motion design primitives
Synthesizable in Remotion · key components of the developer-tool-launch-fast-cut template.
FounderToProductCut
A rapid cut from a live-action shot of the founders speaking to a full-screen product UI or animated graphic, often accompanied by a spoken transition.
+ Code construction recipe
Use a sequence of <AbsoluteFill> components. The first <AbsoluteFill> contains the founder video. The next <AbsoluteFill> contains the product UI/graphic. Use `spring()` for a quick, impactful opacity transition or `interpolate()` for a sharp cut at a specific frame.
MetricRevealOverlay
Key numerical metrics or short phrases animate onto a clean background, often with supporting icons or subtle background elements.
+ Code construction recipe
Employ <Text> components with `spring()` for scale and opacity animations. Background elements (like icons or subtle patterns) can use `interpolate()` for a delayed fade-in or subtle parallax effect. Ensure text is centered and highly legible.
RetroErrorPopup
A pixelated, retro-style 'System message' error dialog box animates into view, typically over live-action footage, to visually represent a problem or challenge.
+ Code construction recipe
Create an SVG or a series of styled <View> components to mimic the retro dialog box. Use `spring()` for a quick pop-in animation for the dialog box and its internal elements (text, buttons, icon). Apply a `pixelate()` shader or a custom SVG filter for the retro aesthetic.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Origin Story
Purpose. Establish credibility and context by explaining the company's journey and initial product.
Execution. Interviews with founders interspersed with screen recordings of their initial product, 21st.dev, showing its UI and features.
- 2
The Problem & Pivot
Purpose. Agitate the pain point developers face with existing solutions and introduce the catalyst for the new product.
Execution. Founder interviews explaining the challenges, punctuated by animated graphics like the '15,000 GitHub stars' metric and the 'Critical error' pop-up, visually representing the problem.
- 3
The Solution Reveal
Purpose. Introduce the new product, 21st Agents, as the definitive solution to the identified problem.
Execution. A clean, impactful reveal of the '21st Agents' logo and name, transitioning from the problem statement to the solution, followed by a brief explanation from the founders.
- 4
Feature Showcase & Vision
Purpose. Demonstrate the product's capabilities and reinforce its value proposition through a rapid visual tour.
Execution. A fast-cut montage of product UI, code snippets, and abstract data visualizations, all synchronized with the energetic music, showcasing the product's power without dialogue.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new AI-powered cybersecurity platform, 'SentinelGuard', that automates threat detection and response for enterprises.How the recipe adapts
The video would open with SentinelGuard founders discussing the growing complexity of cyber threats. A 'Critical error' popup would represent a data breach or security vulnerability. The 'SentinelGuard' logo would then be revealed with a clean animation. The feature showcase would include fast-cut UI demonstrations of threat dashboards, automated response workflows, and abstract visualizations of network traffic analysis, all set to a driving electronic soundtrack.Remix blueprint · developer-tool-launch-fast-cut
Scene durations (5 scenes, 54s)
Key Remotion components
Related Developer Tools Product Launches
Explore all Developer Tools launches →
xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.
Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
Agentic CLI for coding, building apps, and automating workflows.