The Impossible Intersection

This is the space where dark-academia meets dopamine-neon, where a midnight study hall in an ancient university library collides with hot-pink LED strips strung along mahogany bookshelves. Marginalia in centuries-old folios glows with electric chartreuse highlighter. The musty smell of vellum coexists with the ozone tang of overclocked screens.

The name miris derives from the Latin mirari, to wonder, and evokes the Japanese 未来す, "to become future." This is a space where classical scholarship and electric modernity fuse into something neither could be alone — a research residency conducted at 2 AM under buzzing fluorescent tubes in a neo-Gothic reading room, concentrated and electric, alive with quiet intensity.

The layout follows an editorial-flow paradigm — vertical reading rhythm punctuated by deliberate ruptures, modeled after scholarly journal articles where footnotes, marginalia, and inserted plates interrupt the main column at calculated intervals.

The dominant central reading column occupies 55% of the viewport width with a maximum of 680 pixels. It is left-aligned at a golden-section offset — approximately 38.2% from the left edge on desktop. This asymmetric placement leaves a wide right margin, the "marginalia gutter," where secondary annotations, geometric diagrams, and neon-highlighted pull-quotes float like scholarly apparatus suspended in the dark.

Content is organized into disclosure chapters. Initially, only chapter headings and a single introductory sentence are visible. As you scroll, content within each chapter progressively reveals itself through staggered opacity transitions, creating the experience of text emerging from a dark page as light passes over it.

Typography here is an act of tension. Headlines use Cormorant Garamond, an elegant, high-contrast Garamond revival with refined serifs and generous x-height — the voice of classical scholarship. Body text employs EB Garamond, the definitive open-source Garamond, with optical sizes and ligatures that honor the original 16th-century punches.

Yet this classical foundation is disrupted. Certain key words within headlines are set in electric chartreuse (#e4ff1a), as if someone highlighted the most important passage with a neon Sharpie. Marginalia employs Space Grotesk, a sharp, geometric sans-serif that creates deliberate tension against the serifs — a typographic friction that mirrors the aesthetic collision at the heart of miris.works.

Each chapter opens with a drop cap rendered in hot magenta (#ff2d6b), spanning three lines. The first letter arrives before the paragraph text, the initial moment where the eye enters the chapter, like a rubricated initial in a medieval codex glowing with neon instead of gold leaf.

The palette exists in extreme contrast. The primary background is deep library black (#0d0b14), near-black with a faint violet undertone — the darkness of an unlit reading room at midnight. Against this void sit three neon accents: electric chartreuse (#e4ff1a), hot magenta (#ff2d6b), and ultraviolet blue (#5b4fff).

Text exists in warm, desaturated creams. Primary body text is aged parchment (#c8bfa8), the color of old paper under low light. Display headlines are pale vellum (#f0e6d3), brighter still, creating hierarchy through warmth rather than neon saturation.

The neon colors follow the "highlighter principle": no more than 15% of visible text at any moment should be neon-colored. The neon is not wholesale recoloring — it is deliberate annotation, as if a scholar with a fluorescent pen has marked the most important passages.

There are no photographs, no stock images, no illustrations. miris.works constructs its entire visual language from CSS-generated geometric shapes, typographic compositions, and abstract SVG patterns. The primary visual motif is a system of abstract geometric figures that evoke diagrams found in Renaissance mathematical treatises — circles inscribed in squares, triangles bisecting rectangles, overlapping ellipses.

These shapes are rendered in neon stroke colors against the dark background. An inscribed circle features a circle inscribed within a square, both outlined in neon, rotated 15 degrees. A bisected triangle is an equilateral outline with a horizontal line cutting through its center. An intersecting circles figure uses the Vesica Piscis, two overlapping circles with intersection zone filled at low opacity in hot magenta.

A grid of dots — a 12×12 array of tiny circles — appears in the spine gutter, evoking graph paper or star maps. As the user scrolls deeper into the page, geometric shapes become progressively more complex. Early chapters feature single shapes, while later chapters introduce compound compositions and overlapping grids, creating a visual narrative arc from simplicity to complexity that mirrors academic inquiry.

Content reveals itself through scroll-driven progressive disclosure. Each chapter begins with only its numeral and title visible. As the chapter enters the viewport center, body text fades in paragraph by paragraph. There is a 150-millisecond stagger between paragraphs, with opacity transitioning from 0 to 1 and a subtle vertical translation from 12 pixels down to 0, all over 600 milliseconds with an easing curve that accelerates then decelerates: cubic-bezier(0.16, 1, 0.3, 1).

Marginalia elements fade in 300 milliseconds after their associated body paragraph. A single IntersectionObserver tracks chapter visibility with threshold: [0, 0.1, 0.25, 0.5, 0.75, and 1.0. When a chapter reaches 25% intersection, its content reveal sequence begins. At 75%, marginalia emerges. When it falls below 10%, content re-hides, allowing re-reveal on re-scroll for a living-document feel.

This is not animation for spectacle. This is disclosure as narrative device, text materializing as if light is falling across a page, the experience of a manuscript page emerging from darkness as you approach it.

A thin vertical line is fixed to the right edge of the viewport, rendered in a gradient from hot magenta (#ff2d6b) at the top — indicating current scroll position — to deep library black (#0d0b14) at the bottom. The colored portion of this line grows proportionally to scroll progress, a minimal and elegant scroll indicator that doubles as a neon accent, a constant visual reference that you are moving through a manuscript.

This progress indicator is the only UI chrome on the page. There are no breadcrumbs, no chapter navigation buttons, no "back to top" links. The reader moves through the text in a single direction — downward, like turning pages — and the progress line marks how far through the manuscript you have traveled.

Section breaks are marked not by horizontal rules but by neon geometric dividers — thin lines of chartreuse or magenta that bisect the full viewport width, passing behind and through the text column like a laser cutting across a manuscript page, a moment of rupture and transition.

When the user hovers over a highlighted keyword — those set in electric chartreuse (#e4ff1a) — the glow effect intensifies. The text shadow deepens to 0 0 12px with 80% opacity, then 0 0 24px with 40% opacity, creating the sensation of the neon ink responding to proximity, as though the highlighter is pressure-sensitive, glowing brighter as your eye approaches.

This transition occurs over 200 milliseconds, smooth enough to feel responsive but not so fast as to startle. The entire page celebrates this kind of subtle interactivity — geometric shapes in the marginalia rotate imperceptibly over 120 seconds, one full rotation at a linear pace, giving the shapes a sense of quiet mechanical life, like astronomical instruments tracking celestial motion.

The design avoids the loud, demanding interactions common to modern web design. There are no modal overlays, no hamburger menus, no carousels, no accordions, no tab interfaces. Every interaction is minimal, refined, earned. The design speaks in whispers, not shouts.

Typographic refinement is not decoration — it is scholarship. EB Garamond activates optical kerning, ligatures, contextual alternates, and old-style numerals through font-feature-settings. These features are not visible at glance, but they are felt throughout the reading experience: the /fi/ ligature flows naturally, old-style numerals sit elegantly on the baseline, the kern between T and H adjusts for optical harmony.

Cormorant Garamond headlines invoke small-caps on subtitle text, a hallmark of academic typesetting. Every letter-spacing value is precise: display text at -0.02em for tightness befitting a neon sign, body text at 0.005em for subtle expansion, marginalia at 0.12em for all-caps headers and 0.02em for body text.

Line-height is generous: 1.72 for body text, 1.05 for headlines. Paragraph indent is 1.5em on all paragraphs except the first in each chapter, following the conventions of academic books where the opening paragraph of a section is flush left, a visual signal that a new thought is beginning.

Miris.works is not a website. It is a manuscript. There is no navigation bar, no hamburger menu, no footer link grid. There are no pricing tables, testimonial sections, newsletter signup forms, social media icons, cookie banners, or CTA buttons. No stat-grids, no feature comparison cards, no carousels, no accordions, no modal overlays.

You read it from top to bottom, as a reader reads a book. Chapters reveal themselves as you scroll, text materializing from darkness as if light is falling across the page. Geometric shapes rotate slowly in the margins, ancient diagrams come alive with neon. The progress indicator grows along the right edge, marking your progress through the manuscript.

This is a space where classical scholarship meets electric modernity, where the musty libraries of Umberto Eco's imagination collide with the neon aesthetic of a graphic designer who grew up on rave culture. It is an 2 AM research residency in a neo-Gothic reading room under buzzing fluorescent tubes. It is the feeling of cracking open a first-edition folio and finding someone has annotated every page with a neon Sharpie.

Welcome to miris.works.