Video.js skin

Frost Line

No video loaded

/

Captions are on. Keys: Space plays and pauses, M mutes, C toggles captions, F goes fullscreen, arrows seek and set volume.

Notes

Idea
The interface condenses to one line and blooms from it. At rest the chrome is a single frosted hairline floating low over the picture: the lit seek line inside the glass, a small play glyph and the time. Bring the pointer, a finger or the keyboard to it and the line thickens in place, the play glyph grows, and volume, captions and fullscreen rise out of its right end in a frosted tray. Let go and it settles back to a hairline, quieter on the way out than on the way in.
Accessibility
The seek is never hidden: the hairline keeps the played and unplayed line, play and the tabular time on screen even while the video plays. Keyboard focus anywhere in the bar blooms it, so every control is reachable by Tab, along the line and then across the tray, and touch blooms it with a tap. The glass carries a slate tint so the white glyphs and time stay readable over bright frames as well as dark ones. Every button is 44px or larger, even at rest, focus is a white ring outside a dark gap, captions off dims the CC glyph, reduced motion swaps the two states instantly, and reduced transparency, more contrast and forced colors make the glass solid.
Craft
Every control is Gemini's own art cut from one sheet: the fine white glyphs, the CC frame, the lit line split at its baked handle into a white run and a steel blue run, the lone white handle, and the milky disc for the center play, frosted by a blur of the picture behind it. One registered CSS number runs from hairline to bloom and drives every size at once, so the morph is a single interruptible transition: reverse mid-bloom and it turns back from where it is, 260ms in and 160ms out. Both handles stay inside their lines at both ends.