A moment is one animation with one cause: a stamp landing because a quote was sent, a panel arriving because it scrolled into view, the pile tidying because someone pressed Tidy up. This is the whole catalogue. Each card says what causes the moment, what it does at Quiet, Studio, Press and Rave, what reduced motion does instead, the sound it makes when sound is on, the tokens and keyframes it runs on, which components play it, and when to use it or leave it out. Play any of them; copy the code to start one in your own app.
Pages and arrivals#
How a page lands: the first-visit press run, the title, the second ink, panels, the wipe.
Press run
The first visit to a boot path (the home). Any key, click or touch skips it.
- Quiet
- None
- Studio to Rave
- 800 ms: the mark's four plates print 120 ms apart, each landing 6 px out of register and snapping in, then the paper wipes off in 300 ms
- Reduced motion
- None: the page shows at once.
- Sound
- None (a first visit has had no gesture to unlock audio)
- Tokens
--mk-dur-press-run--mk-dur-reduced--mk-ease-register--mk-ease-snap--mk-ease-squeegee- Keyframes
mk-press-run-platemk-press-run-wipemk-press-run-failsafe- Who plays it
- PressRun · @maxgrits/overprint-react/motion · Press run
Use it Once, on the first visit to the front door of a site.
Not when On every page or every visit, behind a form, or anywhere a reader came to read fast.
Title arrival
A soft navigation (the runtime sets html[data-mk-nav]). The hard load's title never fades: it holds the LCP.
Case study
Fernlight
A booking site for a plant shop in Leith, live in six weeks.
- Quiet
- 160 ms fade
- Studio
- Rises 0.12 em and fades in, 360 ms on
title - Press
- 440 ms, plus a width stretch-in on a display title of three words or fewer
- Rave
- 520 ms, plus the stretch-in
- Reduced motion
- None: the title is there.
- Sound
- None
- Tokens
--mk-dur-arrival--mk-ease-title- Keyframes
mk-title-inmk-stretch-in- Who plays it
- MotionRuntime and the kit's
mk-title-in· @maxgrits/overprint-react/motion · PageHero, SectionHead
Use it On the page's one title after a client navigation.
Not when On a hard load, on body text, or on more than one heading per page.
Second-ink register
A display line with the second ink enters the view (on a hard load too).
Websites that win
- Quiet
- Off
- Studio
- The second ink lands three times its rest offset away and snaps to rest in 520 ms on
register, then stays - Press and Rave
- Same, and the cyan and yellow plates collapse with it
- Reduced motion
- At rest at once.
- Sound
- None
- Tokens
--mk-dur-register--mk-ease-register- Keyframes
mk-snapmk-misreg-in- Who plays it
- Misregistration · @maxgrits/overprint-react/print · Misregistration and the second ink, PageHero
Use it On display type of 2 rem and up: page titles, hero lines, splash titles.
Not when On body text, labels, names or numerals in rows: at small sizes the offset reads as blur.
Panel entrance
A [data-mk-reveal="panel"] plate enters the view, once (the pre-paint script marks it, before React).
Fernlight
A booking site for a plant shop, live in six weeks.
Pebblepath
Trail maps that work offline, for the Saturday walkers.
Sam Okafor Joinery
Quotes in a day: one form, one price, one call back.
- Quiet
- None
- Studio
- Rises 24 px and fades in, settles 2 px past rest, 300 ms on
out, 40 ms apart - Press
- Also scales 0.97 to 1.01 and turns from −0.8°, 360 ms, 48 ms apart
- Rave
- From 40 px, −2° and 0.94 with an overshoot, 420 ms on
slap, 55 ms apart - Reduced motion
- None: every panel is there.
- Sound
- None
- Tokens
--mk-dur-panel--mk-dur-panel-stagger--mk-ease-out--mk-ease-slap- Keyframes
mk-panel-in-studiomk-panel-in-pressmk-panel-in-rave
Use it Plates and cards arriving as they scroll into view; at most eight per batch.
Not when On running text without a plate, on controls, or scrubbed with the scroll.
Page wipe
A plain click on a link to another page. The new page renders under it; it takes no taps.
- Quiet
- None
- Studio
- None: the page arrives (title, panels)
- Press
- Three bands in the field's inks with halftone fringes sweep across once, 410 ms (
wipein,wipe-exitout) - Rave
- 480 ms
- Reduced motion
- None. The docs crossfade the new page in 140 ms instead.
- Sound
- flip
- Tokens
--mk-dur-wipe--mk-dur-reduced--mk-ease-wipe--mk-ease-wipe-exit- Keyframes
mk-page-wipe- Who plays it
- PageWipe · @maxgrits/overprint-react/motion · Page wipe
Use it Over client-side route changes on a loud site or section.
Not when View Transitions for routes (they lose taps); a wipe that waits for the page or covers a form.
Re-ink and theme
The visitor turns the volume dial, picks a colourway or swaps the paper.
- Quiet
- 400 ms crossfade
- Studio to Rave
- 700 ms colourway, 400 ms paper; the field and the 3D re-ink with it
- Reduced motion
- A 140 ms crossfade.
- Sound
- None
- Tokens
--mk-dur-reink--mk-dur-theme--mk-ease-in-out- Who plays it
- VolumeDial, ThemeToggle and the tokens · @maxgrits/overprint-react · ThemeToggle, VolumeDial, VisitorControls
Use it When the reader changes the look themselves.
Not when On a timer or on scroll: the look changes only when someone asks.
The print kit#
Stickers, stamps, proofs and covers: things that are printed land like print.
Sticker land
The sticker enters the view, 200 ms after its panel.
- Quiet
- Appears
- Studio
- Pops from 0 at −20° past full size, leaning, and settles to 0° in 480 ms on
pop - Press
- Leans 1.6 times as far
- Rave
- Leans 2.5 times as far, at most 6°
- Reduced motion
- A 140 ms fade, square.
- Sound
- None yet (30 names pop; the kit's sticker does not send it)
- Tokens
--mk-dur-sticker-pop--mk-dur-sticker-pop-delay--mk-dur-reduced--mk-ease-pop- Keyframes
mk-landmk-print-fade- Who plays it
- Sticker · @maxgrits/overprint-react/print · Sticker
Use it A state or provenance mark arriving: Taking projects, New, Shipped.
Not when Decoration with nothing to say, or a sticker that never settles square.
Sticker peel
Your code removes a sticker (a dismissed notice, an offer that ended).
- Quiet
- 240 ms
- Studio to Rave
- Lifts by its corner, turns 24° and fades, 300 ms on
out - Reduced motion
- A 140 ms fade.
- Sound
- None
- Tokens
--mk-dur-peel--mk-dur-reduced--mk-ease-out- Who plays it
- stickerPeel · @maxgrits/overprint-react/print · Sticker
Use it Taking a sticker away because its state ended.
Not when Peeling on hover, or peeling something the reader still needs.
Stamp
Something happened: a form was sent, a quote booked, a release shipped, a snippet copied.
Quote for Dana Whitfield
Sent on 23 October 2026. Reply within a day.
- Quiet
- Prints at rest
- Studio
- Falls from 1.9 times its size in 460 ms on
stamp; at 250 ms the host thumps, five specks fly and the field pulses - Press
- Seven specks
- Rave
- Nine specks
- Reduced motion
- At rest at once: no fall, no specks.
- Sound
- stamp
- Tokens
--mk-dur-stamp--mk-dur-thump--mk-dur-specks--mk-dur-seal-delay--mk-dur-seal--mk-ease-stamp--mk-ease-out- Keyframes
mk-stamp-fallmk-thumpmk-speckmk-seal- Who plays it
- Stamp and useStampLand · @maxgrits/overprint-react/print · Stamp
Use it To confirm a caused state, beside the literal words that say it.
Not when As decoration, on load for no reason, or instead of a status message.
Proof pick
The proof sheet enters the view: the picked frame is circled and ticked.
- Fernlight, round 1
- Fernlight, round 2
- Fernlight, round 3 · Pick
- Quiet
- Drawn at once
- Studio to Rave
- The circle draws in 600 ms on
out, the tick 240 ms after - Reduced motion
- Drawn at once.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-out- Keyframes
mk-proof-drawmk-proof-draw-check- Who plays it
- ProofSheet · @maxgrits/overprint-react/print · Proof sheet
Use it Showing which round a client picked.
Not when Circling more than one frame.
Cover print
The cover enters the view: its plates print one by one.
- Quiet
- Printed at once
- Studio
- The tiles fade in, 150 ms each, 50 ms apart by layer
- Press and Rave
- Each tile prints down from 1.4 times its size, 420 ms on
stamp, 70 ms apart (all within 2.2 s) - Reduced motion
- Printed at once.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-stamp- Keyframes
mk-cover-print- Who plays it
- Cover · @maxgrits/overprint-react/cover · Data cover
Use it A case study's cover arriving on its page.
Not when Replaying a cover every time it scrolls back into view.
The comic kit#
Panels wipe in, balloons pop, SFX hit once per view.
Comic panels
The panel grid enters the view: the panels wipe in, in reading order.
- Quiet
- None
- Studio
- Each panel wipes open from its leading edge, 300 ms on
wipe, 40 ms apart - Press
- 360 ms, 48 ms apart
- Rave
- 420 ms, 55 ms apart
- Reduced motion
- None: the page is there.
- Sound
- None
- Tokens
--mk-dur-panel--mk-dur-panel-stagger--mk-ease-wipe- Keyframes
mk-wipe- Who plays it
- Panel · @maxgrits/overprint-react/comic · Panel and panel grid
Use it A comic page or strip arriving.
Not when Wiping single cards of a normal page (they arrive as panels instead).
SFX pop
The SFX enters the view, or something caused it (cause).
- Quiet
- Hidden
- Studio
- Pops from 0.2 at −14°, overshoots and settles, 700 ms on
out; one per view - Press
- Two per view, and the lettering flexes 28 width units and back
- Rave
- Per the comic kit, with the flex
- Reduced motion
- Static.
- Sound
- With a
cause, the cause's voice (impact plays pow, arrive plays pop) as it lands - Tokens
--mk-dur-sfx-pop--mk-dur-sfx-hold--mk-dur-sfx-out--mk-ease-out--mk-ease-pop- Keyframes
mk-popmk-flex- Who plays it
- SFX · @maxgrits/overprint-react/comic · Sound effects (SFX)
Use it One hit word where something happened: a launch, a sale, a big number.
Not when More than one per view at Studio, behind words, or as the only place a message lives.
KeyPop
The first press of a hit key in a page view.
- Quiet
- Never
- Studio to Rave
- A word pops off the key, holds 600 ms and prints out, once
- Reduced motion
- None.
- Sound
- pop
- Tokens
--mk-dur-sfx-pop--mk-dur-sfx-hold--mk-dur-sfx-out--mk-ease-out- Keyframes
mk-popmk-print-out
Use it The one action key of a page (Get a quote).
Not when On every key, or more than once a page view.
Balloon pop
The balloon enters the view.
Built to be tested.
- Quiet
- Appears
- Studio to Rave
- Pops in from its tail, 260 ms on
pop - Reduced motion
- Appears.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-pop- Keyframes
mk-balloon-in- Who plays it
- Balloon · @maxgrits/overprint-react/comic · Balloon
Use it A line of dialogue landing in its panel.
Not when Balloons over 35 words, or popping on every hover.
Impact star
The star enters the view (or the pile's comic hit prints one).
- Quiet
- Static
- Studio to Rave
- Flashes in from small, 260 ms on
pop - Reduced motion
- Static.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-pop- Keyframes
mk-flash- Who plays it
- ImpactStar · @maxgrits/overprint-react/comic · Impact star
Use it Behind an SFX word, at the point of impact.
Not when Behind running text, or more than once in a view at Studio.
Focus lines
The lines enter the view and close in on their centre.
- Quiet
- Static
- Studio to Rave
- Close in from the edges, 360 ms on
out - Reduced motion
- Static.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-out- Keyframes
mk-focus-in- Who plays it
- FocusLines · @maxgrits/overprint-react/comic · Focus lines
Use it Pointing a panel at one thing.
Not when Under words: the lines keep their clear centre around the subject.
Speed lines
The lines enter the view behind something moving.
- Quiet
- Static
- Studio to Rave
- Streak in along their direction, 300 ms on
out - Reduced motion
- Static.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-out- Keyframes
mk-streak- Who plays it
- SpeedLines · @maxgrits/overprint-react/comic · Speed lines
Use it Behind an object that is moving in the story.
Not when Behind text, or looping.
Splash title
The splash title enters the view.
Websites that win
- Quiet
- Printed on its own paper plate
- Studio to Rave
- The splash art drops 24 px into place and fades in, 520 ms on
title - Reduced motion
- Printed at once.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-title- Keyframes
mk-splash-drop- Who plays it
- SplashTitle · @maxgrits/overprint-react/comic · Splash title
Use it The one splash of a comic page.
Not when More than one splash per view.
The reading layer#
Keys, overlays, toasts, disclosures and gauges: the same at every volume.
Hover and press
The pointer rests on a control; a press goes down.
- Quiet
- Colour only
- Studio to Rave
- Colour, a lift of 2 px or less; a key sinks 2 px into its offset in 120 ms
- Reduced motion
- Colour only.
- Sound
- None
- Tokens
--mk-dur-hover--mk-dur-press--mk-dur-key-sink--mk-ease-out--mk-ease-pop- Who plays it
- Button and every control · @maxgrits/overprint-react · Button, IconButton, Card, Link
Use it Every control says it can be pressed, and every press is felt.
Not when Hover that moves words, grows a box or reflows the layout.
A key's action is under way (loading).
- Every volume
- The label stays; a 2 px bar in its ink draws under it every 1.2 s while it waits
- Reduced motion
- No bar; the key stays busy (
aria-busy) and its label says what is happening. - Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-out- Keyframes
mk-button-pending- Who plays it
- Button · @maxgrits/overprint-react/button · Button
Use it While a form sends or a payment confirms.
Not when As decoration: it runs only while something is really pending.
Toast
Your code raises a toast; it leaves on its own after its life, or when dismissed.
- Every volume
- Drops in 380 ms, drains over 5.2 s, leaves in 260 ms
- Reduced motion
- Fades in and out in 140 ms; the drain still counts down.
- Sound
- None
- Tokens
--mk-dur-toast-in--mk-dur-toast-out--mk-dur-toast-life--mk-dur-reduced--mk-ease-out- Keyframes
mk-toast-inmk-toast-drainmk-toast-fade- Who plays it
- Toast · @maxgrits/overprint-react/toast · Toast
Use it A short confirmation with an undo.
Not when Errors that need a decision, or anything the reader must read twice.
Disclosure
The reader opens or closes it.
Do I own the code?
How long does a site take?
- Every volume
- Unfolds in 180 ms, the chevron turns
- Reduced motion
- Opens at once.
- Sound
- None
- Tokens
--mk-dur-disclosure--mk-ease-out- Who plays it
- Disclosure and Faq · @maxgrits/overprint-react/disclosure · Disclosure
Use it Answers and details the reader asks for.
Not when Hiding the one thing every reader needs.
Dialog
The reader opens it; Escape or Close closes it.
- Every volume
- In 240 ms, out 160 ms
- Reduced motion
- Fades in 140 ms.
- Sound
- None
- Tokens
--mk-dur-overlay-in--mk-dur-overlay-out--mk-dur-reduced--mk-ease-out- Who plays it
- Dialog · @maxgrits/overprint-react/dialog · Dialog
Use it A decision that needs the reader before anything else.
Not when Messages that could sit on the page.
Drawer
The reader opens it.
- Every volume
- Slides in 280 ms, out 200 ms
- Reduced motion
- Fades in 140 ms.
- Sound
- None
- Tokens
--mk-dur-drawer-in--mk-dur-drawer-out--mk-dur-reduced--mk-ease-out
Use it A side task: a quote form, the phone menu.
Not when Content that belongs on its own page.
The reader opens a menu or a nav panel.
- Every volume
- Menus in 140 ms; the nav panel unfolds in 180 ms
- Reduced motion
- The panel fades in 140 ms.
- Sound
- None
- Tokens
--mk-dur-menu--mk-dur-disclosure--mk-dur-reduced--mk-ease-out- Keyframes
mk-navbar-panel-inmk-navbar-panel-fade
Use it Every menu and nav panel.
Not when Menus that open on hover alone.
Gauge
The dial enters the view: its arc draws to the score.
- Every volume
- Draws in 900 ms
- Reduced motion
- Drawn at once.
- Sound
- None
- Tokens
--mk-dur-gauge--mk-ease-out- Keyframes
mk-score-dial-draw- Who plays it
- ScoreDial · @maxgrits/overprint-react/score-dial · ScoreDial
Use it One score that was earned (a Lighthouse result).
Not when Dials for every number on a page.
Loader
Something is loading; the label stays still beside the glyphs.
- Every volume
- Three ink glyphs hop in turn, 900 ms a cycle, 150 ms apart, five cycles at most, then still
- Reduced motion
- Static, with its words.
- Sound
- None
- Tokens
- None
--mk-ease-pop - Keyframes
mk-loader-hop- Who plays it
- Loader · @maxgrits/overprint-react/loader · Loader
Use it A wait of more than about a second, with a label.
Not when Waits under a second (show the result), or a loader with no words.
3D blocks#
The pile, the card blocks, the loader and the 404's dominoes.
Block hop
The pointer rests on, or keyboard focus reaches, a card that carries a block.
- Quiet
- None
- Studio to Rave
- Squashes, hops a third of its height, stretches and lands, 620 ms on
hop; its shadow shrinks and grows - Reduced motion
- None.
- Sound
- None
- Tokens
--mk-dur-block-hop--mk-ease-hop- Keyframes
mk-block-hopmk-block-hop-shadow- Who plays it
- BlockCss · @maxgrits/overprint-three/css3d · Block CSS
Use it A line of work's card, so the block answers the pointer.
Not when Hopping words: only the block moves, never the card's text.
Block drop
The first paint of a CSS or SVG pile (phones, Save-Data, no GL) or BlockScene drop.
- Quiet
- None
- Studio to Rave
- Each block falls 260 px, lands 6 px low and settles, 700 ms on
fall, 90 ms apart in seat order - Reduced motion
- None: the pile is there.
- Sound
- None
- Tokens
--mk-dur-block-drop--mk-dur-block-drop-stagger--mk-ease-fall- Keyframes
mk-block-drop- Who plays it
- BlockScene and the hero still · @maxgrits/overprint-three · Block scene, Block still
Use it A pile that arrives without the GL stage.
Not when Dropping blocks onto words: the play area leaves the text column clear.
Rain
The GL stage goes live: the letters fall, then the supports, and the pile settles. If GL has not come 8 s after the stage asked, its note says the still is all there is (mk-stage-wait).
- Quiet
- No GL: the still
- Studio and Press
- M, A, K, R 140 ms apart, the supports from 620 ms; asleep within 5 s; the GL fades over the still in 400 ms
- Rave
- Same, MORE BLOCKS from the start
- Reduced motion
- No rain: the still, with Play with the blocks.
- Sound
- knock
- Tokens
--mk-dur-gl-fade- Keyframes
mk-stage-wait- Who plays it
- BlocksStage · @maxgrits/overprint-three/gate · Blocks stage
Use it The one hero of a home page.
Not when More than one stage in a view, or blocks raining onto the headline.
TIDY
Tidy up (or T).
- Quiet
- No GL
- Studio
- A crane flies each block to its seat in the Key block logo, within 2.8 s, a knock per seat, the field pulses
- Press and Rave
- Plus TA-DA!
- Reduced motion
- The blocks are in place at once.
- Sound
- knock, then print
- Tokens
- None
- Who plays it
- BlocksStage · @maxgrits/overprint-three/gate · Blocks stage
Use it Putting the pile back into the mark.
Not when Tidying on a timer: the reader asks for it.
MORE BLOCKS
More blocks (or M), once earned.
- Quiet
- No GL
- Studio
- Four blocks, 140 ms apart; the field pulses
- Press and Rave
- Plus BOOM!
- Reduced motion
- Placed on the shelf.
- Sound
- boom
- Tokens
- None
- Who plays it
- BlocksStage · @maxgrits/overprint-three/gate · Blocks stage
Use it A reward for playing with the pile.
Not when More than eight extras at once.
Comic hit
A block hits hard (impact speed 0.6 and up).
- Quiet
- No GL
- Studio
- One POW! at a time, 2.5 s apart
- Press
- Two at a time, 1.2 s apart
- Rave
- Three at a time, 0.6 s apart
- Reduced motion
- None.
- Sound
- The impact's wood knock (30 names pow; the hit itself is silent)
- Tokens
--mk-dur-sfx-pop--mk-dur-sfx-out--mk-ease-out- Keyframes
mk-popmk-print-out- Who plays it
- BlocksStage with SFX and ImpactStar · Blocks stage, Sound effects (SFX), Impact star
Use it Hits the reader caused by throwing a block.
Not when Hits that fire on their own.
404 topple
Knock them over (or the pointer entering the stack).
- Quiet
- Static final pose
- Studio
- Dominoes 120 ms apart, each 420 ms on
fold - Press and Rave
- Plus OOF!
- Reduced motion
- The final pose at once.
- Sound
- knock per block
- Tokens
--mk-dur-topple-step--mk-dur-topple-fall--mk-ease-fold- Who plays it
- Topple404 · @maxgrits/overprint-three/css3d · Topple 404
Use it The 404 page's toy, beside the words that say what happened.
Not when As the only explanation of the error.
Block loader
While something loads.
- Quiet
- Static, with its words
- Studio to Rave
- A block hops in a 1.2 s cycle
- Reduced motion
- Static, with its words.
- Sound
- None
- Tokens
--mk-dur-loader-cycle--mk-ease-hop- Keyframes
mk-loop-block-hop- Who plays it
- BlockLoader · @maxgrits/overprint-three/css3d · Block loader
Use it A loading state in a 3D place (the stage, a card block).
Not when A loader without a label.
Scroll#
Blocks build and one big word flexes as you scroll.
Blocks build on scroll
The art slot scrolls through the view (a view timeline, scrubbed).
- Quiet
- Built
- Studio to Rave
- Each block comes from 2.5 units above its seat, turned ±20°, to its seat, in seat order, from 10 % into the view to 45 % across it
- Reduced motion
- Built.
- Sound
- None
- Tokens
- None
--mk-ease-fall - Keyframes
mk-block-build- Who plays it
- BuildOnScroll · @maxgrits/overprint-three/css3d · Build on scroll
Use it A section's art slot that assembles as the section arrives.
Not when Building behind words, or more than one build in a view.
Display word flex
The word scrolls through the view (a view timeline, scrubbed).
Built to last
- Quiet
- None
- Studio
- Up to 20 width units
- Press
- Up to 40
- Rave
- Up to 60
- Reduced motion
- None.
- Sound
- None
- Tokens
- None
- Keyframes
mk-flex- Who plays it
- FlexWord · @maxgrits/overprint-react/motion · Flex word
Use it The one big display word of a section, three words at most.
Not when Body text, headings that wrap, or two flexing words in a view.
The ink field#
Bursts on a cause, loops only behind a pause key.
Field burst and pulse
The page loads, a tap or key lands, or a moment pulses it (mk:pulse).
- Quiet
- Flat
- Studio
- Wakes in 400 ms, flows 4 s, eases out in 1 s: still within 5 s
- Press
- Bursts, or loops while its pause key says so
- Rave
- Loops while its pause key says so
- Reduced motion
- A still frame.
- Sound
- None
- Tokens
--mk-dur-field-wake--mk-dur-field-run--mk-dur-field-ease--mk-dur-field-pulse- Who plays it
- InkField · @maxgrits/overprint-react/ink-field · Ink field, Motion toggle
Use it The hero's art region, beside the words, never under them.
Not when Behind text, or looping without a visible pause key.
Desktop toys#
The additive cursor.
Cursor
A desktop pointer moves. The native pointer always stays.
- Quiet
- Off
- Studio to Rave
- A 32 px ring eases after the pointer (90 ms), grows over controls, shrinks when pressed, shows a label
- Reduced motion
- Off.
- Sound
- None
- Tokens
--mk-dur-hover--mk-ease-out- Who plays it
- Cursor · @maxgrits/overprint-react/motion · Cursor
Use it Once, in the root layout of a desktop site; labels that repeat what the element says.
Not when Hiding the native pointer, or labels that say something new.