Scene-by-scene timeline & spoken transcript
The Hook
Template Selection
“(No spoken dialogue — silent screencast)”
- On screen
- Gradient Layers Choose from the pre-defined templates below Bench table Burger Fading mask Paste your CSS background: [linear-gradient...]
- Camera
- Static screen recording
- Motion
- Cursor hover and click selection
Product Reveal
Gradient Workspace & Timeline
“(No spoken dialogue — silent screencast)”
- On screen
- Gradient Layers Reset Copy Edit CSS 138 Layers conic-gradient radial-gradient linear-gradient Timeline
- Camera
- Static screencast focus on central viewport
- Motion
- Cursor scrubbing timeline and selecting layer elements
Feature Teaser
3D Layer Exploded View
“(No spoken dialogue — silent screencast)”
- On screen
- 3D Width 540 px Height 562 px Background image conic-gradient
- Camera
- Interactive 3D orbit and perspective tilt
- Motion
- Z-space layer separation and orbital camera rotation
Call to Action
Layer Inspector & Code Controls
“(No spoken dialogue — silent screencast)”
- On screen
- radial-gradient circle at 50% 12% linear-gradient Angle 106 deg Color stops #99623e #ffffff
- Camera
- Static framing with cursor clicks on the inspector sidebar
- Motion
- UI property tweaking and layer highlight states
Motion design primitives
Synthesizable in Remotion · key components of the dev-tool-layer-exploded-view template.
ExplodedLayerStack3D
Separates multi-layered 2D graphic planes along the z-axis with perspective orbit.
+ Code construction recipe
Map layer array to Three.js PlaneGeometries or CSS preserve-3d divs with dynamic translateZ offsets driven by spring interpolation.
InteractiveTimelineScrubber
Keyframe strip at bottom with playhead tracking and frame preview thumbnails.
+ Code construction recipe
Remotion useCurrentFrame mapped to playhead left percentage over total frames with thumbnail image sequence.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Entry
Purpose. Introduce tool and asset selection.
Execution. Clicking template tile on simple form view.
- 2
Exploration
Purpose. Demonstrate layer depth and animation controls.
Execution. Scrubbing bottom animation timeline.
- 3
The Reveal
Purpose. Highlight unique 3D layer explosion capability.
Execution. Toggling 3D view and dragging canvas to rotate exploded stack.
- 4
Inspection
Purpose. Show granular property manipulation.
Execution. Selecting sidebar layers and inspecting gradient stops.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
SVG / Canvas Shader Stacking Studio launch videoHow the recipe adapts
Replace CSS burger artwork with multi-pass post-processing shader layers, exploding blur, color grading, and lighting planes in 3D space.Remix blueprint · dev-tool-layer-exploded-view
Scene durations (4 scenes, 17s)
Key Remotion components
Related AI & ML Product Launches
Explore all AI & ML launches →
Introducing Griffin, the first AI to pass the video Turing test
The most emotive and controllable TTS model
We just released QVAC TranscribePsy, a speech-to-text model small enough to run inside a phone app. It covers 25 European languages on a laptop and 8 on a phone, and on an iPhone 17 Pro Max's Ne