# SkillPick: a real local HyperFrames render

Original 12-second, 1280×720, 30fps silent explainer: Discover → Preview → Download. This is a conceptual product walkthrough using original typography and CSS shapes, not a recording of the live website. It states that packages are free and model/API costs are separate.

The first-party test used HyperFrames **0.9.26**, Node **22.22.1**, FFmpeg **8.1.1**, Windows and an isolated Chrome Headless Shell. No user browser profile, cloud render, authentication, paid API, narration or stock asset was used. Host HyperFrames authoring/CLI instructions informed the design and workflow. Tool execution was tested; automatic agent discovery was not tested.

## Reproduce

Use Node 22+, FFmpeg/FFprobe and a supported Chrome Headless Shell. Run these commands from this directory:

```powershell
$env:DO_NOT_TRACK='1'
$env:HYPERFRAMES_NO_TELEMETRY='1'
npm ci --registry=https://registry.npmjs.org
npm run prepare-assets
npm run lint
npm run check
npm run snapshot
npm run render
```

The exact CLI pin is in each npm script. `prepare-assets` copies the pinned GSAP distribution to the local script URL used by `index.html`. Generated JS and node_modules are ignored, so no third-party vendor code is committed. GSAP is supplied by its npm package under its [standard license](https://gsap.com/standard-license/); keep the package's original copyright/license header with generated JS copies. Rendered motion graphics are our first-party output.

If the managed browser download cannot progress, use the documented environment override before rendering:

```powershell
$env:HYPERFRAMES_BROWSER_PATH='C:/path/to/chrome-headless-shell.exe'
```

Choose a real installed binary; do not point this at a running user profile. Our first managed-browser download stalled with a zero-byte ZIP. The supported override succeeded after the CLI reclaimed the terminated install's stale lock. The render used two isolated headless workers and captured all 360 frames.

## Publish a small browser-compatible output

The production file was transcoded from the **actual HyperFrames MP4**, not synthesized independently in FFmpeg:

```powershell
ffmpeg -y -i render.mp4 -an -c:v libx264 -preset medium -crf 22 -pix_fmt yuv420p -movflags +faststart ../../apps/web/public/demos/hyperframes-cli-output.mp4
ffmpeg -y -ss 6 -i ../../apps/web/public/demos/hyperframes-cli-output.mp4 -frames:v 1 ../../apps/web/public/demos/hyperframes-cli-poster.png
ffprobe -v error -show_streams -show_format -of json ../../apps/web/public/demos/hyperframes-cli-output.mp4
```

The poster is decoded from the final MP4 at six seconds. Decoded final-video frames at two, six and ten seconds were visually inspected. The final video is H.264/yuv420p, 12.000 seconds, 360 frames, no audio stream, with the `moov` atom before `mdat` for fast start. The public case study records the original checks. This site copy omits the optional registry setting from hyperframes.json; the composition uses no registry blocks. Keep all downloaded files together and remove the hyperframes- prefix and final .txt from their names. The FFmpeg paths below assume the original repository layout; for a standalone folder use output.mp4 and poster.png as explained in the case study.

This example does not prove compatibility across all agents, browser versions or operating systems. Browser/font differences may change exact pixels. It demonstrates a successful local CLI authoring/check/snapshot/render workflow with a pinned tool version.