Scene-by-scene timeline & spoken transcript
The Hook
Algorithmic Canvas Immersion
“(No spoken dialogue — The track opens with a sustained, ethereal synth pad, setting an atmospheric and intriguing tone.)”
- On screen
- hello-mono, file, mp3, live, strudel, pause, 0:00.87, bar 4.2, 92, 138, hold section, hud, classic player, canvas remotion 1080 x 1080 30 fps frame 2a, hello-mono.strudel, mp3, following the mp3, strudel loops of its own, one cycle = one bar, every stem that sounds in it, setups(92/60/4), const riff = stack(, drums, perc, bass, keys, synth, other, begin, end, const groove = stack(, drums, perc, bass, keys, synth, other, begin, end, arrangement - 11 stems - 27 bars, click to seek, 8 section to jump, this bar - 24 steps, bar 4 step 8/24 beat 2 of 4 beat 6 of 6, 92, 138, kick, snare, hats, boss, layers, shots, grid, outline, mog, site, groove, lift, crowd, design, mixer, eq, code-link, blue, pattern, break, home, introducing, the frame in Paper, OPEN NOW, s-blue-1, s-block-1, nursst
- Camera
- Static wide shot of a complex desktop UI, simulating a screen recording, with a focus on a central canvas area and surrounding code/control panels.
- Motion
- Subtle UI element highlights, cursor movement, code editor scrolling, and a dynamic waveform visualization reacting to the audio track.
Product Reveal
Glyphic World Unveiled
“(No spoken dialogue — A rhythmic, almost vocal-like synth arpeggio enters, adding a sense of progression and discovery.)”
- On screen
- Installer, 53%, paper mono, f.glyph, hello.txt, goo, the outline world, the frame in Paper, OPEN NOW, s-blue-1, s-block-1, nursst
- Camera
- Maintains a static desktop UI perspective, but new application windows pop up and animate within the central canvas.
- Motion
- Text outline drawing animation, UI window pop-up and resizing with spring-like easing, a progress bar animation, and cursor interaction highlighting key elements.
Feature Teaser
Interactive Type & Sound Design
“(No spoken dialogue — Percussion enters around 0:11 with a driving electronic drum beat. A high-energy riser builds from 0:20 to 0:24, culminating in a subtle impact.)”
- On screen
- mono-player now playing, 0:29.50, hello, m.glyph, wight, 300, Aa, D, r, P.glyph, hello.txt, ASCII, butterfly
- Camera
- Static desktop UI, with the central canvas showcasing dynamic, often 3D-rendered, text and UI elements.
- Motion
- Variable font weight animation, complex text morphing (e.g., 'D' transforming into other shapes), text reveal with a yellow highlight box, and UI elements (like a music player) visually reacting to the audio track, synchronized with the audio riser.
Feature Teaser
Dynamic Design Tools & Code
“(No spoken dialogue — The track features a consistent, driving electronic soundscape with atmospheric textures and rhythmic pulses.)”
- On screen
- Paper: MCP, duospace, W O W, off, Mixer, Mixing music for the web means, Mastering every waveform matter., Making a mixtape is mostly, mumbling to monitors, and wondering, whether the womp-womp in measure, twelve is a mistake or a motif., the code, the frame in Paper, OPEN NOW, s-blue-1, s-block-1, nursst
- Camera
- Static desktop UI, with a focus on the main canvas and various pop-up windows demonstrating different functionalities.
- Motion
- Text reveal with pixelation/dither effects, 'duospace' text appearing with a subtle glitch, individual character animation for 'WOW', mixer UI elements moving in response to implied audio, and code editor scrolling to reveal new snippets.
Feature Teaser
Algorithmic Artistry & Textures
“(No spoken dialogue — A less intense riser is present from 0:37 to 0:38. The latter part of the track returns to a more ambient, sustained synth sound with a prominent, almost 'wah' like filter sweep effect on a synth bass.)”
- On screen
- pm.glyphpackage, Width, 605, Cap Height, 710, X-Height, 490, Ascender, 955, Descender, -248, Underline, -100, o.glyph, 0101, 0101, 01, 01, 010, 01010101, 01, Monopatch.ASCII, equalizer 10 bands, the quick brown fox. jumps over the lazy dog
- Camera
- Static desktop UI, with the main canvas area displaying detailed glyph metrics, an equalizer, and dynamic text effects.
- Motion
- Glyph outline drawing with numerical data animation, equalizer bar animation, text distortion/pixelation effects, and a 3D page-turn effect applied to a block of text.
Feature Teaser
Generative Visual Effects
“(No spoken dialogue — The ambient, sustained synth sound continues with the 'wah' filter sweep effect.)”
- On screen
- butterfly.mov, butterfly.dither, butterfly.memo, butterfly.lens, butterfly.lc-dither, butterfly.ascii
- Camera
- Static desktop UI, with the central canvas showcasing a grid of images undergoing various visual treatments.
- Motion
- Grid layout animation, dither/pixelation effects applied to images, subtle lens distortion, and various other image processing effects, demonstrating the product's generative capabilities.
Call to Action
Paper Mono: Available Now
“(No spoken dialogue — The track concludes with a final, long decaying synth pad, providing a sense of resolution.)”
- On screen
- paper mono, available now, paper.design/mono
- Camera
- Static desktop UI, with the main canvas transitioning to display the product name and call to action.
- Motion
- Clean text reveal animation, subtle glow/blur effects on the text, and a clear display of the product branding and URL, fading out to a final abstract grid.
Motion design primitives
Synthesizable in Remotion · key components of the code-driven-generative-design-launch template.
CodeDrivenUIStack
Layered UI windows and code editor panels appear, resize, and move dynamically, often revealing underlying code or visual elements. Interactions are highlighted by cursor movements and subtle UI feedback.
+ Code construction recipe
Utilize Remotion's `AbsoluteFill` and `Sequence` for layering. Implement `spring` animations for window pop-ins and resizing. Use `interpolate` for cursor paths and UI element opacity/scale changes. Code editor content can be rendered as text components with `Typewriter` effects.
GlyphMorphingAndVariableText
Individual characters or entire text blocks transform, morph, or animate their outlines and weights. This includes drawing effects, variable font sliders, and pixelation/dither on text.
+ Code construction recipe
Leverage SVG path animations for outline drawing. Implement `interpolate` for variable font weight changes. Use `Shader` components or `Canvas` for pixelation, dither, and glitch effects on text. Character-level animations can be achieved by mapping `Sequence` components to individual letters.
GenerativeVisualizer
Abstract visual elements, images, or data representations (like waveforms, equalizers, grids of effects) react to an underlying 'code' or 'audio' input, showcasing generative art capabilities.
+ Code construction recipe
Employ `WebGL` or `Canvas` components for complex generative patterns and real-time audio visualization. Use `Shader` components for dither, lens blur, and other image processing effects. Data-driven animations can be implemented with `useCurrentFrame` and `interpolate` to synchronize visuals with audio analysis data.
GlitchAndDitherTransition
Visual elements, text, or entire scenes transition with pixelation, dither patterns, scanlines, or subtle glitch artifacts, often synchronized with audio impacts.
+ Code construction recipe
Create custom `Shader` components for dither, pixelation, and scanline effects. Use `spring` or `interpolate` with `easeOut` for quick, impactful transitions. Combine `Opacity` and `Transform` properties with noise functions for glitch effects.
CodeDrivenTextReveal
Text appears with a programmatic feel, often highlighted by a bounding box, a wipe effect, or a subtle glitch, as if being 'rendered' by code.
+ Code construction recipe
Use `Sequence` and `interpolate` for character-by-character or word-by-word reveals. Implement `ClipPath` or `Mask` for wipe effects. A `Box` component with `spring` animation can create the highlight box. Combine with `Shader` for subtle glitch on reveal.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Digital Canvas
Purpose. Introduce the viewer to the product's environment, where code and creative design converge in a seamless, interactive UI.
Execution. Opening with a dense, functional desktop UI, showcasing code, waveforms, and layered application windows, immediately establishing a high-tech, creative context.
- 2
Glyph as a Living Entity
Purpose. Demonstrate the product's core capability: treating typography not as static elements, but as dynamic, manipulable, and generative objects.
Execution. Animations of text outlines being drawn, characters morphing, variable font weights changing, and glyphs interacting with UI elements.
- 3
Code Orchestrates Creativity
Purpose. Illustrate how the underlying code directly drives and influences the visual and auditory output, emphasizing the product's programmatic nature.
Execution. Code snippets scrolling, UI elements reacting to implied audio, and visualizers (like equalizers) animating in sync with the music, reinforcing the 'everything is code' tagline.
- 4
Unleashing Generative Design
Purpose. Showcase the product's advanced capabilities in generating complex visual effects and patterns from simple inputs or algorithms.
Execution. Grids of images with various dither, pixelation, and lens distortion effects, alongside abstract patterns and text distortions, highlighting the generative art aspect.
- 5
The Product's Promise
Purpose. Conclude by clearly stating the product's name and availability, solidifying its identity and inviting user engagement.
Execution. A clean, impactful reveal of 'paper mono available now' and the product URL, with subtle branding animations.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
A new web-based visual editor for interactive data visualizations, allowing designers to create complex charts and graphs with drag-and-drop functionality, powered by a robust backend.How the recipe adapts
The 'Paper Mono' recipe adapts by replacing glyph manipulation with data visualization elements. Instead of variable fonts, we'd see dynamic chart types morphing and animating based on simulated data inputs. The UI window stacking would showcase the visual editor's interface, with code snippets replaced by data schema definitions. Generative art effects would be applied to data points and chart backgrounds, reacting to user interactions or data changes. The overall aesthetic would maintain the clean, code-inspired look but with a focus on data-driven aesthetics.Remix blueprint · code-driven-generative-design-launch
Scene durations (7 scenes, 60.6s)
Key Remotion components
Related Motion Product Launches
Explore all Motion launches →
AI is already smart enough. Real-world tasks are still slow, expensive and unreliable, because we hand AI a computer built for humans, then wrap it in a heavy harness. AI doesn’t need to get smarter
Big day 🔥 🚀 Introducing Dolphin AI - an agentic AI studio for complete video production. The story of Dolphin is very interesting. It didn’t start as a product. It started as an internal tool. W
Claude Dashboards and Claude Motion are in beta today. Ask Claude to turn your data into live dashboards and your ideas into animated explainers. https://t.co/V3fU4lMnzp