Skip to content
Code Review
Skill

/hunk-launch-video

Produces Hunk videos by driving the real TUI headlessly in a PTY, compositing captioned 1080p frames in Chromium, and encoding with ffmpeg. Use for feature demos, workflow explainers, announcements, launch videos, and full-release roundups.

From plugin
hunk
9.8k4 skills

Claude Code

$ npx -y skills add modem-dev/hunk --skill hunk-launch-video --agent claude-code

SKILL.md

hunk-launch-video.SKILL.md
name: hunk-launch-video
description: Produces Hunk videos by driving the real TUI headlessly in a PTY, compositing captioned 1080p frames in Chromium, and encoding with ffmpeg. Use for feature demos, workflow explainers, announcements, launch videos, and full-release roundups.
metadata:
  internal: true

Hunk video pipeline

Source-checkout only: the pipeline lives in `scripts/launch-video/`, which never ships to npm. It can be used for pull-request demos as well as maintainer release videos. Unix-only — the capture scripts exec `/bin/bash`.

Generates product videos where every terminal frame is the real Hunk TUI — no screen recording, no mockups. Three stages:

capture.ts   (bun)               drive Hunk over a PTY, snap styled keyframes to PNG
compose.mjs  (node + Playwright) render each PNG on a 1920x1080 HTML stage in Chromium
ffmpeg                           encode the composited PNGs at 30fps to mp4/webm

Playwright controls headless Chromium: for each planned frame it loads the terminal PNG onto the HTML stage, applies the window chrome, cards, captions, and transition state, then screenshots the completed stage back to PNG. ffmpeg sequences those composited screenshots into the final videos.

The generic machinery (PTY driving, keyframe rendering, storyboard planning, Chromium compositing, the stage template) is the `@hunk/term-video` workspace package in `packages/term-video/`; `scripts/launch-video/` holds only Hunk's scenes, captions, and cards on top of it.

Choosing a recipe

The pipeline is not release-specific. Choose the editorial scope, then use the same capture → composite → encode stages:

  • **Single feature:** a short demonstration of one capability or workflow. Use

the single-feature recipe below and capture only the required scene.

  • **Full release:** the social promo for a release, in Hunk's house style

(`scripts/launch-video/promo/`). Use the full-release recipe: write one storyboard file for the release; the style kit stays unchanged.

  • **Custom video:** author any set of scenes and `SHOTS` for tutorials,

comparisons, announcements, or workflow explainers; follow the scene and storyboard rules below.

Creating a video

Expect ~3–6 min for capture and ~2–4 min for compose — run both with a long timeout (or in the background); each logs per-snap / per-shot progress. `compose.mjs` needs node ≥ 18 on PATH (bun alone is not enough).

# 0. dependencies (tuistory is a devDependency; ghostty-opentui arrives transitively)
bun install    # if a postinstall hook fails in a sandbox, retry with --ignore-scripts

# 1. capture the current storyboard's default scenes. Output defaults to
#    <repo>/.video-work/ regardless of cwd (pass a path argument to override),
#    but the PROCESS must run from the repo root — see gotchas.
bun run scripts/launch-video/capture.ts

# 2. one-time portable compositor setup. Playwright installs a Chromium build
#    that exactly matches its browser driver (see gotchas to reuse a system or
#    sandbox browser instead).
printf '{"name":"hunk-video-work","private":true}\n' > .video-work/package.json
cd .video-work
bun add playwright playwright-core
bunx playwright install chromium
cd ..

# 3. composite the storyboard
node scripts/launch-video/compose.mjs .video-work

# 4. encode
cd .video-work
ffmpeg -y -f concat -safe 0 -i concat.txt -vf "format=yuv420p" -r 30 \
  -c:v libx264 -preset slow -crf 18 -movflags +faststart launch.mp4
ffmpeg -y -f concat -safe 0 -i concat.txt -vf "format=yuv420p" -r 30 \
  -c:v libvpx-vp9 -b:v 0 -crf 32 -row-mt 1 launch.webm

Override the default scene set to iterate on one or more scenes:

SCENES=review bun run scripts/launch-video/capture.ts   # comma-separated scene names

Scene names are the `wants("...")` guards in `capture.ts`'s `main()`. `SCENES=` replaces the canonical default scene set; `compose.mjs` preflights that every frame its `SHOTS` table references exists in `frames/` and fails fast listing any missing ones, so a full composite still needs every referenced scene captured at least once.

Single-feature recipe

For a short test, demo, or one-feature announcement, capture and composite only the scene for that feature:

1. Pick one user-visible capability and find its scene name in the `wants("...")` guards. If it does not have a scene, author one using the guidance below. Capture only that scene:

   SCENES=review bun run scripts/launch-video/capture.ts

2. Make a scratch compositor beside the canonical one so its imports and repo-relative paths continue to work:

   cp scripts/launch-video/compose.mjs scripts/launch-video/compose-one-feature.mjs

3. In the scratch copy, trim `SHOTS` to an opening card, only the selected feature's frames, and an outro card. Rewrite those cards and captions for the scoped cut. Sequence lengths must still match the captured frame names. 4. Composite into the same work directory, then run the normal ffmpeg commands with descriptive output names:

   node scripts/launch-video/compose-one-feature.mjs .video-work
   cd .video-work
   ffmpeg -y -f concat -safe 0 -i concat.txt -vf "format=yuv420p" -r 30 \
     -c:v libx264 -preset slow -crf 18 -movflags +faststart hunk-feature-demo.mp4
   ffmpeg -y -f concat -safe 0 -i concat.txt -vf "format=yuv420p" -r 30 \
     -c:v libvpx-vp9 -b:v 0 -crf 32 -row-mt 1 hunk-feature-demo.webm
   cd ..
   rm scripts/launch-video/compose-one-feature.mjs

Keep the scratch compositor uncommitted. The canonical `compose.mjs` remains the checked-in reference storyboard. If you added a capture scene only to make PR evidence, revert that scene after encoding; retain it only when it is useful checked-in demo coverage and belongs to the submitted change.

Full-release recipe

Release videos use the promo style kit in `scripts/launch-video/promo/`, so every release looks like part of one series. The kit renders through `@hunk/ter

Read more
@modem-dev
Ships withhunk

Hunk is an interactive terminal diff viewer for reviewing code changes, built on OpenTUI and Pierre diffs.

Stars on GitHub

Momentum

stars in total
9.8k
Star history of modem-dev/hunk on GitHub, a chart by star-history.com

Other skills on hunk.

hunk-extensions

hunk-extensions

Maps the `hunkdiff/extension` authoring surface for Hunk, the terminal diff viewer — hiding or reordering reviewed files, docked…

@modem-dev@modem-devInstall Skill
hunk-review

hunk-review

Interacts with live Hunk diff review sessions via CLI. Inspects review focus, navigates files, hunks, and exact lines, reloads…

@modem-dev@modem-devInstall Skill
hunk-release

hunk-release

Prepares, publishes, verifies, and curates Hunk releases. Use for release metadata, benchmarks, tags, publishing, release videos,…

@modem-dev@modem-devInstall Skill

More skills from other plugins.

open-code-review

open-code-review

Performs AI-powered code review on Git changes using the `ocr` CLI from alibaba/open-code-review. Use when the user asks to…

@alibaba@alibabaInstall Skill
build-graph

build-graph

Build or update the code review knowledge graph. Run this first to initialize, or let hooks keep it updated automatically.

@tirth8205@tirth8205Install Skill
install-anti-slop

install-anti-slop

Install, configure, update, or upgrade vendored anti-slop Oxlint plugins. Use when adding anti-slop, picking up upstream rules or…

anti-slop4w5.8k
@dmmulroy@dmmulroyInstall Skill

Questions about hunk-launch-video.

Which coding agents can use hunk-launch-video?
hunk-launch-video installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.