From 434a233da2b3a6c0d6a2c777631337ab78cc4627 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Sun, 19 Jul 2026 03:59:32 +0200 Subject: [PATCH 1/7] feat(website): parthenon matrix-scene example (procedural Doric temple + green matrix rain) --- website/src/components/ExamplesSidebar.astro | 3 +- website/src/pages/examples/parthenon.astro | 540 +++++++++++++++++++ 2 files changed, 542 insertions(+), 1 deletion(-) create mode 100644 website/src/pages/examples/parthenon.astro diff --git a/website/src/components/ExamplesSidebar.astro b/website/src/components/ExamplesSidebar.astro index f41d1ae9..0053cc26 100644 --- a/website/src/components/ExamplesSidebar.astro +++ b/website/src/components/ExamplesSidebar.astro @@ -1,6 +1,6 @@ --- interface Props { - active: "world" | "flatmap" | "city-lab" | "image"; + active: "world" | "flatmap" | "city-lab" | "image" | "parthenon"; } const { active } = Astro.props; @@ -9,6 +9,7 @@ const items = [ { id: "flatmap", label: "Flat Map", href: "/examples/flatmap/", desc: "Iso · Web Mercator" }, { id: "city-lab", label: "City Lab", href: "/examples/city-lab/", desc: "Procedural · Endless" }, { id: "image", label: "Image", href: "/examples/image/", desc: "Drop a photo · ASCII" }, + { id: "parthenon", label: "Parthenon", href: "/examples/parthenon/", desc: "Matrix · Greek temple" }, ] as const; --- diff --git a/website/src/pages/examples/parthenon.astro b/website/src/pages/examples/parthenon.astro new file mode 100644 index 00000000..cd07c3eb --- /dev/null +++ b/website/src/pages/examples/parthenon.astro @@ -0,0 +1,540 @@ +--- +import ExamplesSidebar from "../../components/ExamplesSidebar.astro"; +import DocsHeader from "../../components/DocsHeader.astro"; +import Analytics from "../../components/Analytics.astro"; +const title = "glyphcss · Parthenon"; +const description = "The Parthenon — octastyle Doric peripteral temple built from glyphcss primitives, rendered as ASCII with green Matrix rain flowing down its columns. First-person: walk up the steps and in between the colonnade."; +--- + + + + + + + {title} + + + + + +
+ +
+
+
+

[ PARTHENON · MATRIX ]

+

The Parthenon as an octastyle Doric peripteral temple — three crepidoma steps, an 8 × 17 colonnade, entablature, cornice, triangular pediments, and a walkable interior: porch columns, cella doorways, the naos colonnade, and a golden Athena Parthenos — built from glyphcss primitives while green Matrix rain from @glyphcss/effects streams down every surface. First person: click the scene to capture the mouse, WASD to walk (the steps carry you up onto the stylobate — go through the east door), Space to jump, Esc to release.

+
+
+
+
+
+ Geometry: procedural — 46-column peristyle, 92-triglyph frieze, naos + Athena Parthenos, opisthodomos + Effect: GlyphEffects.matrixRain · monochrome #00ff66 + Controls: first person — click to look · WASD walk · Space jump + Renderer: glyphcss solid + perspective camera +
+
+
+
+ + + + From 63f19a109648433dac351668cd8bf306d041a5f6 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Sun, 19 Jul 2026 04:28:49 +0200 Subject: [PATCH 2/7] =?UTF-8?q?feat(website):=20parthenon=20flatmap-style?= =?UTF-8?q?=20controls=20=E2=80=94=20orbit/fpv=20toggle,=20live=20matrix?= =?UTF-8?q?=20config,=20no=20footer,=20pointer-lock=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/src/pages/examples/parthenon.astro | 375 ++++++++++++++++++--- 1 file changed, 337 insertions(+), 38 deletions(-) diff --git a/website/src/pages/examples/parthenon.astro b/website/src/pages/examples/parthenon.astro index cd07c3eb..90b406b5 100644 --- a/website/src/pages/examples/parthenon.astro +++ b/website/src/pages/examples/parthenon.astro @@ -3,7 +3,7 @@ import ExamplesSidebar from "../../components/ExamplesSidebar.astro"; import DocsHeader from "../../components/DocsHeader.astro"; import Analytics from "../../components/Analytics.astro"; const title = "glyphcss · Parthenon"; -const description = "The Parthenon — octastyle Doric peripteral temple built from glyphcss primitives, rendered as ASCII with green Matrix rain flowing down its columns. First-person: walk up the steps and in between the colonnade."; +const description = "The Parthenon — octastyle Doric peripteral temple built from glyphcss primitives, rendered as ASCII with green Matrix rain flowing down its columns. Orbit by default, or switch to first-person and walk the colonnade."; --- @@ -34,8 +34,82 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f touch-action: none; background: radial-gradient(circle at 50% 62%, rgba(0, 70, 32, 0.22), transparent 55%), #010604; } - .temple-host .glyph-output { touch-action: none; text-shadow: 0 0 7px rgba(0, 255, 102, 0.22); } - .map-foot { padding: 14px 32px; border-top: 1px solid rgba(0, 255, 102, 0.14); font-size: 11px; color: rgba(160, 232, 184, 0.45); display: flex; gap: 18px; flex-wrap: wrap; } + .temple-host .glyph-output { touch-action: none; text-shadow: 0 0 7px rgba(0, 255, 102, 0.22); cursor: grab; } + .temple-host .glyph-output:active { cursor: grabbing; } + .temple-host.is-fpv .glyph-output { cursor: crosshair; } + .temple-host.is-fpv .glyph-output:active { cursor: crosshair; } + + /* ── Floating-right control dock — copied from /examples/flatmap so every + example page shares the same chrome language (amber-on-dark, sky-blue + accent), independent of each page's own render palette. ── */ + .iso-controls { + position: absolute; top: 14px; right: 14px; z-index: 10; + width: 220px; padding: 12px 14px; + background: rgba(8,12,18,0.86); backdrop-filter: blur(4px); + border: 1px solid rgba(255,232,184,0.18); + font-size: 11px; color: rgba(255,232,184,0.7); + max-height: calc(100% - 28px); overflow-y: auto; + } + .iso-controls h2 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.08em; color: rgba(56,189,248,0.9); font-weight: 600; } + .iso-ctl-toggle { display: none; } + @media (max-width: 50rem) { + .iso-ctl-toggle { + display: block; + position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; + min-height: 44px; padding: 0 12px; + background: rgba(8,12,18,0.94); color: rgba(255,232,184,0.9); + border: none; border-top: 1px solid rgba(255,232,184,0.18); + font: 600 13px/1 ui-monospace, "JetBrains Mono", monospace; + letter-spacing: 0.04em; cursor: pointer; + backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); + } + .iso-controls { + top: auto; right: 0; left: 0; bottom: 44px; z-index: 30; + width: auto; max-height: 55vh; overflow-y: auto; + border: none; border-top: 1px solid rgba(255,232,184,0.18); + display: none; + } + .iso-controls.is-open { display: block; } + } + .iso-ctl { margin-bottom: 11px; } + .iso-ctl:last-child { margin-bottom: 0; } + .iso-ctl-row { display: flex; justify-content: space-between; margin-bottom: 3px; } + .iso-ctl-row .val { color: rgba(255,232,184,0.95); } + .iso-ctl input[type="range"] { + width: 100%; height: 3px; -webkit-appearance: none; appearance: none; + background: rgba(255,232,184,0.2); outline: none; cursor: pointer; + } + .iso-ctl input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; appearance: none; width: 12px; height: 12px; + background: #38bdf8; border: 1px solid rgba(255,255,255,0.4); cursor: pointer; + } + .iso-ctl input[type="range"]::-moz-range-thumb { + width: 12px; height: 12px; background: #38bdf8; border: 1px solid rgba(255,255,255,0.4); cursor: pointer; border-radius: 0; + } + .iso-seg { display: flex; gap: 4px; } + .iso-seg button { + flex: 1; padding: 4px 0; font: inherit; font-size: 10px; + background: transparent; color: rgba(255,232,184,0.55); + border: 1px solid rgba(255,232,184,0.2); cursor: pointer; + } + .iso-seg button.active { color: rgba(255,232,184,0.98); border-color: rgba(56,189,248,0.6); background: rgba(56,189,248,0.08); } + .iso-check { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; } + .iso-check input { accent-color: #38bdf8; cursor: pointer; } + .iso-ctl select { + width: 100%; font: inherit; font-size: 11px; padding: 3px 4px; + background: #0b1018; color: rgba(255,232,184,0.9); + border: 1px solid rgba(255,232,184,0.2); cursor: pointer; + } + /* Color swatch input — same treatment as the city-lab example's mono-color + control, scoped under the .iso-ctl namespace here. */ + .iso-color { + display: block; width: 100%; height: 26px; box-sizing: border-box; + padding: 2px; border: 1px solid rgba(255,232,184,0.2); border-radius: 0; + background: rgba(3,5,10,0.76); cursor: pointer; + } + .iso-color::-webkit-color-swatch-wrapper { padding: 0; } + .iso-color::-webkit-color-swatch { border: 0; } + .iso-color::-moz-color-swatch { border: 0; } @@ -46,17 +120,57 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f

[ PARTHENON · MATRIX ]

-

The Parthenon as an octastyle Doric peripteral temple — three crepidoma steps, an 8 × 17 colonnade, entablature, cornice, triangular pediments, and a walkable interior: porch columns, cella doorways, the naos colonnade, and a golden Athena Parthenos — built from glyphcss primitives while green Matrix rain from @glyphcss/effects streams down every surface. First person: click the scene to capture the mouse, WASD to walk (the steps carry you up onto the stylobate — go through the east door), Space to jump, Esc to release.

+

The Parthenon as an octastyle Doric peripteral temple — three crepidoma steps, an 8 × 17 colonnade, entablature, cornice, triangular pediments, and a walkable interior: porch columns, cella doorways, the naos colonnade, and a golden Athena Parthenos — built from glyphcss primitives while green Matrix rain from @glyphcss/effects streams down every surface. Orbit by default — drag to orbit, scroll to zoom. Switch to FPV in the dock to walk in: click the render to capture the mouse, WASD to walk (the steps carry you up onto the stylobate — go through the east door), Space to jump, Esc to release.

+ +
+

[ CONTROLS ]

+
+
camera
+
+ + +
+
+
+
density1.00
+ +
+
+
matrix scale0.50
+ +
+
+
speed min5
+ +
+
+
speed max13
+ +
+
+
trail13
+ +
+
+
streams0.38
+ +
+
+
color mode
+
+ + +
+
+
+
mono color#00FF66
+ +
+
-
- Geometry: procedural — 46-column peristyle, 92-triglyph frieze, naos + Athena Parthenos, opisthodomos - Effect: GlyphEffects.matrixRain · monochrome #00ff66 - Controls: first person — click to look · WASD walk · Space jump - Renderer: glyphcss solid + perspective camera -
@@ -64,6 +178,7 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f