mrdoob · Launch Video Breakdown: Hook, Pacing & Motion Design
Yesterday I needed an app to make phone screen captures social media friendly. One I tried wanted a $10/month subscription just to export the video. So I tried asking Claude to build one and 5 minu…
Scene-by-scene timeline & spoken transcript
The Hook
Media Drag and Drop
“(No spoken dialogue — silent screencast)”
- On screen
- Reframe No video loaded VIEWPORT Drop a video here or click to choose
- Camera
- Static full-screen capture
- Motion
- Cursor drag-and-drop file import
Feature Teaser
Video Inset and Corner Radius
“(No spoken dialogue — silent screencast)”
- On screen
- VIDEO Inset 80 px Corner radius 32 px
- Camera
- Static screen recording
- Motion
- Interactive slider manipulation with real-time viewport canvas rendering
Feature Teaser
Border Width and Palette Selection
“(No spoken dialogue — silent screencast)”
- On screen
- BORDER Width 4 px Color Export MP4
- Camera
- Static view with sidebar scroll
- Motion
- Color picker interaction and border thickness adjustment
Call to Action
Shadow Tuning and Export
“(No spoken dialogue — silent screencast)”
- On screen
- SHADOW Blur Offset Y Offset X Opacity Export MP4
- Camera
- Static capture centered on control panel
- Motion
- Multi-slider value changes producing live shadow styling
Motion design primitives
Synthesizable in Remotion · key components of the reframe-screencast-breakdown template.
SliderController
Horizontal range handle updating numerical readouts and preview canvas simultaneously.
+ Code construction recipe
Use Remotion interpolate to bind frame progress to slider track percentage and preview element style properties.
ColorPickerFlyout
Modal picker palette appearing on click with 2D gradient selector and RGB fields.
+ Code construction recipe
Conditionally render an absolute popover with spring-driven scale and opacity transition.
FramedCanvasPreview
Central video container dynamically updating borderRadius, borderWidth, and boxShadow.
+ Code construction recipe
Render an inner Video component wrapped in an animated div styled with inline state variables.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Import Asset
Purpose. Demonstrate zero-friction onboarding via drag and drop.
Execution. File pill dragged onto dark dropzone followed by instant preview load.
- 2
Layout Tuning
Purpose. Display granular dimension control.
Execution. Sliders pulled left and right adjusting video scale and curvature.
- 3
Styling and Shadow
Purpose. Showcase aesthetic framing and export readiness.
Execution. Border color swap and multi-axis drop shadow tweaking.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Social media showcase for a mobile app mockup framing utility.How the recipe adapts
Retains the split canvas/inspector layout while replacing the screen recording with mobile app footage and speeding up slider interactions.Remix blueprint · reframe-screencast-breakdown
Scene durations (4 scenes, 27s)
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.