CleanShot · Launch Video Breakdown: Hook, Pacing & Motion Design
Studio Mode turns a simple screen recording into a polished professional video. Available now on all plans, no subscription required.
Scene-by-scene timeline & spoken transcript
The Hook
Seamless Studio Mode Introduction
“(No spoken dialogue — Dynamic electronic score with pizzicato synths and sub-bass, high-energy audio transitions.)”
- On screen
- CleanShot Studio Cursor Show cursor Size 3x Style Motion Natural Smooth Options Hide cursor when not moving Hide cursor when typing 00:00 / 00:12 7s 8s Zoom 150% Apply Zoom Level to All Zoom mode Follow Cursor Manual Animation Settings DSN-214 Audit type scale across marketing site and app Design Web DSN-198 Rebuild the empty states for onboarding Design Copy DSN-231 Motion spec for panel and drawer transitions Motion DSN-236 Dark mode tokens for surfaces DSN-176 Logo lockup variants for partner co-branding Brand DSN-205 Color contrast pass on secondary buttons A11y Design DSN-188 Illustration style guide for the help center Brand Copy + Add task Background None Gradients Show more Wallpapers Plain color Aspect Ratio Auto Padding Shadow Corners CleanShot Studio Project Edited Documents CleanShot Project Pages Page 1 Rectangle 2 Rectangle 139% Rectangle 2 X 388 Y 190 H Record GIF Record Video Record in Studio Mode Crafted
- Camera
- Dynamic camera pans and zooms, often following cursor movements or UI element interactions. Perspective shifts from close-up UI to wider application views.
- Motion
- Rapid UI element highlighting, smooth cursor tracking, animated menu selections, and quick scene cuts with subtle 3D depth transitions.
Product Reveal
Core Features & Customization
“(No spoken dialogue — Electronic score maintains energy, punctuated by impactful sound design for transitions.)”
- On screen
- Demo Account Opening Export Gradients Show more Wallpapers Plain color Aspect Ratio Auto 1:1 5:4 4:3 3:2 16:9 9:16 Custom... Padding Shadow Corners 00:00 / 00:27 Zoom 161% Create your account Full name Jordan Hayes Work email jordan@company.com Password At least 8 characters Plan Make every action visible
- Camera
- Focus on specific UI elements, then expands to show the full application window. Subtle camera drifts and zooms to emphasize key interactions.
- Motion
- Animated aspect ratio changes, dynamic background selections, and smooth form filling animations. Text reveals with subtle scaling and fading.
Feature Teaser
Advanced Editing & Export
“(No spoken dialogue — The electronic score builds intensity with risers and sub-bass drops, creating anticipation.)”
- On screen
- Built natively for Mac Exporting video... ~2 seconds remaining 39%
- Camera
- Close-ups on timeline interactions, then a wider shot of the export process. Camera remains relatively stable during text reveals.
- Motion
- Timeline scrubbing animations, progress bar fills, and quick transitions between different application states. Text appears with a clean, direct animation.
Call to Action
Brand & Availability
“(No spoken dialogue — The score reaches a powerful crescendo, with a final impactful sub-bass drop and sweep.)”
- On screen
- cleanshot.com
- Camera
- Abstract background motion with a central focus on the logo and URL. Camera slowly zooms out or pans across the abstract gradient.
- Motion
- Smooth gradient transitions, subtle logo animation (scale/fade in), and a clean, centered text reveal for the call to action. The overall motion is fluid and impactful.
Motion design primitives
Synthesizable in Remotion · key components of the cleanshot-studio-mode-launch template.
UIDraggableHighlight
A UI element (button, input field) is highlighted with a glowing border or background fill, often accompanied by a cursor interaction. The highlight smoothly follows the cursor or animates into place.
+ Code construction recipe
Use `interpolate` for smooth color and scale transitions. Implement a `spring` animation for the cursor movement and highlight expansion. SVG filters for glow effects and `useCurrentFrame` to synchronize with cursor position.
DynamicTimelineScrub
A video timeline component where individual clips are visible, and a playhead or selection indicator moves smoothly, often triggering a zoom or focus on the selected clip.
+ Code construction recipe
Utilize `Sequence` and `AbsoluteFill` for clip arrangement. Animate the playhead's `translateX` with `spring` or `interpolate` based on video progress. Apply `scale` and `opacity` to highlight the active clip.
GradientHorizonWarp
An abstract background composed of soft, shifting color gradients that subtly warp and flow, creating a sense of depth and movement. Often used behind text or product shots.
+ Code construction recipe
Employ `Shader` components with GLSL for complex gradient generation and distortion. Animate `uniform` values (e.g., time, noise parameters) to create the warping effect. Combine with `Blur` and `Opacity` for softness.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Interactive Hook
Purpose. Immediately showcase the product's core functionality and ease of use through direct UI interaction.
Execution. Rapid-fire cuts of cursor movements, menu selections, and feature activations within the application, set against a dark, abstract background.
- 2
Feature Deep Dive
Purpose. Demonstrate specific, powerful features and customization options in detail.
Execution. Focused shots on individual UI panels, showing dynamic changes like aspect ratio adjustments, background selections, and timeline editing.
- 3
The Polish & Power
Purpose. Highlight the professional output and native performance of the product.
Execution. Scenes depicting video export progress, followed by a clean, confident statement about native Mac integration.
- 4
Brand & Call to Action
Purpose. Reinforce brand identity and guide the viewer to the next step.
Execution. A final, impactful shot of the product logo and website URL, set against a vibrant, evolving gradient background.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new cloud-based code editor, 'SyntaxSphere', highlighting its real-time collaboration and AI-assisted coding features.How the recipe adapts
The UIDraggableHighlight primitive would be adapted to show intelligent code completion suggestions and collaborative cursor movements. DynamicTimelineScrub would become a 'Code History Scrubber' to visualize version control. GradientHorizonWarp would be used as a background for abstract representations of cloud infrastructure and AI processing, with colors shifting from cool blues to warm oranges to signify data flow and processing. Typography would remain Grotesque Sans, but with subtle monospace elements for code snippets. The pacing would maintain the high-energy cuts to showcase rapid development and AI speed.Remix blueprint · cleanshot-studio-mode-launch
Scene durations (4 scenes, 81s)
Key Remotion components
Related Productivity Product Launches
Explore all Productivity launches →
Don't type, just speak. Flawless voice-to-text across every app at 240 WPM.
One workspace for knowledge scattered across Slack, email, Docs, and Notion. Connect your tools and build apps and agents that stay live with your data.
Notion positions itself as the backbone of your dock — a brand film of the Notion icon among everyday apps, ending on “Works with everything.”