openalicelabs-web

Specimen portrait as a LIVING ASCII field (v2 — awwwards

ARCHITECTURE acronym life (02 cursor pass) — the giant O.P.E.N. / A.L.I.C.E. letters get a per-letter MAGNETIC response: within ~120px each char translates ≤8px toward the cursor with a slight skew lean and springs back underdamped (transform-only on the existing .kr-c spans; the finished kr-rise entrance is cleared per-letter before the magnet takes transform ownership, and the magnet stays cold until the block's reveal has settled). Plus the backronym hover wire: the five expansion words (.bw[data-l]) light their corresponding giant letter with a sakura flash on hover. Mouse-only, idle-init, no layout writes; reduced motion = never inits.

★ ALICE glitches through (v3 kinetic pass) — every 8-12s (random interval, armed only while the portrait intersects the viewport) the silhouette behind SUBJECT 00's REDACTED bar flashes through for ONE ~80ms frame - opacity jumps 0.16→~0.55, the blur sharpens, and a per-flash random translate/skew jitter (CSS vars) shifts the figure while the redaction bar recoils 1px the other way. Politely uncanny, never strobing (single frame, ≥8s apart). Disabled under reduced motion - the v2 static silhouette remains.

Kinetic char reveal — the FRONTIER LAB motion language for display type. Server-rendered (canon text stays byte-identical in the DOM - real chars in spans, spaces as text nodes, aria-label carries the clean string); each char slides up + unblurs with a ~20ms stagger via pure CSS (.kr-c), so it runs without JS and settles instantly under reduced motion. Inside an armed block (.arm, set by Reveal) chars hold at frame 0 until the block scrolls in. NOT a typewriter.

Registry counter tick (04 papers polish) — a digit in the section-head aux counter ticks up 0→N once when the section head first enters the viewport (IO-armed, ~140ms/step). SSR renders the FINAL value (no-JS and crawlers always read the truth; tnum keeps the line from shifting); reduced motion or no IO = the settled number, no tick.

★ The Crossing — the signature looking-glass interaction between the two sites, v3 "2030" pass. HOVER = glass ripple - the dark sakura world spreads through the glass as a liquid clip-path circle distorted by an SMIL-animated SVG turbulence/displacement filter (#crossing-ripple in the layout, applied only while hovered). CLICK = ink dissolve - white flash then three expanding ink layers (two grain-masked porous splats + a solid final pour, ~700ms turbulent-edge mask) eat the page before navigating cross-origin to openalice.blal.pro (View Transitions cannot carry cross-origin; honest in-page emulation). Mounted on Lily's transfer order, the terminal `white rabbit` response, and the footer bridge. Reduced motion = v2 plain fade on hover + instant navigation on click.

Chain-of-custody footer — the verbatim rails line ("Handled by Agents 01–03 · Specimens are synthetic. Documents are exhibits.") plus the sober commercial bridge to openalice.blal.pro (mounted as a Crossing), the legal floor (Impressum + AI disclosure on the products site — legal content is not duplicated here), and the quiet terminal invite ("> A.L.I.C.E. awaits queries"). Mounted per-page (papers/terminal/file-pending/404); on the narrative home it docks INSIDE section 05 · THE CHANNEL (#custody), which made the footer a real reachable section instead of a 120px sliver the SectionRail could never activate.

★ InkEmergence (v3 kinetic pass; v4 re-skin; garden v5 VISITOR WARMTH; garden v6 full-bleed) — LILY's botanical plate decrypts via the hand-rolled WebGL1 glyph-atlas shader adapted from openalice-landing's AsciiEmergence - the inline SVG plate is serialized + rasterized (5-tap dilate, 540×720) into the source texture, glyph density maps from ink coverage so cipher glyphs print along the botanical strokes, and the settle-front sweeps bloom-out over ~2s when the plate first scrolls into view (time-driven, IO-armed). It never fully resolves - progress idles 0.86-0.95 so a mutating sakura cipher fringe lives at the plate edges forever, plus ±2% CSS scale breathing; idle repaints ~9fps; cursor heat densifies glyphs near the pointer. v5: SHE WARMS TOWARD THE VISITOR (the opposite of ALICE's flight) - settled steel glyphs lerp to sakura near the cursor and the glyph field pulls ≤6px toward the pointer, JS-smoothed envelope, idle throttle bypassed while warm; touch tap = one decaying warmth ripple. v6: warm bloom radius +50% (240px), denser glyph grid (5px cells, caps 144×240), and a live mono instrument readout rides the cursor over the plate - coordinates + "RESPONSE: +0.NN" driven by the REAL rendered warmth at her center (uWarm×prox). DPR≤1.5, idle-init after load, context-loss safe. Reduced motion / no WebGL / failed rasterization = the untouched static SVG plate.

Root layout of the FRONTIER LAB (concept v4) — void-dark monumental world (#050507; the warmth IS the products site). Self-hosted JetBrains Mono + Hanken Grotesk 900 via next/font, noindex pre-launch, breathing grain overlay, the Crossing ripple filter, and the html.js reveal gate (no-JS = everything visible). The chain-of-custody footer is mounted per-page (home docks it inside section 05 · THE CHANNEL).

Magnetic CTA hover — the wrapped element translates toward the cursor, hard-capped at ±6px, springing back on leave (fast linear tracking while engaged, soft cubic-bezier release via .magnet CSS). Pointer-only, no-op under reduced motion. Reserved for THE one CTA per screen (the Garden transfer order).

The live instrument strip under each ARCHITECTURE acronym — a thin Mandelbrot cross-section (escape-time profile along Im(c), reusing lib/mandel + the lib/fig window) animating as a slow Im scan on a 2D canvas. Light-steel trace (contrast-calibrated for 1440px) + area fill + bright sample cursor + live "Im(c)=…" readout + a sakura tick marking the boundary spike (first crossing into the set interior, tallest spike fallback). CURSOR-SCRUBBED: pointer X over the band takes the instrument by hand — it drives the Im(c) scan position (full ±amp sweep across the band width) AND the sample cursor, readout values following live; on pointer leave the band lerps back to the auto-scan (smoothed hover envelope, mouse-only). ~24fps, IO-paused offscreen, DPR≤1.5, idle-init; reduced motion = one static frame at the base Im, no scrub.

★ The hero of the FRONTIER LAB — a full-viewport continuous Mandelbrot deep-zoom rendered as ASCII glyphs (hand-rolled WebGL1, zero deps). Two passes - escape-time field computed into a one-texel-per-glyph-cell FBO (perpetual dive toward seahorse valley, ×22000 per 64s cycle, in-shader dual-sample crossfade makes every re-anchor a seamless dissolve), then a density-sorted JetBrains Mono atlas maps cells to glyphs. Monochrome steel; the highest-iteration filaments alone ignite sakura. Live RE/IM/SPAN/DEPTH readout at 4Hz. Rails - idle-init, DPR≤1.5, 30fps cap, paused offscreen/hidden, low-power, context-loss safe; reduced motion = one static high-iteration frame; no WebGL = CSS void gradient.

★ ParticleSilhouette (garden v5; v6 SHE LEAKS INTO THE ROOM) — SUBJECT 00's portrait is ~1600 drifting ASCII glyph particles (canvas 2D sprite-atlas blits; home positions sampled from the silhouette SVG rasterized to a density map). She is IN TESTING and behaves like it - assembly oscillates 60-80% on a 20s period (never settles), CURSOR PROXIMITY MAKES HER FLEE (radial repulsion, 140px radius, underdamped spring return - the exact opposite of LILY's warmth), and while AliceGlitch's 80ms .is-glitch frame holds, the particles snap to 100% coherence: one full frame of her. v6: a sparse OUTER HALO of ~72 very dim strays drifts past the frame into the dossier row background (own z:-1 canvas under the row, same flee instinct, pure wanderers) - plus a live mono instrument readout rides the cursor over her window: coordinates + "COHERENCE: NN%" from the REAL oscillation value. All-steel palette by the ≤1-sakura-leak-per-screen law (LILY's fringe is the screen's leak). Touch = one expanding repulsion ripple per tap. Polish wave: SCROLL AGITATION - fast scroll velocity while she's on screen adds a temporary random jolt (cloud + halo) decaying ~1s inside the existing rAF; she startles at sudden movement. Budget: ≤2600 total (≤2000 cloud area-scaled + ≤80 halo), 30fps cap, DPR≤1.5, idle-init, IO-paused offscreen. Reduced motion = one static 100%-assembled frame (halo frozen at homes, no readout). Failed raster/2D = the dim static SVG remains.

The PUBLISH GATE (hard rail from the handoff) — the full site is always BUILT, but what is SERVED is controlled by env LAB_SITE_MODE read PER REQUEST (no rebuild to flip). Default/unset = teaser - every route is rewritten to the single FILE PENDING document. LAB_SITE_MODE=full serves everything. NAO flips it at the LIVE launch.

Redaction bars for the FRONTIER LAB — steel blocks on dark (inline or full-line). `leak` marks THE one bar per screen the Garden shines through - a periodic sakura shimmer sweep (motion-gated) and a warm glow on hover. No text is ever hidden under them; they are exhibits.

Scroll-driven section reveal — IntersectionObserver arms each block once (adds .in; CSS plays the rise/stagger; html.js gate means no-JS renders everything settled). Used as .rv (single block), .rv-kids (staggered children), and .arm (holds CharReveal chars at frame 0 until entry). Reduced motion is neutralized in CSS, not here.

Fixed mono progress rail on the narrative home (01—05, ≥1080px) — the section crossing the viewport middle gets the sakura tick (IO with a -45% band). Anchors jump to each section; the fifth is the chain-of-custody footer. The FIRST time tick 05 activates it hands the terminal CTA one pulse (.channel-cta-pulse, one-shot, motion-gated in CSS).

A.L.I.C.E. // VISITOR SESSION — the CRT terminal. v3 immersion pass - a 6-line BOOT SEQUENCE types in fast on entry (~7ms/char, per-char phosphor glow via .crt-hot), the input renders a true BLOCK CURSOR that tracks selectionStart in ch units (native caret hidden; mono font makes the math exact), and canned responses print with the same glowing head. Canned responses verbatim from the handoff (alice / lily / help / refusal); `white rabbit` runs the Crossing. SSR + reduced motion render the fully-booted static terminal (v2 fallback); log is aria-live, input self-focuses after boot, clicking the glass refocuses.

3D paper-object tilt (04 papers pass) — the wrapped card tilts toward the cursor, hard-capped at ±4deg on both axes with an 900px perspective (fast linear tracking while engaged, springy cubic-bezier release with a slight overshoot via .tilt CSS). Transform-only, pointer-only, no-op under reduced motion. Used on the OA-001 / OA-002 paper cards.

Fixed minimal chrome of the FRONTIER LAB — the wordmark (with its one sakura dot) and the two quiet routes (PAPERS / TERMINAL). Mounted per-page, NOT in the layout, so the FILE PENDING teaser sheet never announces the sitemap pre-launch.

OA-001 hover excerpt (04 papers pass) — a short verbatim excerpt from the paper types itself at 15ms/char the FIRST time the visitor hovers the card, then stays (a steel block caret rides the head while typing). SSR renders the full text (no-JS keeps it; assistive tech always gets the clean sr-only string); the client empties it post-hydration and arms one pointerenter. Reduced motion = the full settled text, no typing.

The teaser sheet — pre-launch, the publish gate (src/proxy.ts, SACRED) rewrites EVERY route here. Concept v4 restyle: void-dark, minimal, ONE glowing line ("FILE PENDING") over a blinking block caret and the clearance sub-line. No nav chrome (the sitemap stays unannounced until the LIVE launch); the layout footer keeps the legal rails present.

"/" THE NARRATIVE — the FRONTIER LAB single-page story. 01 HERO - full-viewport ASCII Mandelbrot deep-zoom (MandelDive) under the monumental "OPENALICE LABORATORIES", the canon motto and mission line (verbatim), kinetic char reveal on load, scroll indicator, live coordinates. 02 ARCHITECTURE - cursor-scrubbed MandelBand instruments (light-steel trace + sakura boundary tick), the backronym expansion re-weighted as the 20px mono pull-line, the stack connector between the blocks (1px steel rail, packets rising phosphor→steel, "raw output → governed behavior"), per-letter magnetic acronyms (AcroMagnet) and the backronym-word→letter sakura wire. 03 THE GARDEN - the REGISTER NOTE slip, full-bleed dossier rows (≥70vh, portrait ≥55%; mobile stack tightened, portraits ≥48vh), ALICE's stray-halo leak + live COHERENCE readout + scroll-velocity agitation, the deep-set REDACTED bar with the "DO NOT LIFT — CURATOR" strip, LILY's widened warmth + RESPONSE readout over her faint breathing sakura bloom, living status tags, parallax numerals. 04 PAPERS - tilting paper objects (TiltCard) with fig watermarks + hover lift, OA-001 underline-draw + typed excerpt, the OA-002 sakura leak + FULL TEXT PENDING chip, the OA-003 redacted tease, the registry counter ticking up on entry (CountTick), rhythm ~25% tighter. 05 THE CHANNEL - the full-viewport closing room ("THE GARDEN IS LISTENING." over the CRT GARDEN STATUS marquee + the magnetic terminal CTA, one stray glyph arcing across every ~14s, the CTA pulsing once when tick 05 lands) with the custody footer docked at its floor. The fixed mono rail tracks 01—05 with the sakura tick.

404 — "SUBJECT NOT FOUND", monumental on the void. Verbatim copy ("The file you requested does not exist, or you lack clearance. Follow the white rabbit home →" linking home); the layout footer carries the commercial bridge.

"/papers" — dark modern paper sheets. PAPER OA-001 System Architecture in full (the canon O.P.E.N./A.L.I.C.E. block verbatim + the three sober paragraphs on isolation / auditability & determinism / integration reused from the previous build, ending "Further sections pending clearance." + redaction bars) and PAPER OA-002 On the Cultivation of Talking Flowers (verbatim teaser abstract + heavy redactions, ONE of which is this screen's sakura leak).

"/subjects" — the Garden register lives ON the narrative home now (concept v4); this route is a permanent escort to /#garden so old links and muscle memory keep working.

"/terminal" — the A.L.I.C.E. CRT immersion, kept verbatim from v3 (boot sequence, block cursor, canned responses; `white rabbit` runs the Crossing). Concept v4 re-frames only the page chrome: void-dark room, mono coordinates line, the glass dominates the viewport. Phosphor red stays INSIDE the glass.