The brand moves like a print shop at full speed: plates register, stamps thump, panels arrive, blocks hop and tidy. Every motion answers something a person did or something that happened, then settles, and the words hold still once they are on the page. Every animation the system ships plays live, with its tokens and its code, in the Motion section.
Rules#
| Id | Rule | Why | Checked by |
|---|---|---|---|
| BB-MOTION-01Must | Give every motion a cause; words never move once they land, and nothing reflows on hover.Applies to: Site, Docs, MAX//OS, Slides | Motion explains what happened (D-H1). Words that keep moving, or a layout that jumps under the pointer, cost the reader their place. | Press checkmotion; lint mk/hover-reflow |
| BB-MOTION-02Must | Let reduced motion always win.Applies to: Site, Docs, MAX//OS, Slides | Some readers get sick from motion. The volume never overrides their setting. | Press checkthe motion spec under reduced motion |
| BB-MOTION-03Must | Let ambient motion settle within 5 s at Quiet and Studio; loops at Press and Rave show a pause control.Applies to: Site, Docs, MAX//OS | WCAG 2.2.2: anything that moves on its own for longer than five seconds needs a way to stop it. | Press checkthe rAF counter |
| BB-MOTION-04Never | Use glow, confetti, or more than 3 flashes a second.Applies to: Site, Docs, MAX//OS, Social, Slides | Flashes can trigger seizures (WCAG 2.3.1), and glow and confetti are the generic effects the system was built to avoid. | Lintmk/confetti; the release flash review |
| BB-MOTION-05Must | Animate slides only with the panel arrival, at Studio, and not at all at Quiet or under reduced motion; PDFs, email and social images stay still.Applies to: Slides, Documents, Email, Social | A deck is read in a room; one arrival per slide keeps attention on the speaker. | Testthe deck tests |
| BB-MOTION-06Must | Animate transform, opacity, clip-path and the registered custom properties only; never a layout property.Applies to: Site, Docs, MAX//OS | Layout animation shifts the page and drops frames; the compositor properties stay smooth and cost no layout shift. | Press checkthe layout-shift and long-frame checks |
| Id | Rule | Why | Checked by |
|---|---|---|---|
| BB-SOUND-01Must | Keep sound off by default behind a visible toggle; Quiet mutes, and only the kit's voices play.Applies to: Site, Docs, MAX//OS | Sound is a toy a visitor turns on (D-H4). Unexpected noise in an office or on a train loses the visitor. | Press checkthe sound gating; the voices by ear |
| BB-SOUND-02Never | Autoplay sound or video.Applies to: Site, Docs, MAX//OS, Social, Slides | Autoplay takes the choice away from the reader and fails WCAG 1.4.2 for sound. | Manual review |
Specs#
Principles#
Motion applies the twelve principles of animation on purpose: squash and stretch in the stamp and the block hop, anticipation in the hit key, staging with one moment at a time, follow-through in the stickers that settle. Each one is shown live on the principles page.
The signature moments#
These moments are the brand's motion vocabulary. Use them as they are; a new moment needs a cause and a reduced-motion version.
| Moment | Cause | What it does | Duration and curve | Reduced motion |
|---|---|---|---|---|
| The press run | A first visit, once | The four plates print the mark at the centre, one after another, then the paper wipes off. Any key or click skips it. | 0 · 800 · 800 · 800--mk-dur-press-run, --mk-ease-register | None |
| Panel arrival | A section enters the view, once | Sections arrive like comic panels, staggered; the words never move again. | 0 · 300 · 360 · 420--mk-dur-panel, --mk-ease-out | None |
| Stamp thump | Something happened: a form sent, a quote booked | The stamp falls, thumps, throws specks and settles at its rest angle. | 0 · 460 · 460 · 460--mk-dur-stamp, --mk-ease-stamp | Printed at rest |
| KeyPop | The first press of a hit key on a page | One small burst beside the key, once per page view. | 0 · 700 · 700 · 700--mk-dur-sfx-pop, --mk-ease-pop | None |
| TIDY | Tidy up, or the T key, on the block pile | The blocks fly on crane arcs into the mark, one knock per seat. | 0 · 700 · 700 · 700--mk-dur-block-drop, --mk-ease-fly | Placed at once |
| Block hop | Hover or focus on a card's block | The block squashes, hops and lands: anticipation, squash and stretch in one. | 0 · 620 · 620 · 620--mk-dur-block-hop, --mk-ease-hop | None |
Curves and durations#
Every curve and duration plays live on the curves page and the durations page.
| Curve | Control points |
|---|---|
pop | cubic-bezier(0.34, 1.56, 0.64, 1) |
out | cubic-bezier(0.16, 1, 0.3, 1) |
in-out | cubic-bezier(0.7, 0, 0.2, 1) |
stamp | cubic-bezier(0.2, 0.8, 0.2, 1) |
drop | cubic-bezier(0.2, 0.9, 0.3, 1.1) |
land | cubic-bezier(0.2, 0.9, 0.3, 1.2) |
title | cubic-bezier(0.2, 0.8, 0.3, 1) |
squeegee | cubic-bezier(0.45, 0, 0.35, 1) |
fold | cubic-bezier(0.6, 0, 0.3, 1) |
fly | cubic-bezier(0.5, 0, 0.3, 1) |
split | cubic-bezier(0.55, 0, 0.8, 0.2) |
snap | cubic-bezier(0.3, 0, 0.3, 1.6) |
register | cubic-bezier(0.5, 0, 0.2, 1) |
slap | cubic-bezier(0.2, 0.8, 0.3, 1.3) |
squash | cubic-bezier(0.5, 0, 0.6, 1) |
wipe | cubic-bezier(0.25, 0.1, 0.2, 1) |
wipe-hold | cubic-bezier(0.75, 0, 0.25, 1) |
wipe-exit | cubic-bezier(0.6, 0, 0.35, 1) |
hop | cubic-bezier(0.25, 1, 0.5, 1) |
fall | cubic-bezier(0.3, 0.7, 0.3, 1) |
| 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 |
The volume scale#
Quiet is calm, without long moments; Studio is balanced; Press is an arcade; Rave is overdrive. The volume scales the moments; it never overrides reduced motion (BB-MOTION-02).
Reduced motion#
Under reduced motion every moment shows its end state at once. Only opacity fades remain, and the ink field and the blocks print as still frames.
Sound#
Sound is a toy a visitor turns on: wood knocks, stamp thumps, pops and comic hits, all from the kit's own voices.
| When | Sound |
|---|---|
| First visit | Off, behind the sound toggle in the header |
| Quiet | Muted, even with the toggle on |
| Studio | The kit's voices at a softer gain |
| Press and Rave | The kit's voices at full gain |
| Reduced motion | Unchanged: sound is not motion |
| Voice | Plays for | Made of | Event kinds |
|---|---|---|---|
knock | Wood knocks when blocks hit each other (four CC0 clips, the only files that ship). | Sampled: 4 wood clips | None |
stamp | A stamp landing (THUNK!). | A triangle from 140 to 50 Hz over 180 ms | stamp |
pop | A key press, a sticker or a balloon arriving. | A triangle from 700 to 980 Hz over 90 ms | press, arrive |
pow | A comic impact (POW!). | A triangle from 190 to 60 Hz over 160 ms, with bandpass noise at 1100 Hz | impact |
boom | More blocks raining in (BOOM!). | A sine from 95 to 38 Hz over 420 ms, with lowpass noise at 400 Hz | None |
flip | The page wipe at Press and Rave. | A sawtooth from 520 to 90 Hz over 320 ms | None |
print | The tidy finishing and the first-visit press run. | A triangle from 220 to 110 Hz over 120 ms | None |
Motion per channel#
| Channel | Motion |
|---|---|
| Site and docs | Live, at the page's volume and the visitor's dial; reduced motion wins |
| Slides | The panel arrival only, at Studio; none at Quiet or under reduced motion |
| PDFs, documents and print | Still |
| Still | |
| Social images | Still; there are no video or motion templates in 1.0 |
Do and don't#
Do
Taking projects
Q4Don't
Taking projects
Do
Don't
Playing the launch theme on load
Do
Don't