---
name: topic-drift
description: Make a six-second clip where a huge headline sits behind a subject and related words drift in around it, with an optional synthesized cue track. The subject cutout always stays above the lettering.
version: 1.0.3
category: video
delivery: download-only
---

# Topic Drift

A parameterized HTML/CSS + GSAP renderer. A JSON brief becomes an editable HyperFrames project; it is not an Agent that invents scenes. The Agent writes the short copy, and the user (or a tool) must supply the footage: a continuous silent take of a subject and a cutout of the same take. This Skill never produces a presenter or a cutout.

Read `references/direction.md` first and `references/input.md` before writing a brief. Keep the layer order, the headline-first then spread-out arrival, the fixed final positions and the quiet hold. Do not add ambient movement or swap the lettering in front of the subject.

## Create and render

```sh
node scripts/create.mjs --brief /abs/brief.json --plate /abs/take.mp4 --cutout /abs/cutout.webm --out /abs/project --theme chalk
node scripts/render.mjs /abs/project /abs/video-only.mp4
node scripts/sound.mjs /abs/project /abs/video-only.mp4 /abs/video.mp4   # optional synthesized cues
```

Brief fields: `headline` (up to 18 characters), `satellites` (3 to 8 short entries, each a string or `{text, weight}` with weight 1 to 3), optional `camera` `{zoom, shiftX, shiftY}`, `veil` strength and `sound` `{mode, bed, level}`. Themes: `chalk`, `amber`, `tidal`, `orchid`. Chinese is detected and uses the bundled Noto Sans SC; `--font local.woff2` overrides both.

## Required media and honesty

- `--plate`: a take at least as long as the printed duration (5.6 to 6.1 s depending on word count). Short takes are rejected, never looped.
- `--cutout`: an alpha video (for example VP9 alpha WebM) with the same size, frame rate and framing as the plate. Prepare it with an authorized local tool or a licensed matting service. Automatic matting is not part of the generator; inspect the external tool’s output before using it.
- The generator probes both files with ffprobe and stops on mismatch, no alpha, too short, bad brief fields, collisions or a headline that would need a font under 110 px.
- `render.mjs` writes a video-only file. `sound.mjs` synthesizes a cue track (headline thud with a short swell, one tone per arriving word panned by position and pitched by weight, optional quiet bed) from the project's cue list and muxes 48 kHz stereo AAC. Set `sound.mode` to `off` in the brief to keep video only. The sound is generated from math, not recorded or composed by a person; see `references/sound.md` for what has been measured. Do not claim anyone listened to it.

## Prerequisites and checks

Node.js 22+, FFmpeg/ffprobe, Chrome supported by HyperFrames and HyperFrames 0.8.30 (`npx --yes hyperframes@0.8.30`; or set `HYPERFRAMES_CLI` to an installed exact-version CLI path, which is not a credential). No API key or network call is needed after install.

Run `npx --yes hyperframes@0.8.30 inspect /abs/project --json`. Then inspect native frames near the headline arrival (0.2 to 0.7 s), every word arrival and the final hold, and look at the cutout edge where the subject overlaps type. Build success is not visual acceptance. Report verification and user acceptance separately.

See `references/licenses.md` for licenses of the bundled libraries and fonts.

## Presenter acceptance

When the brief calls for a person, use authorized, continuous live-action footage with visible natural movement. Geometric figures, animated busts, static avatars and still photos do not satisfy a presenter shot. If suitable footage is missing, report the missing input and keep the deliverable pending; do not silently substitute a placeholder. Inspect the actual face, hands, framing and motion in the rendered video before marking the result complete. A passing render only verifies execution.

The foreground must be an alpha video of that same take, with matching timestamps and camera crop. Check hair and hands against the plate at several moving frames and verify that the headline and terms remain behind the person. You may prepare the aligned matte with the pinned local HyperFrames tool: `npx --yes hyperframes@0.8.30 remove-background /abs/take.mp4 -o /abs/cutout.webm --quality best`. The local tool downloads its model weights once on first use; cache them before offline work. Review the result before passing it to `--cutout`; no remote model call is required.