Overprint moves like a print shop: things land, snap into register and settle. Every animation answers a cause (a page arriving, a press, a scroll), settles within five seconds at the default volume, and leaves the words still (D-H1, D-E3). The reading layer's motion is the same at every volume; the expressive layer's grows with the dial.
The rules#
- Caused, then calm. Ambient motion settles within 5 s at Quiet and Studio. Anything that loops at Press or Rave shows a pause key (WCAG 2.2.2).
- Words never move once they are read: they are revealed, not slid around. No hover effect changes a text box's size or position.
- Transforms and opacity only, so nothing reflows.
- Reduced motion always wins. Every duration drops to 0 except a few short fades, and moments show their end state.
- No strobes. Flashes happen once per cause, never more than three times a second (WCAG 2.3.1).
Curves#
--mk-ease-pop--mk-ease-out--mk-ease-in-out--mk-ease-stamp--mk-ease-drop--mk-ease-land--mk-ease-title--mk-ease-squeegee--mk-ease-fold--mk-ease-fly--mk-ease-split--mk-ease-snap--mk-ease-register--mk-ease-slap--mk-ease-squash--mk-ease-wipe--mk-ease-wipe-hold--mk-ease-wipe-exit--mk-ease-hop--mk-ease-fall
Durations#
Each duration has a value per volume. Reading-layer motion is fixed; micro moments switch off at Quiet; long moments (panels, arrivals, wipes) grow from Studio to Rave.
| Token | Class | Quiet | Studio | Press | Rave | Reading layer |
|---|---|---|---|---|---|---|
--mk-dur-hover | Fixed | 200 | 200 | 200 | 200 | Same at every volume |
--mk-dur-press | Fixed | 220 | 220 | 220 | 220 | Same at every volume |
--mk-dur-key-sink | Fixed | 120 | 120 | 120 | 120 | Same at every volume |
--mk-dur-menu | Fixed | 140 | 140 | 140 | 140 | Same at every volume |
--mk-dur-overlay-in | Fixed | 240 | 240 | 240 | 240 | Same at every volume |
--mk-dur-overlay-out | Fixed | 160 | 160 | 160 | 160 | Same at every volume |
--mk-dur-drawer-in | Fixed | 280 | 280 | 280 | 280 | Same at every volume |
--mk-dur-drawer-out | Fixed | 200 | 200 | 200 | 200 | Same at every volume |
--mk-dur-disclosure | Fixed | 180 | 180 | 180 | 180 | Same at every volume |
--mk-dur-gauge | Fixed | 900 | 900 | 900 | 900 | Same at every volume |
--mk-dur-toast-in | Fixed | 380 | 380 | 380 | 380 | Same at every volume |
--mk-dur-toast-out | Fixed | 260 | 260 | 260 | 260 | Same at every volume |
--mk-dur-toast-life | Fixed | 5,200 | 5,200 | 5,200 | 5,200 | No |
--mk-dur-sticker-pop | Micro | None | 480 | 480 | 480 | No |
--mk-dur-sticker-pop-delay | Micro | None | 200 | 200 | 200 | No |
--mk-dur-peel | Micro | 240 | 300 | 300 | 300 | No |
--mk-dur-stamp | Micro | None | 460 | 460 | 460 | No |
--mk-dur-thump | Micro | None | 220 | 220 | 220 | No |
--mk-dur-specks | Micro | None | 640 | 640 | 640 | No |
--mk-dur-seal-delay | Fixed | 1,200 | 1,200 | 1,200 | 1,200 | No |
--mk-dur-seal | Micro | 240 | 300 | 300 | 300 | No |
--mk-dur-register | Micro | None | 520 | 520 | 520 | No |
--mk-dur-sfx-pop | Micro | None | 700 | 700 | 700 | No |
--mk-dur-sfx-hold | Fixed | 600 | 600 | 600 | 600 | No |
--mk-dur-sfx-out | Micro | None | 300 | 300 | 300 | No |
--mk-dur-panel | Long | None | 300 | 360 | 420 | No |
--mk-dur-panel-stagger | Long | None | 40 | 48 | 55 | No |
--mk-dur-arrival | Long | 160 | 360 | 440 | 520 | No |
--mk-dur-block-hop | Micro | None | 620 | 620 | 620 | No |
--mk-dur-block-drop | Micro | None | 700 | 700 | 700 | No |
--mk-dur-block-drop-stagger | Micro | None | 90 | 90 | 90 | No |
--mk-dur-wipe | Long | None | None | 410 | 480 | No |
--mk-dur-press-run | Fixed | None | 800 | 800 | 800 | No |
--mk-dur-reink | Micro | 400 | 700 | 700 | 700 | No |
--mk-dur-theme | Fixed | 400 | 400 | 400 | 400 | No |
--mk-dur-gl-fade | Fixed | 400 | 400 | 400 | 400 | No |
--mk-dur-field-wake | Fixed | None | 400 | 400 | 400 | No |
--mk-dur-field-run | Fixed | None | 4,000 | 4,000 | 4,000 | No |
--mk-dur-field-ease | Fixed | None | 1,000 | 1,000 | 1,000 | No |
--mk-dur-field-pulse | Fixed | None | 900 | 900 | 900 | No |
--mk-dur-topple-step | Micro | None | 120 | 120 | 120 | No |
--mk-dur-topple-fall | Micro | None | 420 | 420 | 420 | No |
--mk-dur-loader-cycle | Fixed | 1,200 | 1,200 | 1,200 | 1,200 | No |
--mk-dur-reduced | Fixed | 140 | 140 | 140 | 140 | No |
Signature moments#
The press run on a first visit, the second ink landing off register, stickers landing and settling square, stamps falling with specks, panels wiping in, the blocks raining and tidying into the mark, and the page wipe at Press. Each is documented on its component's page.
In code#
MotionRuntime (in the root layout) owns readiness, reveals and the pause; motionPrepaintScript sets the motion attributes before the first paint. A site can force reduced motion for itself with data-mk-motion="reduce" on the root.