# Design Language for miris-project.net ## Aesthetics and Tone miris-project.net is a **blobitecture research observatory** — a site that behaves like a soft, breathing organism rather than a page. The conceit: MIRIS is read as *Mutual Information, Recurrent Inference, Soft-bodies* — a fictional open research collective studying how knowledge changes shape under pressure. The whole site is therefore a single membrane: a translucent, gel-like surface that the visitor presses through, leaving dents, ripples and slow-healing welts. There is no rectangle anywhere. Every container is a `border-radius`-warped lobe; every section transition is a peristaltic squeeze; every hover is a poke into something that pushes back. The tone is **whimsical-creative crossed with scholarly-intellectual** — the copy is precise, almost lab-notebook dry ("Observation 14: the membrane retains a 0.4s memory of the cursor"), but the visual world is squishy, lava-lamp, amniotic. Mood references: a Petri dish photographed at 60fps under raking light; the Eames *Powers of Ten* zoom but through protoplasm instead of space; Olafur Eliasson's *Your blind passenger* fog room rendered in WebGL; the title screen of a 1998 educational CD-ROM about cells, redesigned by someone who has since read too much category theory. It must feel **alive, slightly wet, and faintly amused at being looked at**. Anti-design energy: deliberately refuses cards, grids, hero CTAs — it is a tide pool, not a dashboard. ## Layout Motifs and Structure **Organic-flow, full-bleed, zero hard edges.** The page is one continuous vertical scroll of ~640vh, divided into six "chambers" — but the divisions are *metaball merges*, not section breaks. Implementation backbone: - A single full-viewport `` (or layered SVG with `feGaussianBlur` + `feColorMatrix` for the gooey filter) sits `position: fixed` behind everything, rendering 3–7 metaballs that drift, attract and split. Their colour and count are driven by `scrollY`. This is the "membrane." - Foreground content lives in `
` lobes: each is a `
` whose shape is an animated `clip-path` (an 8-point superellipse / squircle that wobbles ±6% on a 9s sine loop) — never a rectangle, never a circle, always something between. - Lobes are placed on an **invisible asymmetric spiral**: chamber 1 lobe sits lower-left, chamber 2 upper-right but overlapping the metaball gutter, chamber 3 dead-centre but oversized (110vw — it bleeds off both edges), chamber 4 splits into *two* sibling lobes that visibly "divided" from one parent during the scroll, chamber 5 is a thin horizontal band stretched like surface tension, chamber 6 is a single small dense nucleus, centred, the only "still" thing on the site. - No top nav bar. Navigation is a **floating ganglion** — a cluster of 6 small blobs in the bottom-right that connect to the cursor with elastic threads when approached; clicking one launches a viscous scroll (eased over 1.6s with a back-ease, like being pulled through jelly) to that chamber. - Negative space between lobes is never empty: faint drifting "spores" (2–4px dots) and one or two slow large out-of-focus metaballs always occupy it. - Mobile: lobes stack single-column, `clip-path` wobble reduced to ±3%, the fixed membrane canvas drops to 3 metaballs for frame budget, the ganglion nav collapses into one pulsing blob that expands radially on tap. ## Typography and Palette **Type stack — Google Fonts only.** - **Fraunces** (variable, opsz 9–144, "soft" axis maxed, wght 300–600, italic available). The display + headline face. Fraunces is chosen specifically for its *Soft* optical axis — at large sizes its terminals literally swell and round, which reads as the same biology the membrane is made of. All chamber titles, the wordmark `MIRIS` (set in lowercase `miris` actually, optical-size 144, soft-max, with the dot of the `i` enlarged to a full disc that doubles as a metaball when the page loads), and pull-quotes from the "lab notebook." - **Spline Sans** (variable, wght 300–500) — the workhorse for all body copy, observation logs, captions, and the ganglion labels. A humanist sans with gentle, slightly humid curves; pairs with Fraunces without competing. Set body at 19px / 1.7, measure capped at 62ch, colour Ink (#1A1718) on the lobe membranes. - **Spline Sans Mono** (wght 400) — used *only* for the "instrument readouts": the live cursor-memory timer, metaball count, the `data-observation` indices, and one running `scrollY → membrane viscosity` numeric strip down the right margin of chamber 3. Tracking +0.04em, size 13px, colour Probe (#2E7D6B). **Palette — amniotic luminescence, six colours minimum:** - `#0B1411` **Abyss** — the deepest membrane state (chambers 1 and 6); near-black with a green undertone, like deep water. - `#11302A` **Tide** — mid-depth membrane; chambers 2, 4, 5 backgrounds shift toward this. - `#2E7D6B` **Probe** — the primary bio-teal; metaball cores, mono readouts, active ganglion blob. - `#5FD0AE` **Glow** — luminous mint highlight; metaball rim-light, link hover swell, the loaded `i`-dot. - `#F4EFE6` **Lymph** — warm bone-white; the lobe membrane fill (content sits *on* this), at 92% opacity over the dark canvas so the metaballs faintly glow through. - `#1A1718` **Ink** — body text on Lymph; not pure black, a warm near-black so it reads soft. - `#D8743C` **Synapse** (accent, ≤4% of pixels) — a single warm amber, used *exclusively* for the elastic cursor-threads on the ganglion and for one word per chamber that the membrane "highlights" by briefly bleeding amber around it. Gradients are all **radial and animated** — `radial-gradient` blobs that move; never a flat linear band. ## Imagery and Motifs - **The membrane itself is the imagery** — no photographs. The gooey-filter metaball field is generated, not sourced. - **Spores**: tiny ``s with `mix-blend-mode: screen`, drifting on Perlin-noise paths, occasionally absorbed by a passing metaball (they snap toward it then vanish with a `scale(0)` pop). - **Welts & dents**: wherever the cursor lingers >0.6s on a lobe, the membrane around the pointer develops a soft inward `box-shadow` depression that heals (eases back) over 1.2s after the cursor leaves — the site *remembers being touched*. This is the signature interaction. - **Cell-division motif** in chamber 4: one parent lobe visibly pinches at the equator as you scroll into it, the `clip-path` necking down, then snapping into two child lobes that drift apart — the content "splits" with it (one paragraph becomes two columns mid-animation). - **Surface-tension band** in chamber 5: a single ultra-wide thin lobe that ripples horizontally; text inside scrolls *with* the ripple, baseline undulating ±4px. - **Iconography**: no icon set. Functional glyphs (the ganglion nav points, the "next chamber" hint) are all just small metaballs of varying squish — meaning is conveyed by *behaviour* (bounce frequency, attraction strength), not pictograms. - **Grain**: a faint `feTurbulence`-driven film grain at 4% opacity over the whole composite — keeps the gel from looking like sterile CGI; gives it a "filmed under a microscope" texture. ## Prompts for Implementation Build miris-project.net as **one long static HTML document** — no framework, no router. One `` (preferred) or one SVG `` (`feGaussianBlur stdDeviation="12"` → `feColorMatrix` to sharpen alpha → `feBlend`) applied to a `
` of absolutely-positioned blob ``s if you go the CSS route. RequestAnimationFrame loop drives metaball physics: each metaball has position, velocity, radius, target; they're softly attracted to the cursor and to each other, gently repelled at the walls. Tie `metaballCount`, `baseRadius`, and the radial-gradient stops to a normalised `scrollProgress` (0–1) so chambers feel like depths of one body of water rather than separate pages. **Chamber-by-chamber:** 1. **Surface.** On load: black (Abyss). A single Glow metaball expands from centre — it *is* the dot of the `i` in `miris`, which fades up around it in Fraunces 144 soft. Tagline below in Spline Sans, letter-spaced wide, fades in word-by-word with a 90ms stagger as each word is "wetted" (a quick amber Synapse bleed then settle). Subtle hint to scroll: the metaball slowly elongates downward, like a drip about to fall. 2. **Premise.** Scrolling pulls the membrane "up" — the dominant tone migrates Abyss→Tide. A lobe slides in from upper-right, overlapping the metaball gutter; its Lymph fill lets two background metaballs glow faintly through it. Body copy here states the (fictional) research premise as lab-notebook prose. The right margin grows a mono `scrollY → viscosity:` readout that ticks live. 3. **The Big Lobe.** A 110vw oversized lobe bleeds off both edges; this is the "manifesto" chamber. Text set generously in Fraunces italic for the quote, Spline Sans for the body. As you scroll, the lobe's `clip-path` breathes more dramatically (±10%). One word — "shape" — gets the persistent amber Synapse highlight. The film grain is most visible here against the large Lymph field. 4. **Division.** The parent lobe pinches and splits into two children (see Imagery). Content reflows from one column to two *during* the animation, driven by scroll position, not a media query. Each child lobe carries half of "Observation 14 / Observation 15." A few spores get caught in the pinch and pop. 5. **Tension.** The membrane stretches into a thin ultra-wide horizontal band. Text inside undulates with a sine ripple. This is the shortest chamber — a single sentence about equilibrium, stretched almost to breaking, then it relaxes. 6. **Nucleus.** Everything calms. Tone returns to Abyss. All metaballs slowly migrate to merge into ONE central dense blob — the only still element on the site. Inside it, a small dense lobe holds the closing text (contact-as-prose: "Correspondence: a single address, written below, which you may poke") and the page footer rendered as faint mono spores around the perimeter. The `i`-dot metaball from chamber 1 returns home into the nucleus. **Motion vocabulary:** viscous easing everywhere (custom cubic-bezier ~`(0.16, 0.84, 0.20, 1.0)` and back-eases for the jelly snap); metaball physics on RAF; `clip-path` wobble on long sine loops; the membrane-dent / heal interaction; cursor-attracted elastic threads on the ganglion nav; spore Perlin drift; word-by-word amber "wetting" reveals. Respect `prefers-reduced-motion`: freeze metaballs at a pleasing static arrangement, disable wobble and ripple, keep only opacity fades. **AVOID:** any rectangle or card; any top navigation bar; any pricing block, stat-grid, testimonial row, or CTA button cluster; any stock photography; any flat linear gradient; hard section dividers. If it looks like a SaaS landing page for one second, it has failed — it must always look like something biological being observed. ## Uniqueness Notes Differentiators from the other designs in the registry and from the seed's defaults: 1. **The membrane *remembers* touch.** The dent-and-heal interaction (cursor lingering leaves a soft depression that eases back over ~1.2s) makes the surface itself feel like skin with short-term memory — no other design in the registry treats the page background as a deformable, healing tissue rather than a static or merely-parallaxing field. 2. **Metaball physics as the entire layout engine.** Not a decorative blob in a corner — the gooey metaball field is `position: fixed` behind everything, its count/size/colour bound to scroll progress, and the navigation, section transitions, and even some icons are *just metaballs of different squish*. The site has zero icon set and zero hard containers; behaviour replaces pictograms. 3. **Cell-division as a scroll-driven content reflow.** Chamber 4 literally pinches one lobe into two and reflows a single text column into two columns *during* the split animation — structure-as-narrative, not a CSS media query. 4. **Fraunces with the *Soft* optical axis maxed**, chosen because its terminals physically swell at display size to match the biology — typography that is the same material as the imagery. Paired with Spline Sans + Spline Sans Mono "instrument readouts," a trio not used elsewhere here. 5. **Amniotic-luminescence palette** — Abyss/Tide/Probe/Glow/Lymph/Ink with a single 4%-pixel amber Synapse accent used only for cursor-threads and per-chamber word "wetting." Not the warm-gradient default; a wet, deep-water bio-teal world. Chosen seed/style: **blobitecture fluid layout** (2% usage in registry — deliberately underused). Cross-pollinated with **anti-design** and **avant-garde** aesthetics (each <2%). Avoided patterns from frequency analysis: **photography** (98% — none used; all imagery generated), **card-grid** (88% — zero cards), **full-bleed used as rectangles** (rejected in favour of organic-flow lobes), **warm gradient palette** (98% — replaced with deep bio-teal radial gradients), **glassmorphism** (74% — used at most as a faint show-through, never as the structural look), **cursor-follow** reframed: instead of the ubiquitous trailing-dot, the cursor here *physically deforms* the membrane and is grabbed by elastic ganglion threads.