# Design Language for simai.moe ## Aesthetics and Tone simai.moe is **the last reel of a film that was never released — a contact sheet pinned to a wall in an empty editing suite, every frame a "fin," every fin a different ending.** The Japanese word *仕舞い (shimai / simai)* means "the finish, the closing, the putting-away." This site treats endings as a subject worth lingering on: not death, not loss, but the quiet ceremony of *something concluding well*. The mood is **avant-garde editorial crossed with a darkroom at 2am** — high-fashion lookbook restraint (acres of black, one violent accent, type set like a couture invitation) fused with the chemical romance of analog photography (sprocket holes, frame counters, the orange cast of a safelight, dust on the negative). Nothing here is cute in the conventional `.moe` sense — but it is *tender*. The tenderness is in the pacing: the page moves at the speed of someone slowly closing a heavy door. Tone words: **mysterious-moody**, **elegant-sophisticated**, with an undercurrent of **dreamy-ethereal**. It is a fashion film with no clothes in it — only light, type, and the act of ending. ## Layout Motifs and Structure The spine of the site is a **horizontal-scroll filmstrip**: the whole page is one continuous strip of "frames" that you scrub left-to-right (scroll wheel / trackpad mapped to horizontal translate, with vertical scroll as fallback). Between every pair of frames runs a **perforated sprocket-hole margin** — a vertical band of rounded rectangles, top and bottom of the viewport, fixed, scrolling slightly faster than the content (parallax, but mechanical, like film advancing through a gate). **Frame system:** - The viewport is divided by a persistent **frame-line grid**: thin (`1px`) lines at `8%`, `50%`, `92%` width — the "safe area" rectangle of a cinema frame, drawn in `#3A3631` over the black. - Each major frame is a **full-bleed black field** with content composed *off-center* — title in the lower-left "slate" corner, a single image or generative bloom of light pushed to the upper-right third. **ma-negative-space**: at least 55% of every frame is empty black. The emptiness is the point; it's the room tone. - A **frame counter** lives top-left, fixed: `FIN. 003 / 011` in mono, the number ticking as you pass each frame (counter-animate). - The first frame is the **title slate** — a clapperboard rendered in CSS: hinged top bar, `simai.moe` chalked across it, `TAKE 01` / `ROLL 仕舞` / today's date in the slate fields. It does *not* clap on load; it claps once, slowly, when you begin to scroll — that's the "action" cue. - The last frame is a **leader countdown**: a circular wipe `5… 4… 3…` then pure black then the single word **終** (owari) fading up in serif, hold, fade out. Below it, almost invisible at `#1A1714` on `#0D0B09`: a tiny imprint line. No footer links, no CTA, no "get started." The whole composition reads top-to-bottom as a *contact sheet* on mobile (frames stack vertically with sprocket gutters between), and left-to-right as a *running filmstrip* on desktop. ## Typography and Palette **Type system — three Google Fonts:** - **Display / frame titles: "Bodoni Moda"** — high-contrast Didone, the couture-invitation face. Set large, light weight (400), generous letter-spacing (`0.04em`) on the big "FIN" words; the thin hairlines of the Bodoni catch the "safelight" glow. Used for every frame's headline and the `終` glyph at the end. - **Body / captions / the prose between frames: "Spectral"** — a calm transitional serif with real italic, set small (`15px`), wide margins, low line-length (~38ch). This is the voice that narrates each ending in two or three sentences. Italics do a lot of work. - **Technical / counters / slate fields / labels: "Space Mono"** — the frame counter, the "ROLL," the date, the sprocket-side tick marks, the `f/2 · 1/8s` exposure-style metadata sprinkled in corners. ALL CAPS, tracked out, `#6E6A63`. **Palette — warm-black darkroom with a single safelight wound:** - `#0D0B09` — **base black**, warm, the unexposed field (not pure `#000`; it has a coal/sepia heat in it). - `#16120F` — **frame black**, one notch lighter, used for the inner safe-area rectangle so the frame-lines read. - `#F4ECDD` — **light leak ivory**, the type color, the color of the chalk on the slate and the headline serif — like paper held to a window. - `#E5532B` — **safelight orange**, the *one* accent: the glow at frame edges, the active counter digit, the clapper stripe, the leader countdown ring. Used sparingly enough that it always feels like a wound or a warmth. - `#7A3D9E` — **violet fog**, a secondary cool bloom used only in 1–2 frames (the "night" endings) as a soft radial behind the type — the bruise to the orange's ember. - `#3A3631` — **frame-line grey**, hairlines, sprocket-hole strokes, dust speckles. - `#6E6A63` — **slate grey**, the mono metadata. ## Imagery and Motifs **No conventional photography — instead, the *apparatus* of photography rendered in CSS/SVG, plus generative "light."** The lexicon: - **Sprocket-hole bands** — the signature: fixed top + bottom strips of rounded rects (`rx: 3px`), slightly irregular spacing, the orange safelight bleeding through the gaps on hover/scroll. - **Light blooms** — each frame's "subject" is a CSS radial-gradient bloom (orange or violet) over black, distorted by an SVG `feTurbulence` displacement so it shimmers like emulsion grain. No two blooms identical; they're seeded per frame. - **Dust & scratches** — a fixed overlay layer: a handful of `1px` white speckles and two or three faint vertical scratch lines that drift slowly (the "print" aging in real time). Low opacity (`0.06`). - **The clapperboard** (frame 1) and **leader countdown circle** (last frame) — both pure CSS, the only "hard" mechanical objects. - **Frame-edge registration marks** — tiny `+` crosshairs in the corners of the safe-area rectangle, like film registration pins. Mono, grey. - **A single recurring glyph: 仕舞** — appears small in slate corners, large at the end. It's the closest thing to a "mascot": a word, not a creature. - **Hairline frame numbers in the gutter** — `01A 01 02 02A` exposure-style, running down the sprocket margin, the way real 35mm has frame IDs etched between perforations. ## Prompts for Implementation Build simai.moe as **one HTML file, one CSS file, one ES module** — no framework, no build step. The experience is a slow horizontal scrub through ~9–11 "frames," each a meditation on a different kind of ending, narrated in a few italic serif sentences, scored by mechanical film-advance motion. **There is no signup, no pricing, no testimonials, no logo wall, no stat-grid, no feature-grid, no contact form, no CTA banner, no cookie modal, no chatbot.** It is a narrative artifact — a short film about finishing — not a funnel. **Document order (left to right, or top to bottom on mobile):** 1. **Persistent chrome mounts on load:** the two sprocket-hole bands (top/bottom), the frame-line safe-area rectangle, the top-left frame counter (`FIN. 001 / 011`), the dust/scratch overlay. All present before the first interaction. 2. **Frame 1 — the Title Slate.** CSS clapperboard, hinged. `simai.moe` chalked across; `ROLL 仕舞 · TAKE 01 · ` in the fields. A line of Spectral italic underneath: *"every reel ends. this one ends eleven times."* On first scroll input, the clapper hinge swings down once (spring, ~600ms), a soft orange flash ripples the sprocket gaps, and the strip begins moving. 3. **Frames 2–10 — the Endings.** Each: full-bleed warm black, frame-line rectangle, a unique seeded light-bloom pushed upper-right, a Bodoni Moda headline lower-left (e.g. *"FIN. — the kettle, going cold"*, *"FIN. — a tab, closed without saving"*, *"FIN. — summer, on a Tuesday"*, *"FIN. — the last message, left on read, then forgiven"*), and 2–3 lines of Spectral italic prose beneath it. As each frame enters the safe area: the frame counter ticks (counter-animate), the headline does a slow **path-draw** of its own underline hairline, the prose does a gentle **fade-reveal** with a 60ms stagger per line. 1–2 of these frames swap the orange bloom for the **violet fog** (the "night" endings) — and on those, the safelight chrome dims to grey for the duration. 4. **Frame 11 — the Leader Countdown.** A circular wipe: `5` then `4` then `3` then `2` then `1`, each a radial-conic mask sweep in safelight orange (~700ms each), the sprocket bands speeding up. Then **pure `#0D0B09` hold for ~1.2s** (the room tone). Then **終** fades up center, large Bodoni, ivory, holds, fades. Below, at near-invisible `#1A1714`: `simai.moe · 仕舞 · fin.` and nothing else. **Motion & interaction principles:** - **Horizontal scrub is the primary axis** — map `wheel`/trackpad deltaY to `translateX` on the strip with eased momentum (custom inertia, ~0.92 friction). Vertical-scroll users get the same sequence stacked. Keyboard: `→`/`←` advance one frame with a spring snap. - **Everything moves like a film mechanism** — slightly mechanical springs, never bouncy-cute. The sprocket bands parallax-lead the content by ~8%. **cursor-follow**: a faint `12px` orange ring trails the pointer, like a focus-puller's mark; over a headline it expands to bracket the word with two registration `+` marks. - **The dust overlay drifts perpetually** — speckles re-randomize every ~4s, scratch lines crawl. The page is never perfectly still; it's a print, and prints age. - **No scroll bars, no nav menu.** A single hairline progress strip along the bottom sprocket band fills in safelight orange as you advance — that's the only "where am I." - Respect `prefers-reduced-motion`: clapper doesn't clap (just appears down), blooms stop shimmering, scrub becomes a clean snap between frames, dust freezes. ## Uniqueness Notes Differentiators from the corpus: 1. **A `.moe` site with zero kawaii vocabulary** — no mascot creature, no pastel, no rounded-blob friends. The "moe" here is etymological wordplay on *仕舞い (simai = the finish)*; the affection is delivered through couture restraint and darkroom melancholy, not cuteness. Nothing else in the corpus turns a `.moe` domain into a black-clad avant-garde fashion film about endings. 2. **The page is a literal filmstrip you scrub horizontally** — horizontal-scroll is only ~8% of the corpus, and none of those frame it as 35mm with fixed sprocket-hole margins, etched frame IDs, registration crosshairs, a clapperboard title slate, and a leader-countdown finale. The film-mechanism metaphor is total: motion, layout, chrome, and ending are all "the apparatus." 3. **Endings as the content** — 9–11 frames each narrating a small, specific, non-tragic conclusion in two lines of italic serif. It's an essay disguised as a lookbook disguised as a contact sheet. No other design uses "every frame is a different ending" as its organizing conceit. 4. **Avant-garde aesthetic (only ~2% of corpus) executed as fashion-editorial-meets-darkroom** — Bodoni Moda hairlines glowing under a CSS "safelight," a single `#E5532B` accent treated like a wound, perpetual drifting film-dust. Avoids the corpus's overused **hand-drawn (94%)**, **glassmorphism (84%)**, **card-grid (92%)**, **photography (98%)** — there is literally no photography, no card grid, no glass, no hand-drawn doodle. Leans into the rare: avant-garde aesthetic, horizontal-scroll layout, mysterious-moody/elegant-sophisticated tone, path-draw and counter-animate over the ubiquitous tilt-3d. Chosen seed/style: **avant-garde fashion lookbook** (fallback selection — no seed supplied in assignment; picked for rarity in the corpus, ~2%).