`<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 converts a video to a grid. It needs ffmpeg and ffprobe on your PATH (macOS: brew install ffmpeg) — they are not bundled:

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.

--format jpg (or png) if your ffmpeg was built without the webp encoder — <tosi-filmstrip> reads all three. --fps supplies the source frame rate for a container that misreports it; when a file reports neither a frame count nor a duration, the CLI counts frames itself and says so. It exits non-zero on failure, so tosi-mosaic … && deploy is safe.

Editable example

<tosi-product>
  <tosi-product-section scroll="150">
    <tosi-filmstrip src="https://cdn.tosijs.net/tosijs-product/agent-owl_10x10_96.jpg" cols="10" rows="10" total="96" data-scroll-animate></tosi-filmstrip>
  </tosi-product-section>
</tosi-product>