Open Editor

The gallery is the proof.

Every render below is reproducible: same command, same data, same bytes. Copy the command or open the layout in the editor.

// hero

FFmpeg Weekly Pulse

@m0saic/hero/ffmpeg-pulse/runner/v1

A repo's week as a cross-faded video report — eight beats of commits, contributors, and activity, rendered from live GitHub data.

npx m0saic pulse --repo owner/name

DSL Tutorial

@m0saic/dsl-tutorial/v1

The parser draws its own rectangles — an animated, debugger-style walk through an m0 string with a live X/Y/W/H inspector.

npx m0saic make @m0saic/dsl-tutorial/v1 -w 1280 -h 720 -o tutorial.mp4

// language

Dual Subtitles

@m0saic/language/dual-sub/v1

Two subtitle tracks burned deterministically — target language on top, native below, with a learning dial from training-wheels to cold-turkey.

npx m0saic make @m0saic/language/dual-sub/v1 -w 1280 -h 720 -o dual-sub.mp4

// brand

QR — Spawn

@m0saic/brand/qr-animate/v2

A scannable QR whose modules pixelate in, hold, and fade — every module a real tile in the layout. Point it at any URL.

npx m0saic make @m0saic/brand/qr-animate/v2 -w 1080 -h 1080 -o qr.mp4

Brand Marks

@m0saic/brand/logo/v3

The m0saic marks — the M, the logotype, the pattern — with an animated reveal. Geometry all the way down.

npx m0saic make @m0saic/brand/logo/v3 -w 1080 -h 1080 -o marks.mp4

// media

Logo Animate

@m0saic/media/logo-animate/v1

Drop in an SVG logo, get an animated logo video — each shape becomes a tile, then assembles, loops, fills, or shimmers.

npx m0saic make @m0saic/media/logo-animate/v1 -w 1080 -h 1080 -o logo.mp4

Watermark

@m0saic/media/watermark/v1

Stamp a logo or wordmark onto any image or video — nine positions or an exact rect. Point it at a folder for a batch.

npx m0saic make @m0saic/media/watermark/v1 -w 1280 -h 720 -o marked.mp4

Screencap Grid

@m0saic/media/screencap_grid_mp4/v1

Any video becomes a contact sheet — ffprobe metadata up top, an animated rows × cols grid of timestamped screencaps below.

npx m0saic make @m0saic/media/screencap_grid_mp4/v1 -w 1920 -h 1080 --props '{"rows":3,"cols":4,"withInfoPane":true,"withTileTimestamp":true,"tileGap":0.001,"sourceId":"big_buck_bunny_1080p.mov"}' -o screencaps.mp4

// charts

Donut Chart

@m0saic/charts/donut/v4

The canonical donut — proportional ring, dominant center total, smooth sliver sweep. Composes into any dashboard at any canvas.

npx m0saic make @m0saic/charts/donut/v4 -w 1080 -h 1080 -o donut.mp4

Bar Graph

@m0saic/charts/bar-graph/v2

The canonical bar graph — vertical or horizontal, axes, labels, grow-in animation. Every bar is a rect that hugs its drawn height.

npx m0saic make @m0saic/charts/bar-graph/v2 -w 1280 -h 720 -o bars.mp4

Line Chart

@m0saic/charts/line-chart/v1

Multi-series line chart with full axis, line, and point control — the base every dashboard and report composes.

npx m0saic make @m0saic/charts/line-chart/v1 -w 1280 -h 720 -o lines.mp4

// alpine — data viz

KPI Card

@m0saic/alpine/kpi-card/v2

A stat card with a count-up value, delta pill, and sparkline — the Alpine pack's friendly take on the weekly metrics post.

npx m0saic make @m0saic/alpine/kpi-card/v2 -w 1280 -h 800 -o kpi.mp4

Heatmap

@m0saic/alpine/heatmap/v2

A rows × cols intensity grid with labels and a Less→More legend — the contribution calendar, generalized to any data.

npx m0saic make @m0saic/alpine/heatmap/v2 -w 1280 -h 800 -o heatmap.mp4

Commit Feed

@m0saic/alpine/commit-feed/v2

A scannable feed of notable commits — kind icons, area chips, authors, reviewers — with a signal status bar.

npx m0saic make @m0saic/alpine/commit-feed/v2 -w 1280 -h 708 -o commits.mp4

Make one of these yours.

npx m0saic "3(1,1,1)" --anim