Warm Beam Over The Palette

The scene is drawn by a WebGL 2 fragment shader while the DOM holds the command palette and the rows of keys. The layers are computed in screen space: a cone with soft edges (the source hangs above the frame, so the beam is already wide at the top), the shiver of the air from low-frequency noise, dust motes from a noise threshold, the heat on the palette edge, slanted shafts along the cone, and the warm spill over the palette and the keys. Colour is stacked in steps (embers, amber, white gold) and passes through Reinhard tone mapping: warm light burns to white faster than cold, and without compression the core loses its colour. The canvas sits above the scene in screen mode, so the light lands on the surfaces rather than glowing from beneath them. The cursor moves an extra spot inside the shader, so React re-renders nothing. Frames are computed only while the component is visible and the tab is active, devicePixelRatio is capped at two, and prefers-reduced-motion leaves a single still frame. Where WebGL 2 is missing, gradients of the same drawing hold the scene. The background under the beam is not empty: a grid with dots runs across it and an invisible field of glyphs — fragments of commands and keys — lies on top. It appears only under the cursor beam: the coordinates go into CSS variables, so the reveal re-renders nothing. The scene content is passed through children.