The MAKR blocks have two bodies. On a desktop with WebGL 2 they are a real pile: physics, a hand that grabs and throws, a crane that tidies them back into the Key block mark. Everywhere else (phones by default, Save-Data, reduced motion, Quiet) they are CSS and SVG blocks that drop, hop and build without a frame of script. Both share one house camera, one key light and the same print-shaded inks, so they read as the same objects.
The pile#
Nine printed blocks stacked into the MAKR logo: M and A on top of K and R, with a cube, a cylinder and two flat blocks around them.
Drag a block and let go to throw it; a hard enough hit prints a POW!. Press Tidy up (or T) and the crane flies every block home; after a few grabs, More blocks (M) drops four more. Click a block to make it hop; with the keyboard, the arrow keys nudge the one in focus. Sound, when it is on, knocks wood on every impact.
| Part | What it does |
|---|---|
| Rain | The letters M, A, K, R fall 140 ms apart; the supports from 620 ms, 220 ms apart (give or take 60 ms); every block asleep by 5 s |
| MORE BLOCKS | 4 blocks a press, 140 ms apart, at most 8 extras; earned by 3 grabs or 4 s of holding |
| TIDY | A crane flies each block to its seat in the mark at 5.5 units a second, each flight 400 ms to 1800 ms, holding 250 ms over its seat before it drops |
| The hand | A click within 4 px and 250 ms hops a block; arrow keys nudge it; a throw is capped at 8 units a second |
| Comic hits | An impact of 0.6 and up prints a POW! (one at a time at Studio, 2.5 s apart) |
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.
CSS blocks#
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.
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.
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.
Phones and reduced motion#
Phones get the CSS blocks and the SVG still by default; a "Play with the blocks" key loads a light GL rung only when someone asks (D-G6). Under reduced motion the pile is its still, the dominoes jump to their final pose and the blocks drop nowhere: everything is simply in place.