Scene-by-scene timeline & spoken transcript
The Hook
Adding a Dashboard View
“(No spoken dialogue — ambient silence)”
- On screen
- Company Dashboard Dashboard H1 Department hiring Work progress by team + Start from scratch Table Board Gallery List Chart Dashboard Timeline Feed Map Calendar Form Or describe a view...
- Camera
- Smooth zoom in from full desktop window to view selection dropdown
- Motion
- Cursor tracking with ease-in zoom and popover modal scale-up
Product Reveal
Rearranging Dashboard Layout
“(No spoken dialogue — ambient silence)”
- On screen
- Staff review 26H1 Project progress Teams by location Task load on high priorities Task status overview 391 Total Done
- Camera
- Focused crop tracking widget drag operations across the grid
- Motion
- Direct manipulation UI dragging, grid reflow animation, drop indicator snapping
Feature Teaser
Full Dashboard Overview & Scrolling
“(No spoken dialogue — ambient silence)”
- On screen
- Task Burndown Company meeting frequency Department size Engineering Customer Success Data & Analytics Marketing
- Camera
- Vertical smooth scroll down and back up revealing charts and metrics
- Motion
- Inertial scroll physics with hover tooltip activations
Call to Action
Multi-Tab Analytics & Outro
“(No spoken dialogue — ambient silence)”
- On screen
- Department hiring Work progress by team Total headcount by department 25 Total Hiring pipeline Tasks by Team 391 Total 110 Total
- Camera
- Tab switching transitions followed by smooth camera pull-back to centered application window
- Motion
- Instant tab-state crossfades and fluid spring-damped camera zoom-out
Motion design primitives
Synthesizable in Remotion · key components of the saas-dashboard-grid-showcase template.
CursorInteractionRig
Simulates smooth bezier cursor paths with synchronized click scales and widget drag-and-drop operations.
+ Code construction recipe
Animate x and y coordinates using interpolate and spring on frame values; tie component scale and translation to cursor active drag state.
DynamicGridWidgetReorder
Grid cards fluidly resize and reposition when a dragged card is dropped into a new grid slot.
+ Code construction recipe
Calculate layout bounds via CSS Grid; apply layout animations with spring physics triggered upon cursor release.
WindowFocusCamera
Smoothly interpolates camera scale and translation to highlight active UI sectors before pulling back to full frame.
+ Code construction recipe
Wrap viewport in an animated div utilizing Remotion interpolate for transform scale and translate3d coordinates.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Setup & Selection
Purpose. Demonstrate ease of creating a new dashboard view from the view switcher.
Execution. Dropdown expansion and selection of Dashboard item.
- 2
Customization
Purpose. Show flexible drag-and-drop customization of modular reporting blocks.
Execution. Map card picked up and swapped with the project progress line chart.
- 3
Exploration
Purpose. Highlight deep analytics capabilities across multiple departments.
Execution. Scroll through charts, followed by rapid switching between report tabs.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
DevOps Incident Management Platform LaunchHow the recipe adapts
Replace Notion tables with server uptime charts, latency monitors, and incident triage tabs while retaining the cursor interaction and layout reflow motion.Remix blueprint · saas-dashboard-grid-showcase
Scene durations (4 scenes, 25s)
Key Remotion components
Related AI Agents Startup Launches
Explore all 1064 AI Agents launches →
To ensure that artificial general intelligence benefits all of humanity
Introducing Claude Fable 5: a Mythos-class model that we’ve made safe for general use. Its capabilities exceed those of any model we’ve ever made generally available. https://t.co/2AvmEjHIX8
To understand the true nature of the universe.