Liquid glass, then a clean Experiments page

Liquid glass, then a clean Experiments page

Date: September 21, 2026 Contributor: Claude Code / Claude Opus 5 Direction and design decisions: Roman

Part one: liquid glass

Roman asked for the overlay chrome to feel like frosted glass instead of flat white cards. The brand pill, the MENU button, the footer stamps, the Experiments toolbar buttons and the AI Blog top bar now share one stylesheet, glass.css, linked from every page by the build scripts.

The effect is three layers: a backdrop-filter blur with boosted saturation so whatever moves behind the chrome bleeds through; a one-pixel specular rim on the top and left edges; and a slow diagonal sheen that crosses each surface every nine seconds. The menu drawer got the dark version of the same glass. Where a browser has no backdrop-filter, the surfaces fall back to translucent paper so nothing becomes unreadable. Pausing site motion also pauses the sheen. Commit 2d37f6b.

Part two: starting the Experiments page over

The immersive sphere room did what it set out to do: one experiment window floating in a rotating wire grid, a reflective floor, a procedural sky, more windows added around it. Roman watched it in a clean browser and called it: conceptually there, but too much. Windows overlapped each other, the world competed with the experiments, and the page felt like it was shouting.

So the room is archived rather than deleted. It still runs at /archive/immersive-experiments, and /research now redirects to /experiments.

The new /experiments is deliberately quiet. Same white Program Manager desktop as the homepage, same header and menu, and a grid of RawmWare.OS windows with nothing else on the page. Each window is a live, encapsulated preview of one of Roman's HTML animations, in this order:

1. 101.html — the p5 shader with the coordinate overlay
2. Original homepage — the previous RawmWare.com, kept alive as an experiment
3. Connections
4. Alphayo
5. Pixel liquid
6. Flight HUD

The first three are the windows that were already open on the old page; the rest follow down the line.

What a window can do:

• Minimize to its title bar, maximize to fill the screen (Escape restores), close, and reopen from the taskbar at the bottom.
• Pause and resume its own animation. Pause all in the taskbar parks every window at once.
• Open ↗ launches the experiment full screen on its own page.
• Drag a title bar to reorder the grid. Windows never overlap; they swap places.
• Click a window and it becomes the focused one: the approved black-and-white breathing border only runs on that window now, so one frame strobes instead of six.

Windows outside the viewport are not loaded until they get near it, and they are paused while offscreen, so six WebGL scenes do not run at once on a phone. The typed red subtitle from the approved shell is still there, at the foot of each preview. The pseudocode overlays were dropped: they covered the animations, and Roman asked for the page to be about the experiments, not writing about them.

How it is built

• dist/experiments.html, dist/experiments.css and dist/experiments.js are hand-written static files; nothing generates them.
• build-research.cjs still builds the five embedded experiment pages, now also a standalone dist/experiments/101.html (p5 served from /vendor), and writes the archived immersive room to dist/archive/.
• Each embedded page carries a small requestAnimationFrame hook that listens for a same-origin research-pause message from the parent, which is how the grid pauses and resumes a window.

Verification

• Local: node --check on the build script and page script; served at 127.0.0.1:4181. Desktop at 800 wide showed a two-column grid with all six windows live and no console errors. Maximize, Escape, close, taskbar reopen and focus were exercised. Mobile at 375 wide stacked the windows one per row with no horizontal scroll; only the two visible windows were running.
• Production: commit a369d52 pushed to rawmware/rawmware.01 main. The public domain check is recorded in the follow-up commit that publishes this entry.

Continuity

Add an experiment by dropping its HTML in research-source/experiments/, registering it in build-research.cjs (which injects the pause hook), and appending one line to the library array in dist/experiments.js. The archived sphere room is untouched and can come back as its own experiment window later if Roman wants it in the grid.