---
name: column-marks
description: Animate a comparison of three illustrated pages with cumulative reading marks and moving focus.
version: 1.0.2
---

# Column Marks

Use three tall raster pages to compare documents, collections or proposals. Each page stays in its lane as attention passes through the requested sequence. Marks wipe in from left to right and stay readable when attention moves away. The last beat brings every page back to full brightness.

This is a parameterized compositor. The agent supplies the page artwork and a JSON brief; it does not generate photographs or write an article from a prompt. Author the pages separately, using photographs or document scans you may use, and keep acquisition records with that project.

## Run

Use Node.js 22.14.0 or newer. Save the contract below in a JSON file. Local image paths resolve beside that file. Run:

```sh
node scripts/compose.mjs --brief /path/to/brief.json --dest /path/to/project --skin seaglass
npx --yes hyperframes@0.8.30 render /path/to/project --fps 30 --quality high --workers 1 --strict --no-browser-gpu --output /path/to/film.mp4
```

HyperFrames 0.8.30 and its browser require installation, and FFmpeg must be available. Network access may be needed for those tools. The generator itself works offline with its bundled GSAP 3.14.2 and Noto Sans SC Variable 5.2.5, including font notices. Rendering is sequential with one worker. The generated `index.html` is an editable HTML/GSAP timeline registered as `window.__timelines["column-marks"]`. Open it with HyperFrames preview or control the paused timeline for exact frame inspection.

## Brief contract

Supply an object with `folios` and `route`. `folios` contains exactly three objects, each with a `heading`, `plate` local image filename and `marks` array of one to three strings. `route` contains the three zero-based lane numbers, once each, in reading order. `language` may be `en` or `zh-CN`; omit it for content detection.

Headings allow 18 weighted units and marks 30 (a CJK character counts as two, Latin characters as one). Whitespace is normalized; empty strings, control characters and HTML tags fail. Images must be real PNG/JPEG/WebP files and supply at least 500×720 pixels; review the crop before approval. Plates use contain-fit on a neutral matte, preserving the whole page. For best filling, use a 2:3 page. No default picture or example story is installed.

Choose `seaglass`, `aubergine`, `terracotta` or `graphite`. The last palette uses neutral UI colors while preserving supplied photographs. All palettes use the same geometry and motion. Unknown options and palettes fail. The destination must be new or empty.

## Direction and review

Keep a common top edge, comparable page heights and short distinct headings. Write marks about what viewers can actually see in each page. Avoid placing essential page copy under the mark band; the bands occupy the middle-lower reading area. Supply actual raster imagery for photographs and page reproductions. This compositor has no moving presenter or foreground matte interface.

The 11.4-second film starts with an entry, then three 2.6-second attention windows, then about 1.9 seconds of fully restored comparison hold. One to three marks per page arrive in top-down order. Dim only the plate layer; headings and revealed marks remain bright. Change subject matter through brief data and artwork, without editing runtime code.

Check entry, every mark onset, attention handoff and final hold at 1920×1080. Seek backward and forward, including zero. Review all four palettes, maximum text and CJK. Inspect the actual encoded film at normal speed, record dropped frames separately from image quality, and never call a successful render a visual acceptance. Output is silent; add licensed audio in a separate editor if a brief requires sound. Music and sound mixing are not part of this package.