Loom · Launch Video Breakdown: Hook, Pacing & Motion Design
Turn your video into an agent prompt with links, screenshots, and context captured automatically.
Scene-by-scene timeline & spoken transcript
The Hook
Loom: Record for Agent - The New Frontier
“(No spoken dialogue — The audio begins with a sustained, low-frequency synth pad, gradually introducing a delicate, high-pitched synth arpeggio/sequence.)”
- On screen
- Loom: Record for Agent
- Camera
- Static shot, initially with a blurred background, transitioning to a clean white grid. Focus is centered on the Loom UI bar.
- Motion
- UI element reveal (Loom bar slides in from bottom), text pop-up with a subtle spring animation, mouse cursor interaction highlighting the 'Record for agent' button.
Problem Agitation
Talk Through It, Show What Matters
“(No spoken dialogue — The synth pad and arpeggio continue, maintaining an ethereal quality as the scene transitions.)”
- On screen
- Talk through it.
- Camera
- Static, centered on the Loom UI bar against a white grid background.
- Motion
- Progressive text reveal (fade-in/slide-up), UI state change (button press animation, recording timer starts), subtle glow on the active recording indicator.
Product Reveal
Capturing Context: Real-time Feedback & Navigation
“(No spoken dialogue — Deeper, more resonant synth pads begin to layer in, creating a sense of atmospheric build-up, accompanying the detailed demonstration.)”
- On screen
- Moor - Premium Update (VT)
- Camera
- Zoom out from the Loom bar to reveal a full desktop screen. Dynamic pans and zooms within the desktop screen to highlight specific UI elements and content.
- Motion
- Screen recording simulation (realistic mouse cursor movement, clicks, scrolling), UI annotations (animated arrows, circles, text highlights), seamless window transitions (tab switching, new page loading).
Feature Teaser
Instant Agent Prompts from Your Loom
“(No spoken dialogue — The atmospheric synth pads continue to evolve, maintaining a contemplative feel as the automated prompt is generated.)”
- On screen
- Agent prompt
- Camera
- Smooth transition from the recording screen to a new 'Agent prompt' modal overlay. Static view of the modal, then a slight zoom out to reveal surrounding text.
- Motion
- Modal pop-up with a soft blur/dim background, text generation animation (typing effect or progressive reveal), integration of screenshots within the prompt content, large text reveal ('Get a prompt any agent can run.').
Feature Teaser
Distribute & Integrate with Your Workflow
“(No spoken dialogue — The ambient electronic score continues, building subtly in the background.)”
- On screen
- Loom premium page tweaks
- Camera
- Zoom out to show the full Loom share page, then a close-up on the 'Send to agent' dropdown menu.
- Motion
- UI navigation simulation (dropdown menu reveal with hover states), multi-window context (Loom page with an overlaying dropdown menu), smooth scrolling within the dropdown list.
Product Reveal
Agent Prompt in Action: Real-world Application
“(No spoken dialogue — The soundscape maintains its low-energy, ethereal quality, providing a backdrop for the impact demonstration.)”
- On screen
- Implement this Loom agent prompt: Tweak the Moor premium listing page
- Camera
- Dynamic multi-window arrangement, showing several application windows (Loom, Figma, Code editor) in a layered, 3D-like space, then a rapid zoom back to the initial Loom bar.
- Motion
- Staggered window reveal with 3D perspective shifts, rapid UI state changes (checkboxes, code updates) to simulate agent execution, quick and clean transition back to the core UI.
Call to Action
Loom: Record for Agent - Empower Your Workflow
“(No spoken dialogue — The track maintains its consistent, low-energy, and ethereal quality, fading out subtly at the end.)”
- On screen
- Loom: Record for Agent
- Camera
- Static, centered on the Loom UI bar, mirroring the opening shot, against a blurred background.
- Motion
- Re-introduction of the core product UI, subtle pulsing/glow on the 'Record for agent' button to reinforce the call to action.
Motion design primitives
Synthesizable in Remotion · key components of the loom-agent-workflow-template template.
UIElementReveal
Smooth entrance of UI components such as the Loom recording bar, contextual pop-up tooltips, and modal windows, often with subtle scaling and opacity changes.
+ Code construction recipe
Utilize Remotion's `interpolate` for `opacity` and `transform` properties (e.g., `translateY`, `scale`) combined with `spring` for a natural, responsive feel. Apply `box-shadow` for depth and separation from the background.
ScreenRecordingSimulation
Realistic animation of a mouse cursor moving, clicking, scrolling, and interacting with various UI elements on a simulated desktop screen.
+ Code construction recipe
Animate the `x` and `y` coordinates of a custom SVG cursor using `sequence` and `interpolate` to follow predefined paths. Employ `useState` or `useCurrentFrame` to manage UI element states (e.g., `isHovered`, `isClicked`) and trigger corresponding visual changes like button background color or outline animations.
ContextualAnnotationHighlight
Animated shapes (circles, arrows) and text pop-ups that appear and draw attention to specific areas or elements on the screen, providing real-time feedback or instruction.
+ Code construction recipe
Implement SVG paths or `div` elements with `border-radius` and `border` properties for drawing effects. Animate `stroke-dashoffset` for SVG path drawing or `width`/`height`/`opacity` for `div`s. Text pop-ups should use `spring` for their entrance and exit animations.
MultiWindowPerspectiveShift
Dynamic arrangement and transition between multiple application windows (e.g., browser, code editor, Loom) presented in a layered, often slightly rotated 3D space, then zooming to focus on one.
+ Code construction recipe
Render multiple `AbsoluteFill` components, each containing a screenshot or simulated UI. Apply `transform` properties (`rotateY`, `translateX`, `translateZ`, `scale`) to create a layered 3D stack. Animate these transforms using `interpolate` for smooth transitions between focused and unfocused states, creating a sense of depth and workflow progression.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The New Agent Workflow
Purpose. Hook the viewer by immediately presenting the innovative 'Record for Agent' feature and its direct value proposition.
Execution. A clean UI reveal of the Loom recording bar with the new 'Record for agent' button, accompanied by a concise value statement appearing on screen.
- 2
Contextual Capture in Action
Purpose. Demonstrate the ease and power of capturing detailed context through a live, interactive screen recording.
Execution. Dynamic screen recording simulation with realistic mouse interactions, tab switching, and visual annotations (circles, arrows) highlighting key points on a web page and a documentation site.
- 3
Automated Prompt Generation
Purpose. Highlight the core technological breakthrough: automatically transforming unstructured video into actionable, structured agent prompts.
Execution. A smooth transition to a clean modal displaying the generated prompt with embedded screenshots and text, emphasizing the automatic summarization and task breakdown.
- 4
Seamless Agent Integration
Purpose. Showcase the product's versatility and compatibility by illustrating various ways the generated prompt can be shared and integrated into existing developer/agent workflows.
Execution. A zoom out to a Loom share page, followed by a dropdown menu revealing integrations with popular coding and project management tools, demonstrating broad ecosystem support.
- 5
The Impact of Agent-Driven Development
Purpose. Provide a clear vision of the product's end-to-end value and the efficiency gains achieved by using Loom's agent prompts in a development environment.
Execution. A dynamic multi-window display showing the agent prompt being applied across different applications (design, code, project management), culminating in a successful outcome or updated UI.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
A new AI design tool, 'PixelPerfect,' that converts Figma mockups into production-ready React components.How the recipe adapts
The UIElementReveal primitive would introduce the PixelPerfect plugin within Figma. ScreenRecordingSimulation would show a user selecting a design element in Figma, triggering the AI analysis. ContextualAnnotationHighlight would draw attention to the generated code snippet and its properties. MultiWindowPerspectiveShift would showcase the generated component being used in a VS Code environment alongside the original Figma design, demonstrating the seamless handoff. The overall pacing would remain slow and deliberate, emphasizing the precision and automation of the AI.Remix blueprint · loom-agent-workflow-template
Scene durations (7 scenes, 28.9s)
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.
Fin 4 brings major upgrades to every part of the system.
Claude sits in a sidebar next to your file, reads what you have open, and edits it in place.