---
name: package-flow
description: Explain how a sequence of documented operations forms a reusable process that produces a separate benefit.
version: 1.0.2
---

# Package Flow

Use for an operation chain whose products belong inside one system, with a benefit outside it. This is a parameterized HTML/SVG renderer with a GSAP clock and HyperFrames export. It does not write a story from an arbitrary prompt.

## Prepare the brief

Write JSON containing `heading` (48 characters), `enclosure` (38), `benefit` (34), `footnote` (100), `ink` (`harbor` or `orchard`), and optional `language` (`en` or `zh-CN`). Supply 2–4 `operations`, each with a `caption` of at most 17 characters and an `image` path relative to the JSON. Supply 2–4 short `deliverables` (18 characters each). Keep phrases concise and inspect the actual rendered widths, especially CJK text.

Every operation needs a PNG, JPG or WebP document or photograph that explains that operation. Use authorized imagery or original quantitative diagrams, keep their licenses with the project, and label illustrative data. Do not silently insert unrelated imagery. Example media is deliberately separate from the reusable package.

## Generate and render

Requires Node.js 22 or newer, npm, and a Chromium executable available to HyperFrames. Install pinned dependencies with `npm ci --ignore-scripts` inside this directory. On constrained hosts set `PUPPETEER_EXECUTABLE_PATH` to the installed Chromium binary. Network access is needed for dependency installation; generation uses local assets only.

Run `node scripts/compose.mjs /absolute/brief.json /absolute/new-project` with a new destination directory. Then run `node_modules/.bin/hyperframes inspect /absolute/new-project --json` and `node_modules/.bin/hyperframes render /absolute/new-project --output /absolute/film.mp4 --fps 30 --quality high --strict --workers 1`.

## Editable behavior

The output contains HTML/SVG, copied local images, fonts and a `project.json` timing record. Operations enter in order; connectors link each one before branching into deliverables. A single parent transform contracts the entire network. The enclosing line appears during the end of that contraction, followed by the enclosure label, outgoing arrow and external benefit. Counts change timing; duration is recorded in the project. All visible state derives from the GSAP time value, including time zero and reverse seeks.

The two palettes change color roles while preserving the structure. Unicode subset fonts support Chinese and Latin. There is no presenter layer or audio track. Add audio only as a separately licensed, editable project workflow and report its actual verification status.

## Inspect before delivery

Check image meaning, label bounds, arrow endpoints, enclosure separation, temporal order, reverse seeking and exact encoded frames. Decode the entire video and play it once at normal speed, recording real dropped-frame counts. Review reports at desktop and mobile widths. Preserve raw failures and distinguish visible defects from equivalent browser representations. A successful export is not human acceptance.

Dependencies in assets retain their required notices. Demo-specific sources and data stay with each project. The package does not require credentials or paid calls.