Contact Sheet

Notes

Idea

For a photography school's video lessons: every button is a 35mm film frame whose sprocket holes let the picture show through, the seek is a strip of the same film, the time is a crisp grotesk, and the seek preview works like a photographer's contact sheet, showing five frames around the pointer with the one under it circled in grease-pencil red.

Accessibility

The contact strip is decoration over a stock Video.js slider, so arrow keys, Home, End and screen readers work as usual; a plain dark scrim under the row keeps the time above 4.5:1 even over a pure white frame, and captions on adds a white bar under the CC frame while off dims it.

Craft

Instead of one image stretched along the bar, the seek tiles whole sprocket periods between two end pieces, so the holes stay evenly spaced and whole at any width; the contact strip's 8px corners hold 4px frames on a 4px pad, and the strip grows up from the pointer, slides with it, and leaves faster than it arrives.