VAM Seek: A Client-Side 2D Grid for Video Navigation

The standard video seek bar is a study in compromise. It gives you a timeline, but no context. You scrub blindly, hoping to land on the right moment. VAM Seek, a new open-source library from developer unhaya, proposes a different interface: a 2D grid of thumbnails that represents the entire video visually, allowing you to see every scene at once before choosing where to go.

The Problem with 1D Scrubbing

VAM Seek is built on a simple observation about modern viewing habits. While 80-90% of video watching is passive—just sitting through a movie or lecture—the remaining 10-20% is active. We search for a specific line of dialogue, jump back to re-check a detail, or skip past content we’ve already seen. The 1D seek bar, optimized for passive viewing, is clumsy for this kind of exploration.

The library’s core thesis is that this active exploration requires a different UI paradigm. Instead of a single line, it offers a grid. If you configure it with 5 columns and 15 seconds per cell, a 15-minute video becomes a 5x20 grid. Each cell is a thumbnail representing that 15-second slice. You can see the bright action sequence, the dark dialogue scene, or the static talking head from a distance.

Client-Side Architecture: Privacy and Cost

Most thumbnail systems work by uploading a video to a server, processing it with FFmpeg, storing the resulting images, and serving them via a CDN. This introduces server costs, processing delays, and privacy concerns.

VAM Seek completely inverts this model. It does everything in the user's browser.

1. Hidden Video Element: The library creates a hidden <video> element and loads the source.
2. Canvas Extraction: It programmatically seeks to a specific timestamp (e.g., 15.0 seconds). When the seeked event fires, it draws the current video frame onto an HTML5 Canvas.
3. Data URL Caching: The canvas content is converted to a base64 Data URL and stored in memory.
4. LRU Cache: To prevent memory bloat, it uses a Least Recently Used (LRU) cache that holds a maximum of 200 frames. As you scroll or hover, new frames are generated and old ones are discarded.

This approach means the video file never leaves the user's browser. There is no server load, no bandwidth cost for thumbnails, and no privacy risk. The trade-off is initial CPU usage on the client to generate frames, but the library uses requestAnimationFrame to keep the marker animation smooth at 60fps during this process.

The VAM Algorithm: X-Continuous Navigation

The library includes a specific algorithm for calculating timestamps based on mouse position, which it calls the "VAM algorithm." It handles the math for converting a 2D grid coordinate into a 1D timestamp.

The key feature is "X-continuous" movement. When you move your mouse horizontally across the grid, the calculation blends the columns. Instead of snapping from the end of one column to the start of the next, the timestamp moves continuously. This makes the navigation feel fluid and precise, rather than blocky.