QR Code

Scan it with your phone: it opens this registry. The value is 32 bytes and lands in version 3 (29 modules a side) at level M, the smallest that fits — the encoder never picks a denser code than the payload needs. There is no size prop: the SVG is a square of the frame's width, so a wider card is a bigger, equally sharp code. It is role="img" with a label that says what scanning does, which is the item's accessible content; the drawing has nothing else to read.

Same matrix, different ink. Every run of dark modules is one pill — a corner is rounded only where a module has no dark neighbour along both of that corner's edges, so the shape follows the data with no run measured — and the notch where two runs meet is filled so the blobs join instead of kissing. The eyes are rounded rings with a rounded pupil in the same idiom. It scans because a decoder samples the centre of each module and every pill covers every centre it owns; scan this one to check. This is the code most people mean by a designed QR, with no library and no canvas.

Each module is a disc 0.84 of its cell (QR_DOT), which leaves a visible gap between neighbours and still covers the sampled centre with margin — the number is the one dial the shape has and it is a constant, because a smaller dot is a code that scans on one phone and not another. The eyes are full rings so they read as one drawing with the field rather than three squares stapled to it.

Pass children and three things happen together: the level is forced to H, a centred square of qrHoleSide(size) modules is cleared (7.8% of the code — this one clears 9×9 of 33), and the mark is laid over it with a module of breathing room, aria-hidden because the label already says what the code is. Doing one of those without the others is how a branded QR ships unscannable; here they are one decision. The mark's ground must stay light — a dark tile filling the hole is a block of false modules. Scan it.

Reload to see it once — it does not replay, and that is the decision: a QR that keeps assembling itself beside a form is motion in the periphery of someone trying to open their camera. The modules are grouped into rings by distance from the centre and each ring's start is written as a custom property from QR_BLOOM_SECONDS / rings, so version 1 and version 10 both bloom in 0.9s and the eyes land last. Nothing is ever removed from the document: a ring waiting its turn is opacity 0, so the code is complete in the HTML from the first byte and reduced motion, a missing stylesheet, print and a headless render all get the finished code instantly. Needs styles/automindz-qr.css imported once.

Move the pointer over it. The card tilts up to 8° toward the pointer — a card in the hand turning to the light, not a carousel — and a scanner line sweeps top to bottom at 0.8Hz for as long as you stay, then stops. It is a separate file with the only client boundary in the item: the wrapper writes two custom properties from the pointer and the stylesheet does the rest, so the code inside is untouched and scans the same. Not a focus stop and not a control; inside a link the beam also runs on focus-within. Reduced motion: flat, no beam, nothing to check. Touch gets no tilt — a finger covering the code is not a position to lean toward.

Version 1 — 21 modules a side — holds 14 bytes at level M. A short payload makes a coarse code that scans from across a room, which is the argument for short URLs and a redirect over a long one encoded verbatim.

A 120-byte enrolment URI lands in version 7. Version 7 and up carry an 18-bit version field in the two corners beside the finders, and from version 7 the alignment grid is three across — both visible here and neither in the URL above. Scanning it with an authenticator adds an account; the secret is a documentation example.

The same URL at the highest error-correction level. It costs a version — more codewords are error correction — which is why M is the default and H is for a code that will be printed small, laminated, or have a mark laid over it. Pass children for a centre mark and the item forces H for you — see the slot variant below.

The quiet zone is drawn inside the SVG by default (four modules, the spec's minimum) so a bare QrCode scans. Here it is off and the padding around it comes from the frame instead — the right call when the code sits in a padded card, because two quiet zones make a small code smaller for nothing. Whatever supplies the gap, it has to be at least four modules wide and the same colour as the ground.

The modules are currentColor, so the ink is one class on the code or on anything above it. One saturated colour on a light ground scans; a mid-grey (text-muted-foreground on bg-muted) does not — a scanner wants contrast, not a palette. A dark theme inverting both together is fine.

A square skeleton the width of the frame, which is exactly what the code will be — so a code that arrives from the server (an enrolment secret, a payment link) lands with no jump.

Version 10 is the ceiling — 213 bytes at level M — and past it the component renders the reason in place as a role="alert" in the same square footprint, rather than throwing through the page or drawing a code too dense to scan. This is a 400-byte value. The fix is a shorter URL, which is a design decision the item refuses to make for you.