Disney's animators wrote down twelve principles in the 1930s that make drawn things feel alive. Overprint uses all twelve on purpose, and every demo here is a real piece of the system playing the way it plays on a site: no stand-ins. Each section names the tokens behind it and one rule to keep.
Squash and stretch#
A thing that lands squashes; a thing that springs stretches. It is what makes a block feel heavy and a stamp feel inked. A block hopping off a card squashes to 1.04 by 0.92 before it leaves, stretches to 0.98 by 1.03 at the top and squashes again when it lands; display type squashes on its width axis, the one axis that never moves a word's baseline.
Squash
Tokens: --mk-dur-block-hop (620 ms), --mk-ease-hop; the width axis moves at most 20, 40 or 60 units at Studio, Press and Rave.
The rule
Anticipation#
Before the move, a small move the other way tells the eye what is coming. A key lifts a hair on hover, so the press that sinks it 2 px reads as a press. A stamp hangs at 1.9 times its size before it falls, so the landing has somewhere to come from.
Quote for Dana Whitfield
Sent on 23 October 2026. Reply within a day.
Tokens: --mk-dur-hover (200 ms), --mk-dur-key-sink (120 ms), --mk-dur-stamp (460 ms) on --mk-ease-stamp.
The rule
Staging#
One idea at a time, presented so nobody can miss it. A page's head lands before its plates; there is one hero per view; at Studio there is one SFX per view. When everything moves, nothing reads.
Case study
Fernlight
A booking site for a plant shop in Leith, live in six weeks.
Fernlight
Bookings, live in six weeks.
Pebblepath
Trail maps that work offline.
Mei Tanaka Studio
A portfolio that loads in a blink.
Tokens: --mk-dur-arrival (360 ms at Studio) for the head, then --mk-dur-panel and --mk-dur-panel-stagger for the plates.
The rule
Straight ahead and pose to pose#
Straight ahead animation is drawn frame after frame, finding the motion as it goes; pose to pose sets the key poses and fills between them. The ink field is straight ahead: a simulation that works out every frame. Every moment the kits ship is pose to pose: keyframes at chosen poses, eased between.
Tokens: the field's --mk-dur-field-wake, --mk-dur-field-run and --mk-dur-field-ease; the sticker's --mk-dur-sticker-pop on --mk-ease-pop, through mk-land's three poses.
The rule
Follow-through and overlapping action#
Nothing stops all at once. Specks fly after the stamp has landed, a sticker settles after its pop, and panels in a batch overlap on their stagger, each starting before the last has finished.
Quote for Dana Whitfield
Sent on 23 October 2026. Reply within a day.
Fernlight
Bookings, live in six weeks.
Pebblepath
Trail maps that work offline.
Mei Tanaka Studio
A portfolio that loads in a blink.
Tokens: --mk-dur-specks (640 ms, starting at the thump), --mk-dur-panel-stagger (40 ms at Studio).
The rule
Slow in and slow out#
Real things speed up and slow down. Every Overprint move eases on a named curve, and most arrivals use out: fast off the mark, a long settle.
--mk-ease-outcubic-bezier(0.16, 1, 0.3, 1)Panels, the SFX pop and most arrivals: fast, then a long settle.--mk-ease-in-outcubic-bezier(0.7, 0, 0.2, 1)Symmetric moves, like the paper crossfade.--mk-ease-popcubic-bezier(0.34, 1.56, 0.64, 1)Hover lifts, a sticker's pop, ticks: past the mark and back.--mk-ease-stampcubic-bezier(0.2, 0.8, 0.2, 1)A stamp's fall and a cover's print: a hard landing.--mk-ease-registercubic-bezier(0.5, 0, 0.2, 1)The second ink's approach to its rest offset.--mk-ease-titlecubic-bezier(0.2, 0.8, 0.3, 1)A title's arrival and the width stretch-in.
The rule
Arcs#
Living things move on arcs, not straight lines. A hopping block rises and falls on an arc; an SFX turns as it pops; on the live pile, TIDY's crane carries each block up, over and down into its seat.
Tokens: --mk-ease-hop, --mk-dur-sfx-pop (700 ms); the crane's numbers are on the 3D page.
The rule
Secondary action#
A second, smaller action supports the main one. When a stamp lands, the card it lands on thumps, specks fly, the ink field beside it pulses and, with sound on, it goes THUNK. Each says the same thing: something was stamped.
Quote for Dana Whitfield
Sent on 23 October 2026. Reply within a day.
Tokens: --mk-dur-thump (220 ms at 250 ms), the field's pulse (mk:pulse 0.5, --mk-dur-field-pulse), the stamp voice.
The rule
Timing#
The number of frames is the meaning: fast reads as light and snappy, slow as heavy or important. Overprint's timing is a set of tokens per volume, so a whole section can be made calmer or louder without touching a keyframe.
| Token | Quiet | Studio | Press | Rave |
|---|---|---|---|---|
--mk-dur-panel | None | 300 | 360 | 420 |
--mk-dur-panel-stagger | None | 40 | 48 | 55 |
--mk-dur-arrival | 160 | 360 | 440 | 520 |
--mk-dur-register | None | 520 | 520 | 520 |
--mk-dur-sticker-pop | None | 480 | 480 | 480 |
--mk-dur-stamp | None | 460 | 460 | 460 |
--mk-dur-wipe | None | None | 410 | 480 |
The rule
Exaggeration#
Push a moment past real life so it reads. The volume dial is Overprint's exaggeration control: the same panels and sticker arrive at Quiet, Studio, Press and Rave below, from a plain change of state to a slap.
Quiet
Fernlight
Live in six weeks.
Studio
Fernlight
Live in six weeks.
Press
Fernlight
Live in six weeks.
Rave
Fernlight
Live in six weeks.
Tokens: --mk-a-panel switches the keyframes per volume (mk-panel-in-studio, -press, -rave); the sticker's lean grows 1.6 and 2.5 times at Press and Rave.
The rule
Solid drawing#
Things have weight and volume, and light falls on them the same way every time. Every block, in GL, CSS 3D or SVG, is drawn from one model with one house camera and one key light, and its shadow falls right and back.
Tokens: --mk-dur-block-drop (700 ms) and --mk-dur-block-drop-stagger (90 ms) on --mk-ease-fall; the inks from the tokens' 3D ramps.
The rule
Appeal#
The sum of it: motion people want to watch again. Overprint's appeal is print: ink that registers, stickers that slap on and settle square, a hit word for a punchline, and words that never wobble.
Built to be tested
The rule