Blocks stage

The stage the home hero mounts. Every visitor gets the server still at first paint; a desktop-class browser that passes the gate gets the live pile: the blocks rain in, settle within five seconds, and can be grabbed, tossed, hopped with a click, nudged with the keyboard and tidied back into the logo. The canvas, the comic hits and the field stay inside the plate, so nothing ever draws over words.

Example#

Docs frames print the still; add ?gl=1 to this page's address to play. In the site's <head>, after PrefsScript:

import { glPrepaintScript } from "@maxgrits/overprint-three/gate";

<script dangerouslySetInnerHTML={{ __html: glPrepaintScript }} />

The live hero is at /render/template/hero; /render/perf shows the same stage with its counters.

Usage#

Use the blocks stage for the one big 3D moment of a page: the home hero's pile that rains in, settles and tidies into the mark. It prints a server still first, then loads the live, print-shaded pile only where the device can play it, behind the gate.

• One stage per page, in an <Art interactive> beside the hero's words, never behind them.
• Arrangements. logo (the tidy pose), pile-a, topple, the line arrangements (line-k, line-r, line-a, line-m) and wood.
• Play. Grab, throw, hop, Tidy up, Shake and, once earned, More blocks; every gesture has a key or a button.
• Phones and calm settings get the still with "Play with the blocks", which starts a lighter stage on a tap (D-G6).

Layer and volume#

Art on its own plate. Quiet prints the still only. Studio rains and settles within five seconds, with a pointer lean and one comic hit at a time. Press adds the impact dip, two hits at a time, "TA-DA!" after a tidy and "BOOM!" with more blocks. Rave makes More blocks available from the start, rains the alphabet twins instead of the supports, and allows three hits. Hard impacts throw a few flat-ink specks from Studio up (three, five, seven). High contrast prints the flat still.

Anatomy#

Volume#

• Quiet

  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.

  The still only.

• Studio

  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.

  Rains and settles within 5 s; one comic hit at a time.

• Press

  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.

  Impact dips, two hits at a time, TA-DA! after a tidy.

• Rave

  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.

  More blocks from the start; the full pile.

Content#

• The label names what the stage is and what it does: "The MAKR blocks. Grab them, throw them, tidy them into the mark."
• Button labels are literal verbs: "Tidy up", "Shake", "More blocks", "Reset".

Do and don't#

Fidelities#

The server still (BlockStill) is the first paint of every cohort. GL prints the same model with PrintMaterial: three ink bands from the house light, a 45° halftone between them, a deep-ink screen on the shade side, paper tooth, an inverted-hull key line and the letter printed as a second plate a hair off register, and a halftone shadow cast along the key light. The governor's last rung and a second lost context swap the canvas for an SVG still of the current poses.

Performance#

The stage chunk loads by import() only after the gate passes, so no first-load chunk carries three or cannon (the gate island is under 3 KB). Frames are drawn on demand: a resting pile draws nothing. The governor steps down (DPR, then the screens, the key plate, the contact shadow) and never back up in a session.

Gating#

?nogl, high contrast, Quiet, reduced motion, Save-Data, no WebGL 2 or a software renderer, two context losses and phones keep the still. Reduced motion, Save-Data and phones offer "Play with the blocks": no rain and an instant tidy under reduced motion; on a phone the light rung (no MSAA, at most twelve blocks, blob shadows, no specks, 30 frames a second while awake), the plate taking the touch until "Done" gives it back to the page. Specimen frames (these docs, the press check) print the still unless the page asks with ?gl=1.

Accessibility#

• The figure is a named group described by the still's text alternative; the canvas, still and hits are aria-hidden.
• One tab stop: a toolbar of block keys. Arrows move between blocks, Enter or Space hops, Shift and an arrow nudges, T tidies, M adds more blocks once earned, Escape goes to the stage buttons.
• The focused key draws the focus ring around its block and a chip names it; a polite live region says "Blocks tidied into the logo." and the like, at most once every 1.5 s.
• Every drag has a single-pointer alternative (a click hops; Tidy up, Shake, More blocks and Reset are buttons).

Props#

Tokens#

Changelog#