---
name: pocket-path
description: Create an editable mobile walkthrough with a travelling target ring, linked instructions and synchronized screen states.
version: 1.0.0
---

# Pocket Path

Use this parameterized HTML/SVG + GSAP authoring tool for a short mobile workflow. HyperFrames renders the project. The tool accepts prepared screenshots and timed guidance; it does not invent an application or record a live service automatically.

## Prepare the workflow

Capture an authorized interface before the first action and after each meaningful action. For an illustrative product, build a functional prototype and capture its actual browser states. Keep product images outside this package. Do not draw substitute photographs or claim that screenshots are a live recording.

Create a JSON brief with `heading` (up to 45 characters), `subtitle` (95), optional `eyebrow`, `look` (`harbor`, `ember`, `meadow`), `seconds` and `footnote`. Set `opening` to the first PNG/JPEG. Each of two to five `beats` has `at` in seconds, `point` as normalized screen coordinates, `instruction` (42), `detail` (80) and the resulting `screen` path. All file paths resolve beside the brief.

Use portrait captures at 432 × 864. Calibrate each point to a real control in the preceding state. Leave at least 1.6 seconds between beats and 1.5 seconds after the last beat. Keep targets within 4–96% of the viewport. The focus travels for 0.38 seconds; the connector and instruction follow; the screen changes at `at + 0.54`. Compose the action order so each result motivates the next selection.

## Generate and render

Install the pinned dependencies with `npm ci`. Requires Node.js 22+, npm, and a Chromium browser usable by HyperFrames. Normal installation may report platform dependency advisories or lifecycle-script policies; inspect those separately from render results.

Run `node compose.mjs /absolute/brief.json /absolute/project`. Then run `npx hyperframes render /absolute/project --output /absolute/movie.mp4 --fps 30 --quality high --strict --workers 1 --no-browser-gpu --experimental-fast-capture=false`.

The project contains editable HTML, raster interface states, font files, license notices, a paused GSAP timeline in `window.__timelines.pocket`, and `window.seekPocket(seconds)`. Keep the standard `gsap.min.js` name and composition metadata. `build.json` records the resolved brief and target coordinates. Chinese briefs use Noto Sans SC; English uses Manrope. Dependencies come from pinned upstream packages; their notices travel with the generated project.

## Review the output

Inspect the untouched opening, time zero, each travel interval, target contact and final reading hold. Check that the ring reaches the intended control before the state changes, text fits, no screen turns blank, and forward/backward seeking reaches the same visible result. Review encoded frames and normal-speed playback separately from HTML. Report actual dropped-frame counts without treating a nonzero count as an automatic content failure.

This workflow is silent by default. Any requested soundtrack requires authorized audio, editable timing, an actual mixed export and separate listening review. No narration synchronization is implied.