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

Hello, World

@m0saic/hello-world/v1

The first render on a fresh install — the brand field sweeps in rect by rect, a card rises with the M and your greeting. Zero inputs.

npx m0saic hello-world

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

// creator

Drop Calendar

@m0saic-dev/creator/drop-calendar/v1

A month of drops for a channel — pick the platform, name the weekdays, fill the days with teasers. Desktop, square, or portrait from one template.

npx m0saic community fetch && npx m0saic make @m0saic-dev/creator/drop-calendar/v1 -w 1920 -h 1080 -o drops.mp4

Lyric Video

@m0saic-dev/music/lyric-video/v1

Paste lyrics, tap them in time, get a lyric video — with word-level karaoke highlight if you want it. The render runs as long as the song.

npx m0saic community fetch && npx m0saic make @m0saic-dev/music/lyric-video/v1 --props @lyrics.json -w 1920 -h 1080 -o lyrics.mp4

Tip Goal

@m0saic-dev/creator/tip-goal/v1

A streamer's tip-goal bar pinned where a real overlay sits — the track fills toward the goal while the counter ticks up. Seeded, exact rows, or keyframes.

npx m0saic community fetch && npx m0saic make @m0saic-dev/creator/tip-goal/v1 -w 1920 -h 1080 -o tip-goal.mp4

Quote Card

@m0saic/social/quote-card/v1

A pull-quote card for social — auto-wrapped quote, accent bar, attribution with an optional avatar. Lossless PNG, square to stories.

Quote Card — a @m0saic/social/quote-card/v1 render
npx m0saic make @m0saic/social/quote-card/v1 -w 1080 -h 1080 -o quote.png

// language

Dual Subtitles

@m0saic-dev/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 community fetch && npx m0saic make @m0saic-dev/language/dual-sub/v1 -w 1280 -h 720 -o dual-sub.mp4

// brand

QR Code

@m0saic/media/qr/code/v1

Point it at any URL and get a QR that spawns in — modules pixelate into place — and still scans. Round or square modules, styled eyes, a carved centre for a mark, light, dark or transparent. Every module is a real tile in the layout.

npx m0saic make @m0saic/media/qr/code/v1 --props '{"outputFormat":"mp4"}' -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/v2

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/v2 --input-dir ./library -w 1920 -h 1080 --props '{"format":"mp4","rows":3,"cols":4,"sourceIds":["big_buck_bunny_1080p.mov"]}' -o screencaps.mp4

Scroll Wall

@m0saic/media/scroll_wall/v1

An endless wall of clips sliding sideways and looping at a whole cycle — every tile a real cell at native resolution, no camera crop.

npx m0saic make @m0saic/media/scroll_wall/v1 --input-dir ./clips -w 1920 -h 1080 -o wall.mp4

// code & research

Code Snippet Morph

@m0saic/code/snippet-morph/v1

Ordered code states become an editor-framed video with line-aware morphs — the code walkthrough without a screen recording.

npx m0saic make @m0saic/code/snippet-morph/v1 -w 1280 -h 720 -o walkthrough.mp4

Page Skeleton

@m0saic/web/page-skeleton/v1

Captured page geometry becomes a skeleton still or a looping shimmer — a loading state that cannot drift from the real layout.

npx m0saic make @m0saic/web/page-skeleton/v1 -w 1440 -h 900 -o skeleton.mp4

Multi-Panel Figure

@m0saic-dev/science/multi-panel-figure/v1

N image panels composed into a labeled scientific figure — A/B/C letters, caption rail, optional scale bar. Lossless PNG for a byte-exact paper.

Multi-Panel Figure — a @m0saic-dev/science/multi-panel-figure/v1 render
npx m0saic community fetch && npx m0saic make @m0saic-dev/science/multi-panel-figure/v1 --input-dir ./panels -o figure.png

// charts

Donut Chart

@m0saic/charts/donut/v4

A share of a total, as a ring that sweeps in around the number. Give it your values; drops into any dashboard at any size.

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

One number that matters, counting up, with its change and a sparkline underneath. The card a weekly update is built from.

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

Heatmap

@m0saic/alpine/heatmap/v2

Activity over time as a grid of cells — the contribution calendar, pointed at any data you have.

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

Leaderboard

@m0saic/alpine/leaderboard/v1

A ranked top-N with gold, silver, and bronze badges and count-up values — the card a creator posts on results day.

npx m0saic make @m0saic/alpine/leaderboard/v1 -w 1280 -h 800 -o leaderboard.mp4

Timeline

@m0saic/alpine/timeline/v2

Milestones on a spine — a date, a title, and a line for each — for a roadmap or a founding story, at any canvas.

npx m0saic make @m0saic/alpine/timeline/v2 -w 1280 -h 800 -o timeline.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

// reports — live data

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 make @m0saic/github/weekly-pulse/v1 -w 1280 -h 720 -o pulse.mp4