Wonder · Launch Video Breakdown: Hook, Pacing & Motion Design
Over 700 shader presets land in Wonder: attach SVGs and images and work with unique shaders on the canvas, in partnership with @npm_i_shaders.
Scene-by-scene timeline & spoken transcript
The Hook
Brand & Partnership Reveal
“(No spoken dialogue — High-energy audio transition with riser/sweep leading to sub-bass drop/impact.)”
- On screen
- Wonder Wonder x shaders
- Camera
- Static wide shot, then a subtle zoom out revealing a grid of abstract shader patterns.
- Motion
- Quick cuts, grid reveal, subtle scaling of elements.
Product Reveal
Wonder Logo Transformation
“(No spoken dialogue — Driving electronic beat with sub-bass line. Riser/sweep at 0:07.5 leading to sub-bass drop/impact at 0:08.0.)”
- On screen
- (No on-screen text)
- Camera
- Close-up on the Wonder logo, then a slight pull back as it transforms.
- Motion
- Morphing animation, 3D rendering with iridescent material, subtle camera push-in/pull-out.
Feature Teaser
Multiple Shader Styles Showcase
“(No spoken dialogue — Electronic beat continues. Riser/sweep at 0:12.5 leading to sub-bass drop/impact at 0:13.0.)”
- On screen
- Hundreds of presets now available in Wonder
- Camera
- Static wide shot showcasing three distinct shader variations of the logo, then a slight zoom out.
- Motion
- Side-by-side comparison, material swapping, subtle glow effects, text fade-in.
Call to Action
Final Call to Action
“(No spoken dialogue — Electronic beat fades out with a final sub-bass impact.)”
- On screen
- Hundreds of presets now available in Wonder wonder.design
- Camera
- Static wide shot, holding the final composition.
- Motion
- Text fade-in, sustained visual.
Motion design primitives
Synthesizable in Remotion · key components of the wonder-shader-launch-template template.
ShaderGridReveal
A grid of abstract, colorful shader patterns quickly appears and disappears, framing the central brand message. The patterns are dynamic and visually rich.
+ Code construction recipe
Utilize Remotion's <Sequence> and <AbsoluteFill> components. Each grid cell can be a separate <Composition> rendering a GLSL shader via <Shader> or <WebGL> component. Animate opacity and scale for a quick reveal/hide effect, synchronized with audio drops.
LiquidMetallicMorph
A 2D logo transforms into a 3D, liquid-like metallic object with iridescent reflections, subtly deforming and shimmering.
+ Code construction recipe
Render a 3D model of the logo with a metallic PBR material and an iridescent shader (e.g., using Three.js within Remotion). Animate mesh deformation (e.g., noise displacement) and camera position/rotation. Use environment maps for reflections.
TripleShaderShowcase
Three instances of a 3D object, each rendered with a distinct, complex shader, are presented side-by-side, highlighting visual variety.
+ Code construction recipe
Create three separate <Composition> instances, each rendering the same 3D model but with different GLSL shaders applied. Position them horizontally using CSS grid or flexbox. Animate subtle lighting changes or material properties to showcase the shaders.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Alliance
Purpose. Immediately establish the brand and a significant partnership, creating intrigue.
Execution. Wonder logo, then 'Wonder x shaders' with a dynamic grid of abstract patterns.
- 2
The Metamorphosis
Purpose. Visually demonstrate the core capability: transforming a simple object with complex shaders.
Execution. The Wonder logo morphs into a shimmering, liquid-metallic 3D form.
- 3
The Spectrum
Purpose. Showcase the breadth and variety of the new shader presets.
Execution. Three distinct, animated shader variations of the logo appear side-by-side.
- 4
The Invitation
Purpose. Conclude with a clear call to action, reinforcing the product's value proposition.
Execution. On-screen text 'Hundreds of presets now available in Wonder' and 'wonder.design'.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new AI-powered music composition tool called 'MelodyMind'.How the recipe adapts
The ShaderGridReveal primitive will be adapted to display abstract, evolving sound wave patterns. The LiquidMetallicMorph will transform a simple musical note icon into a complex, shimmering 3D waveform. The TripleShaderShowcase will present three different AI-generated musical styles (e.g., ambient, techno, classical) represented by distinct waveform animations. The text will be 'MelodyMind x AudioFlow' and 'Compose with AI' followed by 'melody.mind'.Remix blueprint · wonder-shader-launch-template
Scene durations (4 scenes, 15s)
Key Remotion components
Related Creative Tools Product Launches
Explore all Creative Tools launches →
Anthropic Labs launches Claude Design, which turns conversation into prototypes, slides and one-pagers, powered by Claude Opus 4.7.
A vibe design partner with an AI-native canvas for turning ideas into UI.
Your work tools in Claude are now available on mobile. Explore Figma designs, create Canva slides, check Amplitude dashboards, all from your phone. Give it a try: