---
name: quote-anchor
description: Turn a document page and a short passage into an editable evidence-reading film with a persistent citation, an enlarged excerpt and line-aware marker sweeps.
version: 1.0.2
---

# Quote Anchor

Use a real, rights-cleared raster document page alongside a short passage. Keep the citation visible while attention moves into the excerpt. The supplied parameterized renderer makes a twelve-second 1920 × 1080 film through HTML, GSAP and HyperFrames. It does not discover evidence or verify claims.

## Prepare a brief

Save a UTF-8 JSON file with these fields:

- `heading`: the document's heading, up to 85 characters.
- `credit`: an attribution or document identifier.
- `passage`: the complete quoted or clearly illustrative passage, up to 260 characters.
- `document`: a PNG, JPEG or WebP path relative to the JSON file.
- `emphasis`: one to three objects, each with `words` and `kind` (`key` or `detail`). Each phrase must occur once in the passage; list phrases in reading order without overlap.
- `palette`: `tide` for a light green reading surface or `nightfall` for a dark blue surface.
- `footer`: short contextual copy; mark invented educational examples explicitly.

Use material you are allowed to show. Do not present invented text as a quotation from a real organization. Supply the original page or a separately authored document image with readable structure; a filename alone is not evidence. Keep photographic credits with project assets. The generic package deliberately contains no topic-specific photography or films.

## Install and compose

Use Node.js 22 or later, npm, FFmpeg and Chromium. Run `npm ci --no-audit --no-fund` in the extracted package directory. Dependencies are pinned in the lockfile. Browser installation may require network access; set `PUPPETEER_EXECUTABLE_PATH` to a compatible local Chromium when needed.

Run `node scripts/compose.mjs /absolute/path/brief.json /absolute/path/project`.

Render with `./node_modules/.bin/hyperframes render /absolute/path/project --output /absolute/path/film.mp4 --fps 30 --quality high --strict --workers 1`.

The generated project contains editable HTML, CSS, JavaScript, a copied raster page and locally installed fonts. Keep all its assets together. Serve CSS as `text/css` and JavaScript as JavaScript. DM Sans handles Latin text; Noto Sans SC handles Chinese. Font loading finishes before the line geometry is measured. Fonts retain their licenses and GSAP retains its copyright and upstream notice.

## Motion and review

The document and its citation enter first. The excerpt grows into its reading position. Each selected phrase is measured into visible line fragments, and the marker travels through those fragments in order. The complete page stays available. A final hold leaves time to reread the passage.

Preview the full film and inspect the first frame, excerpt expansion, wrapped sweeps and final hold. Check that long headings, credit lines and the footer fit; shorten a brief if it crowds the canvas. Verify the actual loaded fonts rather than only the CSS family name. Seek forward, backward and to zero after the timeline becomes available at `window.__timelines['quote-anchor']`. `window.quoteAnchor.ready` confirms that layout and the timeline were initialized.

The renderer creates silent films. Narration or music requires a separately edited audio timeline and a real mixed export. Do not claim synchronized narration from a silent render. English and Chinese examples require separate layout review; the character limit is an input guard, not a guarantee that arbitrary text fits.