Stop scrubbing blind.
Loupe turns any video into a contact sheet you can read at a glance, click into, and drag across.
The Idea
Every serious video player already generates a contact sheet. It is what powers the little thumbnail that appears when you hover a seek bar. Every player makes it, shows you one tile at a time, and throws the rest away.
Loupe shows all of it.
The whole video as a sheet of frames you can read at a glance, search through by eye, and click into.
It is built for video people scan rather than watch: archive footage, lectures, interviews, anything long enough that scrubbing blind is miserable.
What It Does
The whole video, on one sheet.
Click any frame to jump there. Drag across them to scrub.
Takes the shape of what it plays.
Cinematic, square or vertical. The layout follows the source, so nothing is ever letterboxed into a box that does not fit.
Dressed by the page it sits on.
Type is inherited. Light or dark is read from the background behind it. The glass frame picks up whatever is there.
Give it a video. That is the setup.
The sheet is built from the asset’s own storyboard. Nothing to generate, nothing to configure, no thumbnails to manage.
Every control works without a mouse.
Full keyboard operation with visible focus. The sheet is one tab stop with arrow keys inside it.
Who It's For
- COURSES
- A student hunting for the one explanation they half remember, forty minutes in.
- DOCUMENTATION
- Someone who wants the billing section, not your twelve minute product walkthrough.
- PROPERTY
- A buyer who wants to see the kitchen before they watch the driveway.
- ARCHIVES
- Conference talks and interviews, where the useful part is rarely the beginning.
The pattern is the same everywhere. The video is long, and the viewer wants a part of it, not the whole of it.
In Context
The skin reads the page it sits on. Type is inherited, light or dark is chosen from the background behind it, and the glass frame picks up whatever is behind the player.
01 / DARK
02 / LIGHT
03 / PHOTO
How It Works
- FRAMES
- Built from the asset’s own storyboard. No extraction, no per-video setup.
- LAYOUT
- Adapts to the source aspect ratio, capped at 70vh.
- THEME
- Light or dark chosen from the parent background. Type inherited from the page.
- CAPTIONS
- Styled by the skin, not left to the browser. Set above the controls so chrome never covers them.
- FRAME
- Glass with an SVG displacement filter, falling back to blur where that is unsupported.
- ICONS
- Drawn for the skin. One geometric system, square joins, no icon library.
- ACCESS
- The sheet is a single tab stop with arrow-key navigation. 44px touch targets, reduced motion, forced colors and RTL all handled. Control text measures 16.7:1 in dark and 11.8:1 in light over the current demo footage.
- STACK
- React, TypeScript, Tailwind, Video.js v10.
- EXPORT
- The sheet saves as a one page PDF, with every frame linked back to its moment in the video.
Keyboard
- SPACE
- Play / pause
- ← →
- Seek 5s
- ↑ ↓
- Volume
- M
- Mute
- F
- Fullscreen
- C
- Captions
- S
- Contact sheet
- Arrows
- Move between frames
- Enter
- Seek to frame
- Esc
- Close
Every control is reachable by keyboard with visible focus. The sheet is a single tab stop with arrow-key navigation inside it. Motion respects prefers-reduced-motion.