Focal Plane

Notes

Idea

Controls come into focus as you reach for them. One row of glyphs sits under a full-width seek line with no bar, and every glyph follows a single number, its distance from your hand: at rest it is small, dim and slightly soft, and as the pointer comes within reach it sharpens, brightens and grows, the nearest one ringed in pale cyan with its name under it. Keyboard focus is the same focal plane. Drag along the seek and move below it to slow the scrub continuously, half as fast 60 pixels down and a quarter at 120, with a ruler of fine ticks showing the scale.

Accessibility

Information never blurs: the time and the seek stay sharp at every distance, and the row never hides: every glyph stays on screen at 55% or more at rest, and the captions chip dims a little further while captions are off. Keyboard focus sharpens and rings the focused control exactly as the pointer does, and on wider players its label shows the control's current name. Shift with the arrow keys steps one second. Button targets are 48px (44px on phones), a local shade sits behind the row and the line, reduced motion swaps the field for two plain states, reduced transparency makes the shades solid, more contrast deepens them and brightens the rest state, and forced colors put the row and the lines on solid system-color plates.

Craft

Every control is ChatGPT's art cut from one sheet at its native size and drawn sharp; the softness is applied live by CSS from one number per control. Approaches take effect at once and departures settle over about a quarter second, so the motion can reverse at any point. The precision ruler is the sheet's own ticks, each a window onto the same strip, spaced so a tick passes under the hand at a steady rate.