01 / EMOTIONAL REGISTER
Precision outside.
Private weather inside.
MARU-K treats a convenience store as a temporary shelter. Perfectly faced shelves suggest ritual and care; five customers reveal the unruly lives moving past them. A nurse holds hot lemon against glove marks. A bassist mends a photograph with tape. An exam student writes herself a permission slip on a gum wrapper. The fluorescent field is lonely, never bleak: a place can keep watch without asking why you are awake.
Wing VII provides no generated assets, and this room makes that constraint visible. Cartons, portraits, frozen stock, floor reflections, wrapper diagrams, grain, and receipt paper are assembled from HTML, CSS gradients, borders, masks, pseudo-elements, and inline SVG. Code is not a substitute for atmosphere here; it is the atmosphere’s material.
02 / SIGNATURE — THE RECEIPT
The page notices
you noticing.
sectionObserver sees a section cross 16%.addReceiptItem() writes once to a Map.renderReceipt() totals attention and tax.updateScrollProgress() advances the red feed line.The receipt is a memory system, not a sidebar. Desktop paper feeds continuously from a dark printer; tablet and phone preserve the aisle width with a live total tab that opens the same paper as a focus-trapped drawer. The seconds counter pauses when the tab is hidden. At checkout, openKeepsake() copies only the aisles actually witnessed, itemizes them, tears the paper, and returns focus to the visitor’s original control. Its final thermochromic field uses setThermalInk() plus pointer-position CSS variables to reveal a message beneath a moving pool of warmth; the same reveal latches from a keyboard button.
03 / SHELVES, BREATH, FOUR NOTES
Operational systems
with human residue.
The shelf uses exact six-column grids, repeated carton geometry, millimeter-facing labels, inset folds, and drop shadows. Repetition supplies retail discipline; small lot codes and price strips stop it feeling like a generic card grid. The 03:00 cast deliberately breaks that geometry with five distinct CSS portraits and a moving pool of shelf-label light.
Each freezer door layers stock, reflection, and a blurred .fog sheet. setDoor() writes pointer coordinates into --hand-x and --hand-y; a radial CSS mask clears only that spot, draws a temporary palm, then re-fogs after 6.5 seconds. The four-step wrapper lesson uses setFoldStep() for keyboard and pointer progression. The jingle remains silent: four timed light columns spatialize “Bright. Bright. Upward. Home.” startLight() and stopLight() keep the cursor lamp smooth and pause its animation frame when the document is hidden.
04 / PALETTE + TYPE
Fluorescent authority,
warm operational signals.
#EAFFFF#FFE34F#007C63#F64B3C#96DDF5#00352EZen Kaku Gothic New supplies the humane store voice at weights 500–900. VT323 handles prices, clocks, lot codes, scores, and printer copy. Tight display tracking contrasts with the receipt’s open, stepped rhythm. Both families are self-hosted from /assets/fonts/.
05 / REPRODUCE THIS
Prompt for a behavior,
not a convenience-store skin.
Ask an AI coding agent for a pure HTML/CSS/JS nocturnal retail essay where every visual is code. Require a persistent receipt that logs viewed sections and linger time, tears into a keepsake, and condenses without covering phone copy. Specify six-column perfect-facing shelves, five one-item character vignettes, hand-position freezer fog, a keyboard-operable folding sequence, and a silent four-note light score. Provide the six tokens above and the Zen Kaku Gothic New / VT323 pairing. Demand a staged fluorescent startup, focus trapping, visibility-paused timers and animation frames, reduced-motion honesty, three-width screenshots, and zero overflow. End with the emotional rule: the store’s light is a form of care.