---
name: handset-scale
description: Produce a mobile confirmation sequence beside a continuous human shot, finishing with a smaller device and a readable receipt.
version: 1.0.0
---

# Handset Scale

A parameterized HTML/CSS and GSAP renderer, encoded by HyperFrames. It accepts structured content; it does not write a screenplay or generate people from a prompt.

## Prepare

Use Node.js 22 or later, FFmpeg/ffprobe and a Chromium browser. Run `npm ci` in this directory. If Chromium is not discovered, set `PUPPETEER_EXECUTABLE_PATH` to its executable.

Provide one JSON document with these fields:

- `heading`: up to 38 characters; `category`: up to 24.
- `items`: one to four nonempty strings, at most 34 characters each.
- `ready`, `done`: button messages of at most 26 characters.
- `receipt`: final sentence, at most 52 characters.
- `scheme`: lagoon, plum, porcelain or slate.
- `deviceSide`: left or right; `facePosition`: horizontal crop percentage from 0 to 100.
- `take`: path to a permitted continuous person video at least 7.6 seconds long.
- `photo`: path to a permitted JPEG photo used inside the device.

Media paths resolve from the JSON file. Choose wording for the subject and a photo that provides meaningful detail. Media is supplied separately and is not included in this package. A person appearing beside the interface does not imply endorsement or that they spoke its text.

## Generate and encode

`node scripts/compose.mjs /absolute/brief.json /absolute/project`

`npx --no-install hyperframes render /absolute/project --output /absolute/film.mp4 --fps 30 --quality high --strict --workers 1`

The output project retains editable HTML, GSAP timing, input data and local media. Dimensions are 1920 × 1080 at 30 fps, lasting 7.6 seconds. The video is silent; no narration synchronization is claimed. HyperFrames owns video timing through media attributes. Keep its stable video identifier.

## Direct the sequence

The device starts tall. Reveal the checklist in reading order, change the button after its checks, then reduce the complete device around its lower center. Leave the receipt visible through the final hold. Keep the person in a continuous shot; never stretch a short clip with a loop. Choose a crop with face and useful hand motion visible. This component uses adjacent layers, without a foreground person cutout.

## Verify

Inspect the encoded film at native resolution, including the button transition and scale interval. Check text bounds, first/last frames, forward and backward timeline seeking, actual font resolution and a single normal-speed playback. Test a second subject and Chinese copy before claiming a broader content range. Long English words may require shorter copy despite character limits. Keep dependency licenses in assets. Custom per-project edits require fresh rendering and inspection.