---
id: "2115956859840442387"
source: https://x.com/SKMchiiiii_201/status/2115956859840442387
author: "さかみち/sakamoto michihisa (@SKMchiiiii_201)"
media: "video, 1124x720, 23.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Monospace Archive Shop with Floating Player

## Summary
A walkthrough of a quiet, near-monochrome website for a park-based event and publishing project: archives, event notes, a printed zine, stickers and a cart, all in tiny monospace on off-white with hairline black boxes. A small picture-in-picture video stays docked bottom right across pages, and a large brush glyph closes on black. Worth studying for how little it needs: one type size, one border weight, lots of air.

## Style
- Theme: light (off-white pages, black outro)
- Mood: quiet, editorial, archival, restrained, analog
- Tags: monospace, brutalist-minimal, e-commerce, picture-in-picture, hairline-borders, editorial-layout, japanese-web
- Category: Landing page, Components

## Palette
| Role | Hex |
|---|---|
| Page | #F9F9F9 |
| Ink and outro | #050505 |
| Image well | #E9E9E9 |
| Paper white | #FDFDFD |
| Sage photo tone | #B0B8AB |
| Moss photo tone | #707B6E |

## Typography
- Everything on the page (nav, breadcrumbs, body copy, prices, footer links): monospace, regular, sentence case, about 1% of the frame height (10 to 11px at desktop). Closest free fonts: IBM Plex Mono 400 or JetBrains Mono 400, with a matching Japanese gothic such as Noto Sans JP for CJK lines.
- Site name top left and section labels: same mono, slightly bolder (500).
- Large mark: one hand-drawn brush glyph, black on white in the footer corner (about 15% of frame height) and white on black at the end (about 25%). Use an SVG drawing rather than a font.
- Buttons are bracketed words like [PREV], 01/11, [NEXT], and [Add to cart] instead of filled buttons.

## Layout
- 16:10-ish browser window (1124x720 capture) with a dark browser chrome strip on top.
- Fixed left rail (about 8% wide) with the site name and a vertical nav: Events, Archives, Publications, Goods, Stockists, Cart (0).
- Content column starts at about 22% from the left with a breadcrumb led by a solid black dot; detail pages split into a large light-gray image well (about 30% wide, square-ish) and a text column with 1px rules between blocks.
- Footer: a wide box with 1px black border and three columns divided by 1px vertical lines (project and socials, site links, small legal links); the brush glyph sits bottom right.
- No radii, no shadows; spacing on a 4px base with about 24px gaps between blocks.

## Elements
- Archive card: title and date in mono, a 16:9 video thumbnail (about 80x45px) with a tiny play badge.
- Event detail: date, time and venue rows in a bordered table, a lineup list, an access paragraph.
- Product page: image well #E9E9E9 with the item centred, pagination below, price and description right, bullet sections marked with black dots.
- Cart: two line items with 40px thumbnails, a 3-cell quantity stepper (minus, value, plus) in 1px boxes, a subtotal row and a full-width outlined checkout button.
- Floating player: about 22% wide, white title bar with a name, minimize and close icons, live video of an outdoor performance below.

## Motion
- 0 to 21s: plain page navigations (Archives at 0.9s, Event at 5.1s, Publication at 9.2s, Goods at 13.3s, Cart at 17.5s); pages swap instantly or with a short 150ms fade.
- The floating player persists across every navigation without reloading; the cart count increments from 0 to 1 to 2 as items are added.
- At about 21s the screen cuts to black and the brush glyph appears in white, held to the end.

## Rebuild it
1. Next.js or React Router layout with a persistent root that holds the left rail, the footer and a `<FloatingPlayer>` outside the routed outlet, so the video never remounts.
2. Tailwind: `bg-[#F9F9F9] text-[#050505] font-mono text-[11px] leading-[1.6]`; borders always `border border-black` (1px); no `rounded`.
3. Grid: `grid grid-cols-[120px_1fr]`, detail pages `grid-cols-[minmax(0,5fr)_minmax(0,4fr)] gap-6`.
4. Player: `fixed bottom-4 right-4 w-[22vw]` with `drag` and `dragMomentum={false}` from Motion; minimize animates height to the title bar (200ms ease-out).
5. Route change: wrap the outlet in `AnimatePresence mode="wait"` with an opacity 0 to 1 fade of 150ms.
6. Outro: a black section with the glyph as an SVG path drawn using `pathLength` 0 to 1 over 900ms.

## Generation prompt
A screen recording of a minimal off-white website set entirely in tiny monospace type, with a left vertical menu, thin black hairline boxes, a footer split into three bordered columns and a large black brush-stroke glyph in the corner; pages show an archive list, an event schedule, a green printed zine on a gray backdrop and a shopping cart with small quantity steppers, while a small floating video window of an outdoor music performance stays in the bottom-right corner; ends on a white brush glyph on black. Calm, archival, editorial.