Sewn Felt

Notes

Idea

Wool felt for a bedtime story channel: blanket-stitched felt rounds sit along the bottom of the picture as the buttons, with a felt strip for the seek, sage for what you have watched, and a brown sewing button as the playhead. Tab through it and a stitched outline sews itself around each control you land on.

Accessibility

The focus ring is the signature, so it had to be the clearest thing on screen: a dark strip with cream stitches, 7px wide and outside the control, so it shows on the felt and on footage alike, and with reduced motion, or in a browser without the animation, it is simply there whole; a plain dark scrim under the row keeps the cream time above 5:1 even over a pure white frame.

Craft

The ring sews itself with a conic mask sweeping a registered angle property from the top, clockwise, in 520ms, so it is pure CSS, works on every control and slider alike, and never repeats; the seek strip is two felt ends plus a tile of whole stitch periods repeated to fit, so its running stitch never smears at any width.