Cube Motion · Launch Video Breakdown: Hook, Pacing & Motion Design
Cube Motion is an animation library whose launch film is every frame an SVG drawn in JavaScript. No After Effects, no WebGL.
Scene-by-scene timeline & spoken transcript
The Hook
Introducing Cube Motion: Four Motions, No Dials
“(No spoken dialogue — ambient visual with a 110 BPM rhythm)”
- On screen
- Four motions. No dials.
- Camera
- Static, centered view of a sphere of dots, then a slight zoom out to reveal multiple spheres.
- Motion
- Dot matrix animation forming a sphere, then dissolving and reforming into multiple spheres. Text appears with a subtle fade-in.
Feature Teaser
Core Motion Primitives: Rise, Leave, Morph, Reveal
“(No spoken dialogue — ambient visual with a 110 BPM rhythm)”
- On screen
- rise() An easy entrance. leave() A clean exit. morph() One state into the next. reveal() When it enters view.
- Camera
- Static, left-aligned text with dynamic dot matrix animations on the right.
- Motion
- Dot matrix animations forming abstract shapes (rectangles, text) that animate in/out, morph, and reveal, demonstrating the library's functions. Text fades in with each new function.
Product Reveal
Four Adapters for Modern Frameworks
“(No spoken dialogue — ambient visual with a 110 BPM rhythm)”
- On screen
- Four adapters. Solid Svelte React Vue
- Camera
- Static, left-aligned text with dot matrix spheres representing frameworks on the right.
- Motion
- Dot matrix spheres with framework logos appear and disappear, then coalesce into a single dot matrix cube, symbolizing integration.
Call to Action
Cube Motion: Get Started Today
“(No spoken dialogue — ambient visual with a 110 BPM rhythm)”
- On screen
- cube cube-motion.dev npm i cube-motion
- Camera
- Static, centered view of a wireframe cube, then text appears below it.
- Motion
- Dot matrix cube transforms into a clean wireframe cube. Text fades in, then a terminal-style npm install command animates character by character.
Motion design primitives
Synthesizable in Remotion · key components of the dot-matrix-dev-tool-launch template.
DotMatrixMorph
Objects or text are represented by a dense field of small, uniformly sized dots that can animate, morph, and dissolve into other shapes or states. The dots maintain a consistent visual style.
+ Code construction recipe
Utilize Remotion's <AbsoluteFill> and <Sequence> components. Implement a custom SVG component that renders a grid of <circle> elements. Animate the 'cx', 'cy', 'r' (radius), and 'opacity' properties of these circles using `interpolate()` or `spring()` to achieve morphing effects between different SVG paths or text outlines. Use `map()` to iterate over an array of point coordinates derived from target shapes.
TerminalTypewriter
Text appears character by character, mimicking a command-line interface, often with a blinking cursor at the end of the input.
+ Code construction recipe
Employ `useCurrentFrame()` and `interpolate()` to reveal characters of a string sequentially. A blinking cursor can be achieved with `spring()` or `loop()` on the opacity of a pipe character ('|') at the end of the revealed text.CleanFadeTransition
Elements appear or disappear smoothly through changes in opacity, often combined with subtle scaling or position shifts.
+ Code construction recipe
Apply `interpolate()` to the `opacity` CSS property from 0 to 1 (or vice versa) over a short duration. Optionally, combine with `transform: scale()` or `transform: translateY()` for added dynamism, using `spring()` for a natural feel.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Abstract Problem
Purpose. Introduce the complexity of motion design and hint at a simpler solution.
Execution. Abstract dot matrix sphere representing complex motion, followed by text 'Four motions. No dials.'.
- 2
The Solution's Simplicity
Purpose. Showcase the core, easy-to-use functions of the library.
Execution. Sequential demonstrations of `rise()`, `leave()`, `morph()`, and `reveal()` with corresponding dot matrix animations.
- 3
Broad Compatibility
Purpose. Highlight the library's integration with popular modern web frameworks.
Execution. Dot matrix spheres with framework logos (Solid, Svelte, React, Vue) converging into a single cube.
- 4
Call to Action & Brand Identity
Purpose. Reinforce brand and provide clear instructions for adoption.
Execution. Clean wireframe cube logo, product name, website, and npm install command with a typewriter effect.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
A new API gateway product called 'FlowRouter' that simplifies microservice routing.How the recipe adapts
The DotMatrixMorph primitive would animate abstract representations of data packets flowing between microservices, morphing from one service icon to another. TerminalTypewriter would display example routing configurations. The CleanFadeTransition would introduce new features like load balancing or authentication. The color palette would remain dark, with a new accent color like a vibrant teal to represent data flow. The pacing would stay slow and deliberate, emphasizing the clarity and control FlowRouter provides.Remix blueprint · dot-matrix-dev-tool-launch
Scene durations (4 scenes, 35s)
Key Remotion components
Related Creative Tools Product Launches
Explore all Creative Tools launches →
A vibe design partner with an AI-native canvas for turning ideas into UI.
We heard you wanted to use Codex rate limit resets on your own time. Starting today, we’re rolling out the ability to save rate limit resets to use later. We’re starting Go, Plus, Pro, and Business
Introducing Framer 3.0 with Agents, Branching, Community, and an all-new design.