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.

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.

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#