# Design Language for muhan.dev ## Aesthetics and Tone muhan.dev (無限 — *muhan*, "the limitless") is a **generative-art chamber where a single equation never stops drawing itself**. The governing image: a quiet, dim room containing one machine — a plotter pen suspended over black paper — that has been tracing the same strange attractor since before you arrived and will keep tracing it long after you leave. You are not the audience of a presentation; you are a visitor who happened to walk past a process that does not need you. The mood is **zen-contemplative crossed with the cold patience of mathematics** — Borges' infinite Library rendered not as shelves but as a phase-space trajectory; Sol LeWitt's wall-drawing instructions executed by a system with no fatigue; the hum of a CRT oscilloscope at 3 a.m. tracing Lissajous figures nobody asked for. Nothing here is hand-drawn, nothing is warm, nothing is decorated. Every mark on the screen is the output of a rule. The tone refuses cheerfulness, refuses urgency, refuses persuasion — it offers instead the specific calm of watching something deterministic unfold past the point of prediction. Where most of the corpus reaches for hand-drawn warmth (96%) and glassmorphism (77%), muhan.dev is **bone-cold, ink-on-void, and procedurally honest**: the page admits, openly, that it is being computed. ## Layout Motifs and Structure The site is one continuous **layered-depth** stack — not stacked sections with hard seams, but a single deep field in which type, axis grids, and the generative trace occupy distinct z-planes that parallax against one another as you scroll. Think of it as looking *into* a glass slab edge-on: the words float near the surface, the coordinate grid sits a centimetre back, and the attractor curve coils far in the depths. - **The phase-space canvas is the page.** A full-bleed `` runs floor-to-ceiling, fixed, behind everything. It is never a "hero section" — it has no boundary, no end. Scrolling does not scroll *past* it; scrolling changes the **viewing parameters** of the same continuous integration (rotation of the projection plane, the integration step size, the trail-decay length). - **Five depth strata, not five sections.** As you descend, five textual "stations" rise from the depths to surface-level, linger, and sink again: (1) the *Premise* — a definition of muhan; (2) the *Iteration* — how the curve is generated, stated as pseudocode; (3) the *Divergence* — on sensitive dependence, the point where two near-identical starts become unrecognisable; (4) the *Density* — that the trajectory never repeats yet never escapes its bounded region; (5) the *Persistence* — a closing note that the process continues whether or not the tab is open. Each station is a small monospace block, never more than 60 characters wide, set against the live trace. - **A persistent left-edge axis ruler.** A thin vertical SVG ruler pinned to the left margin, tick-marked in powers of ten (10⁰, 10¹, 10²…) that never reaches a top value — the topmost label is always "…", redrawn as you scroll so the scale appears boundless. This is the only "navigation." - **No footer.** The page does not conclude. Past the last station, the canvas simply continues; a single line of monospace text near the very bottom reads `// the integration does not halt` and below it: nothing, just black, scrollable for one more viewport-height into pure void. - Asymmetry comes from the math: textual stations alternate which third of the viewport they surface in (left third, right third, dead centre) because the attractor's lobes pull the visual weight there at that moment of the projection. ## Typography and Palette **Fonts (Google Fonts only — two voices: one for the machine, one for the human aside):** - **Body, pseudocode, stations, ruler labels — *Spline Sans Mono* (Variable, wght 300–600).** A monospace with humanist softening — chosen because pure-geometric monos read as "terminal" and this is not a terminal; it is a *notebook left open*. Set at generous line-height (1.8), letter-spacing slightly positive (+0.02em), in low-weight 300 for ambient text and 500 for the one keyword per block that matters. All numerals are tabular by nature of the typeface, which lets the axis ruler and any coordinate readouts align to the pixel. - **The single oversized word — *Newsreader* (Variable, opsz 72, wght 200, italic).** Exactly one piece of serif type exists on the whole site: the word **無限 / muhan** appears once, enormous, low-contrast grey on black, set in Newsreader's lightest italic at display optical size — a fragile, almost-vanishing serif that looks like it was breathed onto the glass rather than printed. It anchors the Premise station and never recurs. The contrast between this one breath-soft serif and the otherwise-relentless mono *is* the typographic argument: the limitless, named once in human language, then handed back to the machine. **Palette — monochrome, ink-on-void, with one electric exception:** - `#05060A` — **void black** (the page ground; very slightly blue-cold, not pure #000, so the canvas trails read as "deep" rather than "off") - `#0D0F16` — **slate shadow** (z-plane separators, the faint coordinate grid lines, station-block backings at ~40% opacity) - `#6E7686` — **graphite** (ambient body text, ruler ticks — deliberately dim, demands you lean in) - `#C7CCD6` — **chalk** (the one emphasised keyword per station; the giant *muhan* word sits between this and graphite) - `#F2F4F8` — **paper white** (used at most twice: the current pen-tip position dot on the attractor, and the cursor) - `#3DF0C8` — **plotter phosphor** (the *only* chroma in the entire design — the live attractor trace itself, an oscilloscope-green-cyan, used nowhere else; older trail segments decay from this toward `#0D2A24` and then to nothing). A second, even rarer accent — `#FF5C7A`, **divergence pink** — appears for a few seconds only during the Divergence station, when a *ghost* second trajectory forks off the main one, then is gone. No gradients except the natural alpha-decay of the trace. No warm tones anywhere. The page is 95% black. ## Imagery and Motifs **Everything is generated. No photography (the corpus is at 98% photography — muhan.dev has zero). No stock, no illustration, no 3D render. Every visible mark is either type or the live mathematical output.** - **The strange attractor as protagonist.** The central artifact is a continuously-integrated 3D attractor (an Aizawa or Thomas attractor — chosen for their dense, looping, never-repeating curves) projected to 2D and drawn as a fading polyline on the canvas. It is the logo, the hero, the background, the navigation cue, and the closing image, all at once — because that is what "the limitless" *is* here. - **The phase-space grid.** Behind the trace, a faint isometric-ish coordinate lattice (thin `#0D0F16` lines) that rotates a few degrees as you scroll, so the curve appears to be examined from slowly-changing angles. Lines fade toward the edges; the grid, like the ruler, has no outer boundary. - **Pseudocode as ornament.** The Iteration station presents the generating rule as actual, syntax-dim pseudocode (`x' = (z - β)·x - δ·y` …). It is the only "decoration" — math standing in for flourish. - **The pen-tip dot.** A single 3px paper-white dot rides the very front of the trace, always moving, the one element on the page guaranteed never to be still. It leaves the phosphor trail behind it. - **Decay, not motion lines.** Old trace segments don't disappear cleanly — they thin and dim over ~2000 plotted points, so the canvas always shows a comet-like band of recent history coiling through emptiness. - **Tick-marks reaching "…".** Wherever a scale or count appears, its top value is the ellipsis glyph, never a number. Repeated motif: the bounded thing whose label says it isn't. ## Prompts for Implementation Build muhan.dev as **one HTML file, one CSS file, one JS module — a single scroll, no routes, no clicks required.** The entire experience is: a fixed full-viewport `` running a real-time numerical integration of a strange attractor, with five monospace text "stations" parallaxing in layered depth above it, and scroll position mapped to the *parameters of the integration* rather than to page offset. **The generative engine (this is the whole site):** 1. On load, begin RK4 (or simple Euler at small dt) integration of an Aizawa attractor from a fixed seed point. Maintain a ring buffer of the last ~2500 points. Each animation frame: advance the integration several steps, push new points, project the 3D state to 2D via a rotation matrix whose angles are driven by `scrollProgress`, and redraw the polyline with per-segment alpha falling off by buffer-age (newest = full `#3DF0C8`, oldest → transparent). Draw the 3px `#F2F4F8` pen-tip dot at the newest point. The curve must visibly *coil and loop forever* — it is bounded but never repeats; that is the point and it must read instantly. 2. **Scroll = viewing parameters, never "next slide."** Map `scrollProgress ∈ [0,1]` to: projection-plane rotation (full slow tumble across the scroll), trail length (longer near the middle "Density" station so the comet becomes a near-complete portrait of the attractor), and integration speed (slows almost to stillness at the "Divergence" station so the fork is legible, then resumes). 3. **The five stations** rise/linger/sink as you pass their scroll-anchors: each is a `
` of ≤60ch monospace text in `#6E7686` with exactly one word lifted to `#C7CCD6` weight 500, on a translucent `#0D0F16` backing at ~40%, blurred-backdrop optional. They translate on the z-axis (CSS `translateZ` within a `perspective` container) so they genuinely sit at different depths from the canvas — true layered-depth, not faked drop-shadows. Use IntersectionObserver / scroll math; animate with spring-eased transforms (this is one of the few corpus-common patterns worth keeping — restrained, not bouncy). 4. **The Premise station** additionally contains the one giant **無限 / muhan** word in Newsreader 200 italic at clamp(4rem, 14vw, 12rem), `#6E7686`→barely-`#C7CCD6`, that fades up as the station surfaces and dissolves as it sinks — the single moment of human language before the page is given back to the machine. 5. **The Divergence moment:** when its station is centred, spawn a *ghost* second integration offset from the main state by 1e-9, draw its trail in `#FF5C7A` decaying to `#2A0E16`; within a few seconds of plotted points the two trajectories are visibly unrelated; then the ghost's buffer empties and the pink is gone. A `#6E7686` caption: `two starts, a billionth apart — and now look.` 6. **The Persistence ending:** after the last station, the canvas keeps running over pure `#05060A` for one extra viewport-height; near the top of that void, one line: `// the integration does not halt`. The `requestAnimationFrame` loop genuinely never stops while the tab lives. If `prefers-reduced-motion`, freeze the integration but show a long pre-rendered static trace — the attractor portrait still complete, still bounded, still labelled "…". 7. **Cursor:** a single `#F2F4F8` ring; when it hovers near the canvas, the integration's `dt` subtly increases — the visitor can hurry the machine a little, but never stop it or steer it. The only interactivity, and it changes nothing permanent. **Hard avoids:** no CTA buttons, no pricing tiers, no stat/counter grids, no testimonial rows, no feature cards, no email capture, no footer link farm, no hero-with-subhead-and-button. No warm colours. No hand-drawn anything. No glassmorphic pill chips. The page sells nothing; it computes. ## Uniqueness Notes Deliberate departures from the patterns in the frequency analysis: 1. **Zero photography (corpus: 98%) and zero hand-drawn aesthetic (corpus: 96%).** muhan.dev's only imagery is a live numerical integration — `generative-art` imagery sits at 8% and is here taken to its literal extreme: there is *nothing else on the page* but generated math and type. The site is, structurally, an applet that admits it. 2. **Monochrome ink-on-void (corpus palette is 98% warm, 96% gradient).** The palette is 95% near-black with a single phosphor-cyan trace as the only chroma — a near-total rejection of the warm-gradient default. The lone exception (`#FF5C7A`) is on screen for seconds, then deleted. 3. **Scroll mapped to integration parameters, not to content offset.** Most "immersive-scroll" / "parallax" sites (parallax at 92%) scroll *through* content; here scrolling rotates a projection plane and changes a step size — the page has no "length" in the usual sense, and explicitly does not end (no footer, an extra void viewport, an unhalting rAF loop). 4. **One serif word, once, in an otherwise all-mono site.** A single breath-soft *Newsreader* italic 無限 against a relentless *Spline Sans Mono* field — the typographic contrast carries the whole concept rather than being a stylistic mix. 5. **The "…" motif:** every scale, ruler, and count tops out at an ellipsis glyph instead of a number — a recurring small claim that the bounded thing on screen is unbounded. Chosen seed/style: **generative art background** — composited as *aesthetic: generative, layout: layered-depth, typography: tech-mono, palette: monochrome, patterns: path-draw-svg, imagery: generative-art, motifs: particle-effects, tone: zen-contemplative*. Avoided per frequency analysis: hand-drawn (96%), glassmorphism (77%), photography (98%), warm palette (98%), gradient palette (96%), card-grid (89%), cursor-follow theatrics and magnetic buttons (89%/80%) — kept only restrained spring-eased depth transitions, which earn their place here.