Paper · Launch Video Breakdown: Hook, Pacing & Motion Design
A free mono font for design, coding, and prose, with variable weight, coding ligatures, and duospacing.
0:00 · The Hook · Introducing Paper Mono: A Variable Font for All
0:00 / 0:00
Scene-by-scene timeline & spoken transcript
The Hook
Introducing Paper Mono: A Variable Font for All
“mono, hello, go”
- On screen
- introducing introducing introducing introducing introducing introducing installer paper mono.magazine paper.design/mono f.glyph n.glyph t.glyph spectr bars lines ascii peak 544 Hz -13.1 dBFS - hold 1.2s gooo 8 weights variable axis 100 200 300 400 500 600 700 800 width Cap height X-height Ascender Descender Underline 502 504 506 507 single-story a duospace glyphs contextual narrow space alternate forms paper.design/mono Paper Download Open in Paper Get prints v0.320 Paper Mono is a free and open source font family Glyphs At Paper, we couldn't find the mono we wanted so we made it. Beautiful enough for a headline, functional enough for code. METRICS / UNITS Fill Outline U+0067 Glyphs letters symbols drawing A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z a μ o À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ Variable 100 Thin Aa 200 Extra Light Aa 300 Light Aa 400 Regular 500 Medium 600 Semi Bold 700 Bold 800 Ex m.glyph o.glyph Paper MCP variable wght 620 mono.player now playing 0:30.08 launch-v5 1:09.20 92 bpm E minor 0:00 intro riff groove spectrum 24 bins post-eq lines ascii peak 992 Hz -9.8 dBFS - hold 1.2s output levels L R -60 -40 -20 -10 vol bal rate 0.5x 1.0x bands preset -12 60 170 310 600 1k 3k 6k 12k 14k 16k 6k +3.0 dB Q 1.4 bell drag fine click reset film launch-v5 15 shots @ mono.magazine p-mag dive b 24 @ paper.design/mon cut b 32 @ mono.playe beats dive b 40 @ a.glyph g-a dive b 48 @ clip p-crowd dive b 52 @ p p-design dive b 54 @ duos cut b 60 dive into portal surface depth 5 a.glyph wgth wgth 520 P.glyph Aa IMG_0025.MOV - wait for it hello.tx he m r.glyph
- Camera
- Dynamic, rapid cuts between various UI elements and abstract typographic animations. The camera often zooms into specific UI windows or text elements.
- Motion
- Rapid cuts, glitch effects, text morphing, UI element pop-ins, and a 'digital swirl' effect on text. Heavy use of screen-within-screen compositions.
Product Reveal
Deep Dive into Paper Mono's Features
“mono, hello, go”
- On screen
- Paper MCP Paper De s.glyph ../paper.md paper - create_artboard (MCP) paper - write_html (MCP) <span>D</span> CAT.gif paper - duplicate L e s paper.design FOR THE LOVE OF DESIGN W.glyph o.glyph W.glyph on off Mixer Mixing music for the web means making every waveform matter. Mastering a mixtape is mostly mumbling to monitors, and wondering whether the womp-womp in measure twelve is a mistake or a motif. design in ~/paper-mono-launch ss01 coding ligatures $ cat src/film/cut-v2.ts // The film is a list of shots on the song's grid const drop = at('drop'); // beat 52 const isDrop = (b: number) => b >= drop && b <= 84; export const hello = (word: string) => word === 'mono' ? 'hello, mono' : 'hello'; const kick = hit('kick', t) !== 0; pops.filter((p) => p.at <= beat).map((p) => p.id); type Enter = 'cut' | 'dive' | 'surface'; const next = shots[i + 1] ?? null; // -> recursion if (beat >= drop) return '<!-- drop -->'; const film is a list of shots on the song's grid hello-mono.score part drop bar 18 92 bpm A minor gtr brs keys hh sd bd bass pm.glyphspackage building.. 51% Width Cap height X-height Ascender Descender Underline 605 710 509 955 -245 -100 s.glyph :0101: 01010101: 010 01010101: .01: 01010101: .0::. pm.glyphspackage building.. 97% Width Cap height X-height Ascender Descender Underline 605 710 509 955 -245 -100 o.glyph :0101: 01010101: 010 01010101: .01: 01010101: .0::. Monarch.ASCII FOR THE LOVE OF DESIGN hello-mono.strudel setcps(92/60/4) const break_ = stack( s("drums"), s("perc"), s("bass"), s("keys"), s("synth"), s("brass"), s("other"), ).begin("<0.79| .end("<0.830| arrange([4, ri [8, drop], [ equalizer 10 bands on auto preset flat drop break night MS +12 0 -12 +7 +9 +3 +4 +3 +1 +3 +2 0 pre 60 170 310 600 1k 3k 6k 12k 14k 16k 6k +1.0 dB Q 1.4 bell drag fine click reset
- Camera
- Continual rapid cuts, often focusing on specific glyphs, code snippets, or UI elements. The camera frequently pans across virtual desktop environments.
- Motion
- Dynamic UI window stacking, code editor animations, text-to-ASCII art transformations, and visual representations of audio waveforms. Glitch transitions are frequent.
Feature Teaser
Variable Weight and Duospacing in Action
“mono, hello, go”
- On screen
- (No on-screen text)
- Camera
- Fast-paced cuts between abstract typographic compositions, often showcasing the font's variable weight and duospacing features through animated text.
- Motion
- Text morphing, character-level animations, and abstract visualizers that react to the audio. The visual style becomes more abstract and less UI-focused.
Feature Teaser
Coding Ligatures and Creative Applications
“mono, hello, go”
- On screen
- the quick brown fox jumps over the lazy dog by paper.design for the love of design butterfly.mov butterfly.dither butterfly.mono butterfly.lens butterfly.ascii
- Camera
- Rapid cuts showcasing the font in various contexts, from code editors to print layouts. The camera often highlights specific ligatures or character forms.
- Motion
- Text-to-image conversion (dither, ASCII), code editor animations, and dynamic text layouts. The visual style maintains a high-energy, glitchy aesthetic.
Call to Action
Paper Mono: Available Now
“mono, hello”
- On screen
- paper mono available now paper.design/mono
- Camera
- A final, impactful reveal of the product name and call to action. The camera zooms out slightly to reveal the full text.
- Motion
- Bold text reveal with subtle glitch effects, followed by a clear call to action. The background maintains the digital noise aesthetic.
Motion design primitives
Synthesizable in Remotion · key components of the glitch-code-synthwave-launch template.
GlitchTextReveal
Text appears with a rapid, digital glitch effect, often accompanied by color shifts and pixelation before settling into its final form. Characters might appear out of order or with temporary distortions.
+ Code construction recipe
Utilize Remotion's `interpolate` and `spring` for character-level opacity and position. Apply SVG filters for pixelation, chromatic aberration, and scanline effects. Randomize glitch parameters per character or word using `random` or `noise` functions.
DynamicUIStack
Multiple UI windows (code editors, audio visualizers, glyph editors) rapidly appear, stack, and rearrange on screen, often with subtle 3D perspective shifts and quick transitions.
+ Code construction recipe
Implement a component that manages an array of UI window elements. Animate `x`, `y`, `z-index`, `scale`, and `rotation` properties using `spring` for a bouncy, responsive feel. Use `map` to render windows and `filter` to control visibility based on timeline events.
ASCIIArtTransform
Images or text elements dynamically convert into ASCII art representations, often with a flickering or 'building' effect, revealing the underlying character structure.
+ Code construction recipe
Create a Remotion component that takes an image or text as input. Implement a shader or canvas-based renderer to convert pixels to ASCII characters. Animate the `opacity` or `character_density` property over time, potentially using a `noise` function for organic growth.
Style DNA & aesthetic system
Dimension
Style DNA
Craft detail
Visual aesthetic
A high-energy, futuristic digital aesthetic blending retro computing interfaces with modern motion graphics, characterized by glitch art, code-driven visuals, and a stark, high-contrast palette.
—
Typography
Predominantly Monospace (Paper Mono itself) for code and UI elements, with some instances of Grotesque Sans for headlines. Text treatments include variable weight animation, character-level glitches, and dynamic scaling.
—
Motion
Extremely fast pacing, sharp cuts, and responsive spring damping. Interpolation curves are often aggressive, creating a sense of urgency and impact.
—
Special effects
Heavy use of glitch effects, pixelation, chromatic aberration, scanlines, dither, and subtle lens blur. Motion blur is used sparingly for impact.
—
Pacing & rhythm
Hyper-fast editing cadence with 58 cuts/minute, synchronized precisely with the driving electronic beat. Visuals are tightly choreographed to audio drops and rhythmic vocal samples.
—
Conceptual story rhythm
- 1
Digital Immersion
Purpose. Immediately immerse the viewer in a tech-forward, code-centric world, establishing the product's domain.
Execution. Rapid-fire cuts of UI elements, code snippets, and abstract digital patterns, all synchronized to the intense electronic music.
- 2
Feature Showcase Montage
Purpose. Highlight key features (variable weight, ligatures, duospacing) through dynamic, visually engaging demonstrations.
Execution. Animated text morphing, glyph path visualizations, and code editor interactions, demonstrating the font's versatility and technical depth.
- 3
Creative Application Burst
Purpose. Illustrate the font's broader creative potential beyond just coding, appealing to designers and artists.
Execution. Quick cuts showing the font in print, as ASCII art, and integrated into various design contexts, emphasizing its aesthetic qualities.
- 4
Impactful Call to Action
Purpose. Conclude with a clear, memorable call to action, reinforcing the brand and directing viewers.
Execution. Bold, large-scale text reveal of the product name and URL, with a final, satisfying visual and audio drop.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Create a 60-second product launch video for a new open-source audio synthesis library called 'SynthwaveJS'. The video should adopt the high-energy, glitchy, and code-driven aesthetic of the Paper Mono launch. Focus on rapid cuts, dynamic UI window stacking, and visual representations of audio waveforms and code. Incorporate heavily processed vocal samples like 'synth' and 'wave' as percussive elements. The visual style should be dark, futuristic, and energetic, with a clear call to action at the end.
Sample remix
Objective
Launch a new open-source audio synthesis library, 'SynthwaveJS', targeting developers and electronic music producers.How the recipe adapts
The 'GlitchTextReveal' primitive would be used for displaying code snippets and library function names. 'DynamicUIStack' would showcase multiple virtual audio workstations, code editors, and waveform visualizers interacting. 'ASCIIArtTransform' could convert abstract sound patterns into visual ASCII representations. The color palette would shift to dark blues, purples, and neon greens, maintaining the high contrast. The audio would feature a driving synthwave beat with processed vocal samples of 'synth' and 'wave' replacing 'mono' and 'hello'.Remix blueprint · glitch-code-synthwave-launch
Scene durations (6 scenes, 60s)
7s
10s
12s
10s
8s
13s
Key Remotion components
Related Design Product Launches
Explore all Design launches →
Hook 9.10k
CuaDesign
An open-source library to create and draw cursor animations.
@trycua