---
name: region-select
description: Animate a coordinate map, introduce observations in order, then reveal a bounded selection without shifting their positions.
version: 1.0.5
---

# Region Select

Make a 9.2-second editorial diagram in which a decision follows its evidence. The SVG stays editable: the axes establish direction, markers arrive one at a time, and a dashed boundary opens horizontally after the last arrival. Included observations change color only after the boundary reaches its full width. A final hold leaves the complete map readable.

This is a parameterized renderer for short, bounded briefs. It does not invent scores, infer facts, or turn arbitrary prose into a film. Author the coordinates and explain what each dimension means. For example, a seed library could map storage difficulty against growing reliability and select a low-difficulty, high-reliability trial region. Use illustrative data unless you supply verified measurements.

## Run

Use Node.js 22, npm, FFmpeg and an installed Chromium. All fonts and GSAP 3.14.2 are bundled with required licenses; no model key, generation service or first-run asset download is needed. Install the pinned rendering dependencies once:

```sh
npm ci --prefix scripts/toolchain
export HYPERFRAMES_BROWSER_PATH=/absolute/path/to/chromium
node scripts/create.mjs --brief /absolute/path/brief.json --palette salt --out /absolute/path/project
node scripts/render.mjs /absolute/path/project /absolute/path/film.mp4
```

The last command uses HyperFrames 0.8.30 with strict capture, one worker and 30 fps. The output is 1920×1080. Project directories must be new to protect previous work. Generation writes editable `index.html`, the resolved brief, build metadata and English/Chinese HTML reports. No film or input-specific assets are inside this generic package.

## Author the brief

See [the input contract](references/input.md) and [motion direction](references/direction.md). Required strings are `heading`, `horizontal`, `vertical`, and `decision`. Supply three to six `observations`, each with `name`, `east`, and `north`. Coordinates range from −1 to +1. The `window` object has `west`, `south`, `east`, and `north` bounds; inclusively test marker centers, not label boxes. At least one marker must be included. Coincident or dense labels may fail rendering; spread the observations or shorten their names instead of silently moving data.

Palettes: `salt`, `abyss`, `earthen`, `iris`. They preserve geometry and motion. `--lang en` is default; `--lang zh-CN` and alias `zh` select Chinese report copy; invalid locales fall back to English. Manrope supplies Latin letters, Noto Sans SC supplies Chinese. The 16:9 composition is scaled on mobile and has no portrait rearrangement.

## Check the result

Read axes before markers, verify every marker center against its supplied value, and confirm that the decision contains the intended observations. Scrub forward and backward across entrances and the boundary reveal; the paused GSAP timeline is registered in `window.__timelines['region-select']`. Rendering rejects visible text collisions or canvas overflow. Review complete encoded films at 1× before distribution; technical success does not establish aesthetic approval.

There is no music, sound-effects system or audio timeline. The renderer emits silent films. Add authorized audio in a separate editor if the brief calls for it; do not claim an unperformed mix or listening check.

## Dependencies and limits

Read [the dependency notice](references/dependencies.md) before installation. An unresolved moderate dependency advisory affects the pinned toolchain, and ordinary npm installation loads that logging chain. Restrict this package to trusted local projects. No claim of safety for a public untrusted rendering service is made. Treat input and output paths as local files; there is no hosted entrypoint, account upload or credential handling.

If installation fails, preserve the log and compare installed versions to the lock. If text does not fit, edit the brief and create a new project; if video capture fails, check the Chromium path and installed FFmpeg. Never replace a failed render with a static poster and report it as a film.

Text is protected from axis and boundary strokes by opaque, font-measured backing planes. The renderer rejects unprotected line/text intersections. These are fixed-palette projects: changing CSS externally after playback or dynamically replacing the palette is outside the tested contract; selected markers may retain an inline fill after seeking back to zero. Pixel/computed-state seeking does not imply identical raw DOM attributes.