flow tab bar

A WebGL tab bar on a near-black page with a faint drifting haze. Five tabs, Home, Search, Insights, Activity and Profile, sit in a bar of dark frosted glass with a thin light rim and a faint rainbow sheen, the background showing through, blurred and bent at its edges. The active tab is a round bead of the same glass bulging up out of the bar's top edge: its icon rides up inside it and turns white, its label fades in from a blur where the icon sat, and a light in the tab's own colour glows inside the glass (violet, cyan, amber, pink, mint) and tints the page around it. Switch tabs and the bead sinks back into the bar, travels under the glass as a low stretched wave and resurfaces at the new tab with a tiny bounce; the icons it passes lift, the new icon's strokes erase and redraw, a thin ring ripples out and one soft light sweep crosses the bar after it lands. It plays an 8-second seamless demo of short and long jumps, and the first click on a tab hands the bar over to you; the tabs are real, keyboard-focusable buttons. The glass, the bead and the lights are one fragment shader (a signed-distance shape with a refracted procedural background); the icons are inline SVG and the labels HTML text over it. Change the tab names, icons, colours and timing in a few lines. Every demo 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. The font is local, so it runs offline.