Claude sits in a sidebar next to your file, reads what you have open, and edits it in place.
The Hook
“(No spoken dialogue — A clean, arpeggiated pizzicato synth melody over sustained synth pads and a deep sub-bass introduces the product with a subtle electronic rhythm.)”
Product Reveal
“(No spoken dialogue — The ambient electronic score continues, with subtle clicks and metallic sounds accompanying UI interactions. A high-energy riser builds towards the content transformation.)”
Feature Teaser
“(No spoken dialogue — The electronic score maintains its rhythmic texture. Sound design elements accompany file drag-and-drop and the rapid population of spreadsheet data, culminating in a subtle impact sound.)”
Feature Teaser
“(No spoken dialogue — The ambient score continues, with subtle electronic sounds for UI clicks and a more pronounced sweep and impact as the presentation is generated.)”
Call to Action
“(No spoken dialogue — The audio track builds to a significant impact/drop, followed by a sustained synth pad and the fading pizzicato melody, providing a conclusive feel.)”
Synthesizable in Remotion · key components of the ai-creative-copilot-launch template.
A fluid, almost magical transformation from one application interface (e.g., Google Docs) to another (e.g., Google Sheets) within the same browser window context. Elements might scale, slide, or morph, maintaining a strong sense of continuity and a single, unbroken user journey.
Utilize `interpolate` for smooth scaling, positioning, and opacity changes of the browser window and its internal content. Employ `spring` animations for subtle bounces or easing during the transition. Keyframe the browser window's URL bar and title to update mid-transition, potentially using `SVG filters` for complex morphing effects on the content area.
A sidebar panel slides in from the right, revealing AI prompts, responses, and interactive elements (e.g., file drop zones, skill lists). Text within the sidebar dynamically types out or fades in, simulating real-time AI generation.
Use `spring` for the sidebar's entry/exit animation (e.g., `translateX`). Implement a custom `TypewriterEffect` component for text generation, using `interpolate` on `text.length` or `opacity` for character-by-character reveal. Manage state for interactive elements (e.g., file cards, toggles) to animate their appearance and disappearance with `tween` or `spring`.
Specific sections of the main application content (e.g., document text, spreadsheet cells, presentation slides) highlight, reformat, or populate with new data/graphics in response to AI actions, showcasing the 'before and after' effect.
Animate `opacity`, `backgroundColor`, `transform` (scale, position) for individual content blocks. Use `sequence` and `delay` to orchestrate complex multi-step content changes. For data population, `map` over data arrays and animate each item's entry using `spring` or `tween` with staggered delays. SVG paths could be used for animating chart growth.
A realistic cursor icon moves across the screen, hovers over UI elements, and simulates clicks or drag-and-drop actions, guiding the viewer's attention and demonstrating user input.
Create a `Cursor` component that follows a predefined `motionPath` (array of `[x, y]` coordinates) using `interpolate` for `x` and `y` coordinates. Animate `scale` or `opacity` for click feedback. For drag-and-drop, animate the dragged element's `transform` along with the cursor's movement.
Purpose. Establish the product's context and integration within familiar tools.
Execution. Displaying the Claude brand alongside Google Workspace app icons, setting the stage for seamless integration.
Purpose. Demonstrate Claude's ability to enhance productivity by automating complex tasks within a common workflow.
Execution. Showing Claude intelligently reformatting and summarizing a document in Google Docs, highlighting the 'before and after' transformation.
Purpose. Showcase Claude's versatility in handling different data types and generating insights.
Execution. Seamlessly transitioning to Google Sheets, demonstrating file ingestion and automated report generation with charts and conditional formatting.
Purpose. Illustrate Claude's power in synthesizing information from multiple sources to create polished outputs.
Execution. Smoothly moving to Google Slides, activating connectors (Salesforce, Google Drive), and generating a comprehensive business review presentation.
Purpose. Reinforce the core message that Claude is an omnipresent, intelligent assistant across all work environments.
Execution. A concluding statement 'Claude wherever you work' followed by the clean, confident display of the Claude brand logo.
Objective
A graphic designer needs to quickly generate multiple social media ad variations from a single master design file in Photoshop, then adapt them for print in InDesign, ensuring brand consistency.How the recipe adapts
The SeamlessAppTransition primitive would animate a fluid shift from a Photoshop interface to an InDesign interface, maintaining the browser-like window aesthetic. The DynamicSidebarInteraction would show CanvasFlow's sidebar appearing in Adobe apps, where the designer inputs prompts like 'Generate 5 variations for Instagram, then adapt for print in InDesign.' The IntelligentContentTransformation would then animate the Photoshop canvas populating with new design elements and text variations, followed by the InDesign document automatically laying out the print-ready versions, highlighting consistent branding elements. The CursorGuidedInteraction would simulate the designer selecting options or dragging assets.Scene durations (5 scenes, 60.1s)
Key Remotion components
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.
Turn your video into an agent prompt with links, screenshots, and context captured automatically.