---
name: friction-reveal
version: 1.0.6
description: Create an editable narrated film where a small visible frustration turns into a working drag interaction.
---

# Friction Reveal

Use a specific, harmless interface annoyance as the opening. Let the viewer see an attempted adjustment miss, then show a direct control solve the problem. This package is a parameterized film toolkit with two local demonstrator modes: equal label spacing and proportional recipe quantities. It does not generate arbitrary product interfaces.

Supply a JSON brief with brand, language, voice, mode, three hex palette values (paper, ink, accent), two intro phrases, ask, three retries, turn, two fix fragments, three rows, six spoken passages, notice and rights. Mode is spacing or recipe. Keep display fragments concise. Invented messages must be labeled illustrative, never presented as customer quotations. For a real product, extend tool.mjs and numerical capture assertions before making product claims.

Install Node 22+, FFmpeg and Python 3. Run `npm ci --ignore-scripts`, then `npx playwright install chromium` if no supported browser is available. An existing Chromium executable can be selected with PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH. Run `node build.mjs brief.json project-directory`, followed by `npx hyperframes render project-directory --fps 60 --workers 1 --quality high --output film.mp4`.

The builder records an actual interaction with a working local page and validates the result. Keep the resulting tool.html, proof-validation.json and capture with the editable project. Never substitute an unimplemented screenshot for this action.

Narration uses local eSpeak NG PCM and synthesis word events, not recognition of a recording. The voice is synthetic and requires listening review. The generated audio-timeline.json documents clips, while index.html is the executable clip timeline; edit starts and levels there. Edit score.py to change the original music and action sounds, regenerate score.wav and rerender. Every audio element has an id. No model account or paid generation is required.

Maintain the uninterrupted opening stage, delayed wrong reaction, increasingly close retries, upward transition and the identity of the carrier element through highlight, widening, control and closing wipe. The drag must motivate the proof clip. Retain opaque backgrounds and deterministic GSAP property endpoints. Runtime inspection is available through window.friction.seek(seconds).

Inspect fresh load at zero, return to zero, forward/backward boundaries, native encoded frames and full playback at 1x. Preserve actual dropped-frame counts, evaluate visible meaning, and record differences rather than selecting a cleaner replay. Probe and fully decode the encoded file. Check fonts, mobile presentation and both sound and picture separately. Technical checks alone do not establish listening or user acceptance.

Keep finished films, recorded examples and per-brief data outside this generic package. Preserve third-party licenses when distributing dependencies. After changing the toolkit, version it, create a new ZIP and render from a fresh extraction.