Emanuele Di Pietro · Launch Video Breakdown: Hook, Pacing & Motion Design
Hattrick is a free web app that splits one photo across three X slideshow slides so the crop lines up, without opening an editor.
Scene-by-scene timeline & spoken transcript
The Hook
Hero Value Proposition
“(No spoken dialogue — silent screencast)”
- On screen
- HATTRICK Ride the trend. Post your hat-trick. Everyone on X is posting one wide shot as three slides that read as a single picture. Hattrick cuts yours in a second. Make your slideshow Split it
- Camera
- Static full-screen web viewport with subtle zoom-in on interactive preview
- Motion
- Cursor hover triggering interactive three-panel split divider animation
Product Reveal
Direct Image Upload
“(No spoken dialogue — silent screencast)”
- On screen
- Split an image Drop a wide image. You get three equal parts and a preview of the post. Drop an image here or click to choose one, or paste it
- Camera
- Static viewport followed by native macOS file dialog modal overlay
- Motion
- Cursor movement to click dropzone and select a screenshot from Finder
Feature Teaser
Instant Preview and Batch Export
“(No spoken dialogue — silent screencast)”
- On screen
- Split an image Download all three Allow hattrick-preview.vercel.app to download multiple files?
- Camera
- Static screencast focus on post preview card and browser permission alert
- Motion
- Instant visual render of 3-column X post preview followed by download permission prompt
Feature Teaser
File Verification via Finder
“(No spoken dialogue — silent screencast)”
- On screen
- Downloads CleanShot 2026-... Esc
- Camera
- macOS desktop layout focus on active Finder window
- Motion
- macOS Dock bounce, Quick Look preview cycling across the three exported panels
Call to Action
Live Post Result on X
“(No spoken dialogue — silent screencast)”
- On screen
- Synara @trysynara Run every coding agent in one workspace 2:05 PM · Sep 5, 2026 · 171K Views
- Camera
- Static web feed view centering the panoramic multi-image tweet
- Motion
- Cursor hover accentuating seamless continuity across all three tweet panels
Motion design primitives
Synthesizable in Remotion · key components of the workflow-screencast-demo template.
SplitCardPreview
Divides a single image container into three equal flex columns separated by thin vertical dividers.
+ Code construction recipe
Use CSS flex layout with overflow hidden on each container, offsetting translateX by 0%, -33.33%, and -66.66% respectively.
SmoothCursorTracker
Interpolates smooth cursor coordinates over UI targets with click scale-down reactions.
+ Code construction recipe
Animate x and y coordinates with Remotion interpolate spring physics, triggering a 0.95 scale transform on click frames.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Proposition
Purpose. Introduce the trend and tool utility.
Execution. Landing page hero with interactive 3-way divider.
- 2
Action
Purpose. Demonstrate zero-friction image upload.
Execution. Dropzone click and file picker selection.
- 3
Verification
Purpose. Confirm output quality and split accuracy.
Execution. Finder inspection and Quick Look inspection.
- 4
Proof
Purpose. Validate final output on the target social platform.
Execution. Published X tweet showing seamless panorama.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch video for an Instagram 9-grid carousel generator tool.How the recipe adapts
Replace the 3-panel X layout with a 3x3 grid preview, showing immediate grid export to mobile camera roll and the resulting seamless profile grid.Remix blueprint · workflow-screencast-demo
Scene durations (5 scenes, 26s)
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: