---
name: action-ticks
description: Produce a readable action ledger next to a phone demonstration, with each confirmation tied to an observed event.
version: 1.1.4
category: video
delivery: download-only
---

# Action Ticks

Use this parameterized HTML/JavaScript renderer for a short procedural explanation. The audience sees every task before any task finishes. A local phone recording supplies the action evidence; a GSAP clock draws the corresponding check, then holds the completed ledger for reading. Output is 1920×1080 at 30 fps through HyperFrames.

## Prepare the brief

Write a JSON file with `heading`, `label`, `appName`, `result`, and two to four `actions`. Each action contains `copy` (up to 52 characters), `detail` (up to 70), `receipt` (up to 60), and `beat` in seconds. Beats must ascend, remain at least 0.65 seconds apart, and leave 1.2 seconds after the last one. Choose `seconds` from 6 to 30. Defaults: 10 seconds, `glade` palette, synthesized sound bed enabled.

Optional fields: `screenHeading`, `intro`, `caption`, `palette` (`glade`, `inkwell`, `chalk`, `plum`), `capture` (local recording), `presenter` (local video covering the complete film), `sound` (false disables the bed; confirmation cues remain editable).

Text is plain text, escaped during HTML creation. English is the authoring default. Local Noto Sans SC provides Latin and Chinese glyphs. Long unbroken strings require visual inspection even when within the character limits.

## Install and make the project

Node.js 22+, npm, FFmpeg, and a HyperFrames-compatible Chrome installation are prerequisites. Install pinned dependencies from their official npm packages:

```sh
node scripts/install-runtime.mjs /absolute/runtime-cache
export ACTION_TICKS_RUNTIME=/absolute/runtime-cache
node scripts/build.mjs /absolute/brief.json /absolute/project
node scripts/render.mjs /absolute/project
```

HyperFrames may need a browser download on first use; follow its browser setup instructions. Network access is required at installation. Subsequent rendering uses local dependencies and assets. The external runtime cache and editable projects retain the required dependency notices. Reuse a prepared cache with `node scripts/install-runtime.mjs /absolute/runtime-cache --offline`; corrupted or missing archives fail closed. Download URLs, fixed versions and SHA256 values are recorded in `references/runtime.json`.

Without `capture`, build creates an editable demonstration app in `project/screen`. The render command first renders that app into `assets/capture.mp4`, then renders the phone and ledger together. This is an authored demonstration, not a recording of a real business transaction. With an existing recording, set each beat from its actual action and provide portrait media covering the entire film. The recording is shown without changing its playback speed; use matching portrait dimensions or accept deliberate reframing. A supplied presenter is muted; add authorized dialogue to the audio timeline if needed.

## Edit and inspect

`index.html` is the composition, `screen/index.html` is the demonstration app, `brief.json` records content, and `audio-timeline.json` contains the editable sound bed and confirmation events. Both HTML projects expose paused GSAP clocks in `window.__timelines`. Do not replace these with timer callbacks or entrance-only task animation. Keep the layout settled, draw checks on the event, and retain the final hold.

After changing the demonstration app, remove its old generated `assets/capture.mp4` before rendering again. Preserve supplied recordings. After editing `audio-timeline.json`, run `node scripts/sound.mjs PROJECT`, then rerun render for a new mux.

Deliver `video.mp4` (synthesized audio), `video-only.mp4`, `poster.jpg`, `mix.wav` and the editable project. See `references/review.md` for checks. Rendering does not establish listening or audience acceptance.

Optional `cover` accepts a licensed local JPEG, PNG or WebP photograph for the editable phone screen. The file is resolved beside the brief and copied locally; no remote image is fetched during rendering.