Tear the page down and rebuild it as an arcade cabinet

Featurekamo-internal
Shipped
September 7, 2026 at 6:38 AM UTC
Author
Kamo
Commit
00cb89e

Two things were wrong and the first one is a rule, not a preference. FULL WIDTH. The page shipped with `maxWidth: 1240, margin: '0 auto'` inside a content area the shell had already sized, which throws that space away and turns a wide monitor into a phone with expensive margins. That pairing is gone and must not come back. The cabinet grid is now `auto-fill` against a minimum plate width rather than a breakpoint ladder — a ladder has a top rung and the top rung IS the cap, so a fixed 7 columns leaves a 3440px display with the same gutters. Every HUD readout is a `1fr` that stretches, and the type is sized in `clamp(…, vw, …)` so it grows with the screen instead of leaving the extra width empty. THE ERA, without hedging. This surface now throws out the design system on purpose: no border radius anywhere, no soft shadows, no blur, hard 4px bevels, scanlines, a phosphor mask, a curved-tube vignette, tube flicker, chromatic aberration on the score, a scrolling marquee, a blinking INSERT COIN footer, and cabinet buttons whose bevel inverts and MOVES when pressed. - Press Start 2P, self-hosted (12KB Latin subset, SIL OFL), NOT preloaded — one route uses it and every other page should not pay for it. - Hand-drawn 16×16 sprites rendered as crisp SVG, not MUI glyphs. SVG rather than the usual box-shadow trick because the grid is fluid and box-shadow art is fixed at the size it was built for. Runs are merged horizontally: thirty sprites on a wide monitor is 7,680 rects otherwise, and that is a scroll that stutters. - The leaderboard is a HIGH SCORES table — rank, three initials, score — which is the one format nobody needs a header to read. - LEGENDARY plates blink their outline. A hue-rotate on the sprite was tried first and is wrong: it drifts the art off the plate's own gold ring so the two disagree at almost every moment, and it reads as a rendering fault rather than as a rare item. - The two achievement tones become square waves. This is the one place in the palette where the waveform is the point — a square wave IS the sound of the two pulse channels an era console had, and a triangle renders a tasteful chime over an 8-bit card. THE PALETTE IS FIXED AND DELIBERATELY DOES NOT DERIVE FROM --color-primary, which reverses the rule every other surface follows. An NES palette tinted toward a tenant's brand is not an NES palette, it is a muddy gradient. The org's colour still lights the marquee and the XP bar, so a white-label tenant owns the cabinet without the palette underneath being repainted. Three defects caught by actually looking at the render rather than declaring it done: the medal read as a cyclops (a white ring around a dark centre is an eye, and two tails below are legs), the flame read as a potion, and two-word names collapsed to a repeated letter — Ada Lovelace as ALL, Alan Turing as ATT — because the second part IS the last part. A sprite is a wall of string literals, the one kind of data edited by counting characters, so pixelArt.test.ts fails the build on any sprite that is not exactly 16×16, uses a character outside the palette, or draws nothing.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing