spine menu

A side navigation for a website, living in a dark frosted-glass spine on the window's left edge over a slow, silky gradient page in ember tones. Closed, a small Menu tab bulges out of the spine and swells under the pointer. Click it and the tab first runs up and down the spine, then spills sideways into a glass panel that meets the spine with soft concave joints; the page shows through the glass, frosted and refracted at its edges, with a thin light rim, and the caption, five items and a footer address rise in one by one from blur. The active item is a window cut into the glass where the page glows through brighter, flowing from item to item with the pointer. Choosing an item floods the whole page with a second palette, night blue to ice, spreading as a soft wave from that item while the menu folds back into its tab; the glass picks up the new colour by itself, and the page eases back to ember. It plays as an 8-second seamless demo with its own pointer. The page, spine, panel and window are one WebGL2 fragment shader (signed-distance glass over an fbm-noise page) and the text is ordinary DOM over it, laid out in units of the window's height so the menu fills any window from phones to ultrawide. Change the items, the two palettes, the glass and the timing in a few lines. Every frame is a pure function of time, with window.__render(t) and a ?rec mode for frame-exact video export; reduced motion shows one still of the open menu. The fonts are local, so it runs offline.