From 97ed882432d8ecf15c58779d976a5cef68510850 Mon Sep 17 00:00:00 2001 From: testtest126 <44771568+testtest126@users.noreply.github.com> Date: Sun, 19 Jul 2026 16:21:04 +0200 Subject: [PATCH] Prototype: rose-window eye, side by side with the current aperture A second, original eye variant on the landing page -- NOT a replacement. The shipped almond/eyelid eye stays exactly as-is at 32% from the left; a new rose-window eye sits at 68%, on the right, so the owner can compare them scrolling side by side and keep or toss. The insight from the brief: a gothic rose window IS an eye -- radial glowing petals standing in for an iris, a dark center for the pupil. Built entirely by hand as inline SVG/CSS (12 petal s rotated in 30-degree increments around a center pupil circle, two radialGradient defs for the pane glow and the candle pinpoints, a feGaussianBlur for the candles) -- no traced or copied artwork. Zero JavaScript changes. Both eyes read the exact same --scroll-lid custom property the existing throttled-rAF scroll listener already computes; only the CSS consuming that one shared value differs: .scroll-eye .eye { clip-path: inset(calc(50% - var(--lid)) 0); } (existing) .rose-eye svg { clip-path: circle(var(--scroll-lid) at 50% 50%); } (new) An inset-band "eyelid" reveal for the almond shape; a dilating circle for the rose window -- a literal aperture-opening reading that suits a round window better. Reduced-motion handling, the calm 25% default, and the fallback-if-JS-fails guarantee are unchanged and automatically apply to both, since neither is new JS, just a second reader of one already-robust value. Palette is intentionally separate from the existing cold cyan/sepia one -- new --amber/--amber-deep/--amber-pale/--stone variables, warm and restrained, fading into near-black at the rim per the brief. A small on-page prototype note (in the phase-descent intro) and two tiny comparison labels ("current" / "rose window (prototype)") make the A/B comparison legible in the page itself, not just in screenshots -- clearly marked as prototype-only, meant to be deleted along with whichever variant loses. Verified: headless Chrome + Playwright. Desktop (1280px) and mobile (390px, where the two eyes stack vertically instead of side by side) screenshots at 5 and 3 scroll positions respectively confirm both apertures open in lockstep from closed (2%) to fully open (42%). Reduced-motion emulation confirms --scroll-lid holds at a fixed 25% regardless of scroll position, for both eyes simultaneously. Zero console errors, zero failed requests throughout. Co-Authored-By: Claude Sonnet 5 --- docs/index.html | 146 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 144 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index e0f3e8d..a29f4ca 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,6 +22,15 @@ --faint: #454b55; --red: #a8433f; + /* Prototype-only warm palette for the rose-window eye variant (see + .rose-eye below) — kept separate from the cold palette above on + purpose, so the two apertures read as genuinely different registers + side by side, not the same design in a different hue. */ + --amber: #d9a44c; + --amber-deep: #9c6a24; + --amber-pale: #f3d9a8; + --stone: #5b5348; + --hair: rgba(217, 210, 196, .08); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; @@ -136,17 +145,81 @@ section's own background/text still paints over it normally, so it reads most clearly wherever a section has no opaque background of its own — which is exactly the phase-descent section this is built for. */ + /* PROTOTYPE COMPARISON — the eye is offset to the left half of the + viewport (32%) instead of dead-center (50%) so the new .rose-eye + variant below can sit at 68% without overlapping it. This offset is + the only change made to .scroll-eye itself for this comparison; its + mechanic, palette, and behavior are otherwise completely untouched. */ .scroll-eye { position: fixed; - top: 50%; left: 50%; + top: 50%; left: 32%; transform: translate(-50%, -50%); z-index: -1; - width: min(46vw, 26rem); + width: min(40vw, 22rem); opacity: .14; pointer-events: none; } .scroll-eye .eye { --lid: var(--scroll-lid); width: 100%; } + /* ---------- rose-window eye (prototype variant, side by side with + .scroll-eye above — NOT a replacement) ---------- + Same mechanic, same shared --scroll-lid value, same reduced-motion + handling (all inherited for free — nothing about the scroll listener + or the reduced-motion branch changes for this variant). Only the + *shape* the clip-path reveals is different: instead of an eyelid-style + horizontal inset band, --scroll-lid is read as a `circle()` radius — + the aperture dilates outward from the center, which reads more like a + literal iris/pupil opening for a circular rose window than a band-clip + eyelid would. The 2%..42% range --scroll-lid already produces (see the + script at the end of body) works unchanged for either interpretation. */ + .rose-eye { + position: fixed; + top: 50%; left: 68%; + transform: translate(-50%, -50%); + z-index: -1; + width: min(40vw, 22rem); + aspect-ratio: 1; + opacity: .2; + pointer-events: none; + } + .rose-eye svg { + display: block; + width: 100%; + height: 100%; + clip-path: circle(var(--scroll-lid) at 50% 50%); + } + .rose-window-ring { fill: none; stroke: var(--stone); stroke-width: 1.4; opacity: .5; } + .rose-window-ring-outer { fill: none; stroke: var(--stone); stroke-width: .8; opacity: .25; } + .rose-window-petals { fill: url(#roseGlow); opacity: .85; } + .rose-window-pupil { fill: var(--ink); } + .rose-window-pupil-rim { fill: none; stroke: var(--amber); stroke-width: .6; opacity: .55; } + + .eye-compare-label { + position: fixed; + top: calc(50% + 15vw); + font-family: var(--mono); + font-size: .6rem; + letter-spacing: .12em; + text-transform: uppercase; + color: var(--faint); + z-index: -1; + pointer-events: none; + transform: translateX(-50%); + } + .eye-compare-label--cold { left: 32%; } + .eye-compare-label--rose { left: 68%; } + + @media (max-width: 40rem) { + .scroll-eye, .rose-eye { + left: 50%; + width: min(58vw, 18rem); + } + .scroll-eye { top: 40%; } + .rose-eye { top: 63%; } + .eye-compare-label--cold { left: 50%; top: calc(40% + 12vw); } + .eye-compare-label--rose { left: 50%; top: calc(63% + 10vw); } + } + /* ---------- ink-blot divider (original, generated — not copied) ---------- A hand-authored, roughly bilateral closed path, softened with a blur filter so it reads as ink rather than crisp vector. Faint on purpose — @@ -333,6 +406,15 @@ /* ---------- phase descent ---------- */ .descent-intro { margin-bottom: 3rem; } + .prototype-note { + margin-top: 1.5rem; + padding: 1rem 1.2rem; + border: 1px dashed var(--amber-deep); + border-radius: 6px; + font-size: .82rem; + color: var(--dim); + } + .prototype-note strong { color: var(--amber); } .phase { display: grid; @@ -521,9 +603,62 @@ + + + + + +
@@ -592,6 +727,13 @@

One phase machine, five states

real, shipped lines a player actually meets, phase by phase — keep scrolling, and watch the eye behind the page open with you.

+
+ Prototype note: two eyes are running behind this + page right now, both driven by the same scroll — current + (cold, almond-shaped, left) and rose window (warm, + circular, right). Same mechanic, same scroll value, different + shape. This note and the comparison labels are prototype-only. +