Stained Glass

Notes

Idea

Stained glass for a coastal travel film: the controls sit in a leaded sill of jewel-toned panes along the bottom of the picture, the seek is ruby glass running into opal, and the center play is a small amber rose window. Move the pointer along the sill and each pane catches the light as you cross it, then slowly lets it go.

Accessibility

Only the decorative panes let the picture glow through; every pane that holds a glyph or the time is solid deep cobalt, so white text stays above 4.5:1 over any frame, each glass glyph carries its own lead outline, and the ruby, opal and smoky unplayed glass sit inside a dark lead channel so each tone reads against it.

Craft

The glass is a kit, not a picture: an inline SVG of panes colored by CSS variables whose lead keeps a fixed 3px at any width, plus one tileable mottle texture; the light comes up in 60ms and fades over 1100ms so a sweep leaves a glow, and with reduced motion it changes in under 100ms with no sheen.