
A new shadcn/ui style with rounded geometry and soft elevation.
The Hook
“(No spoken dialogue — Gradual build-up with synth pad, percussive elements, rhythmic synth pulse, low-frequency drone, and a distinct riser effect.)”
Product Reveal
“(No spoken dialogue — Sub-bass drop/impact with a driving synth melody, continuation of rhythmic synth and sub-bass, building energy, followed by a more pronounced riser.)”
Feature Teaser
“(No spoken dialogue — Significant sub-bass drop/impact with a powerful, sustained synth chord, high-energy synth arpeggios and a driving beat, followed by a sweeping transition with a filter effect.)”
Call to Action
“(No spoken dialogue — Reintroduction of the driving rhythm and sub-bass, building again, final intense riser leading to a climactic moment, powerful sub-bass impact and a sustained, resonant synth chord, fading out.)”
Synthesizable in Remotion · key components of the dark-mode-ui-pan-reveal template.
A continuous, slow, and smooth camera pan across a large, multi-panel dashboard interface, revealing different sections and their content sequentially.
Utilize Remotion's `AbsoluteFill` for the entire dashboard composition. Implement `interpolate` for `translateX` and `translateY` properties of the main dashboard container, mapping the animation progress to a smooth easing function (e.g., `easeOutCubic`) to control the pan speed and direction. Ensure the dashboard content is significantly larger than the viewport to allow for extensive panning.
Individual UI elements (dropdowns, toggles, sliders, accordions) animate into an active state with subtle, quick transitions upon camera focus or implied user interaction.
For each interactive element, use Remotion's `spring` or `interpolate` with a short duration (e.g., 10-15 frames) to animate properties like `opacity`, `scale`, `rotateX`, or `translateY`. For dropdowns, animate `height` from 0 to auto. For toggles, animate `translateX` of the thumb. Coordinate these micro-animations with the `DashboardPan` primitive's timeline.
Bar charts and progress rings subtly animate their values or fill states, often accompanied by a slight glow or scale effect, to highlight data updates.
For bar charts, animate the `height` of individual bars using `interpolate` from 0 to their final value. For progress rings, animate the `stroke-dasharray` property of an SVG circle. Apply a subtle `scale` or `opacity` animation to the entire data visualization component using `spring` to give it a 'pulse' effect when it comes into focus.
Purpose. To immediately draw the viewer into the product's interface and establish its aesthetic.
Execution. Slow, continuous camera pan across the dashboard, revealing key sections and the overall dark-mode design.
Purpose. To highlight specific interactive elements and demonstrate core functionalities.
Execution. Camera focuses on dropdowns, toggles, and sliders, showing their smooth animations and responsiveness.
Purpose. To showcase the breadth and depth of the application's capabilities.
Execution. The pan continues, revealing more complex sections like payment settings, investment dashboards, and data visualizations.
Purpose. To leave a lasting impression of the product's power and elegance.
Execution. A final, broader view of the dashboard, with multiple interactive elements animating simultaneously, culminating in a sustained visual.
Objective
Create a launch video for 'QuantumFlow', a new AI-powered project management tool.How the recipe adapts
The QuantumFlow video would feature a continuous pan across its dark-themed project dashboard, showcasing AI-driven task automation and predictive analytics. Interactive elements like drag-and-drop task cards and AI suggestion pop-ups would animate with quick spring effects. Progress bars for project milestones would subtly pulse. The camera would slowly zoom into specific AI insights, maintaining the unhurried, exploratory feel, all synchronized with a high-energy electronic soundtrack.Scene durations (4 scenes, 24s)
Key Remotion components

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.