---
name: counter-labels
version: 1.0.4
description: Place two contrasting thoughts around a real speaker using an editable asymmetric text reveal.
---

# Counter Labels

Build a short explanation in which one question gives way to a contrasting pair. This is a parameterized composition, requiring a finished continuous live-action take and three concise phrases. It does not generate people, write arbitrary films or make a vertical edit automatically.

## Prepare a brief

Provide JSON with `question`, `first`, `second`, `theme`, `media`, `rights` and optional `credit` and `focus` (horizontal crop percentage, default 50). Paths in `media` resolve relative to the brief. Each phrase accepts 1–36 characters; shorten it if the rendered fit check fails. Themes are `tide`, `clay`, `iris` and `graphite`. Noto Sans SC Variable covers Latin; bundled Noto Sans SC 400/800 subsets cover Chinese with the same hierarchy.

Choose a genuine, continuous take at least 7.2 seconds long. Keep the person's face and meaningful gestures in the middle, clear of the two text zones. Inspect every frame around camera changes and crops. Supply footage you can use, document permission, and retain required attribution. An illustrative label must not masquerade as a speaker's quotation or endorsement. A silhouette, frozen photo, loop, or generated stand-in cannot validate a real-person brief.

## Generate and render

Use Node.js 22+, FFmpeg and FFprobe. In this package run `npm ci --ignore-scripts`. Then run:

```sh
node scripts/compose.mjs /absolute/brief.json /absolute/new-project
node scripts/render.mjs /absolute/new-project /absolute/result.mp4
```

The destination must be new. The generator emits local HTML/SVG, `motion.js`, a resolved brief, licensed resources and the required footage. Assets remain editable; no network request is needed during playback or rendering. The renderer uses HyperFrames 0.8.30 with one worker at 1920×1080, 30 fps. The output lasts 7.2 seconds. Input sound is muted and output has no audio track; there is no soundtrack or audio editor in this package.

## Preserve the argument

A compact colored question arrives, retracts fully, then a dark print patch enters on the left. Unboxed slanted text arrives on the right slightly later. Keep that asymmetry and the center available for the person. The final pair holds while the person continues moving. A soft directional shade supports the right phrase without replacing footage with a panel.

`motion.js` contains an absolute-time evaluator driven by GSAP. Its transition boundaries are 0.42, 0.76, 1.92, 2.10, 2.40, 2.72, 2.96 and 3.34 seconds. The rest is a stable reading hold. Changes to pacing or geometry require a new render.

## Inspect before delivery

Run HyperFrames lint, validate and inspect. Check direct, backward and forward seeks at zero, transition boundaries and the last encoded frame. Separate actual visible or timing defects from raw DOM representation differences. Inspect native frames and a full 1× playback, retaining dropped-frame counts. Verify the subject remains continuous, labels avoid the face and hands, and all phrases fit. Check audio streams explicitly. This package does not certify media rights or subject-matter accuracy.