`<tosi-filmstrip>`

Canvas frame-animator. Rather than scrubbing a <video> (which stutters on random-access seeks), <tosi-filmstrip> blits frames from a single WebP/JPG mosaic grid to a hardware-accelerated canvas — instant, frame-perfect seeking driven by scroll.

100 frames from one image

Attributes

src — the mosaic image. Filenames may encode the grid — name_COLSxROWS_TOTAL.webp is auto-parsed.
cols, rows, total — grid columns, rows and frame count (optional when encoded in the filename).
data-scroll-animate — marks it as a scroll-driven animator for its section.

Making a mosaic

The tosi-mosaic CLI (needs ffmpeg) converts a video to a grid:

bunx tosi-mosaic my-video.mp4 --frames 100 --width 1280

Produces my-video_10x10_100.webp. A grid (not one long strip) keeps within the browser's max image size while delivering every frame in a single request.

Editable example

<tosi-product>
  <tosi-product-section scroll="150">
    <tosi-filmstrip src="/agent-owl_10x10_100.jpg" cols="10" rows="10" total="100" data-scroll-animate></tosi-filmstrip>
  </tosi-product-section>
</tosi-product>