---
name: coordinate-field
description: Make editable films that place recognizable symbols on two continuous dimensions.
version: 1.0.1
---

# Coordinate Field

Turn a small measured comparison into a 7.2-second, 1920 × 1080 film. Arrow axes establish the space, dimension names appear, then two to six symbols resolve in place. The settled diagram gives viewers time to compare. Two example subjects are observation equipment and museum activities.

This is a parameterized HTML/SVG renderer with a GSAP timeline and HyperFrames export. An agent authors the JSON brief; it is not a natural-language video generator. Every position is literal: `u=0` is left, `u=1` is right, `v=0` is bottom, `v=1` is top. Axis intersection represents `(0.5,0.5)`.

## Run

With Node.js 22+, a Chromium browser and FFmpeg available:

```sh
cp assets/package-lock.json package-lock.json
npm ci --ignore-scripts
node scripts/compose.mjs brief.json project en
npx --no-install hyperframes inspect project --json
npx --no-install hyperframes render project --output film.mp4 --fps 30 --quality high --strict --workers 1
```

Set `PUPPETEER_EXECUTABLE_PATH` to an installed Chromium if your environment requires it. Use a fresh destination directory. The final positional argument accepts `en`, `zh-CN` or `zh`; other values fall back to English. It controls command messages and document language, not translation of supplied content.

## Example input

```json
{
  "title": "Choose an observation setup",
  "note": "Illustrative positions; replace with your own measured dimensions.",
  "palette": "glacier",
  "dimensions": [["Fixed base", "Portable"], ["Broad view", "Fine detail"]],
  "marks": [
    {"name": "Fixed telescope", "symbol": "telescope", "u": 0.15, "v": 0.85},
    {"name": "Pocket optics", "symbol": "binoculars", "u": 0.8, "v": 0.2}
  ]
}
```

Output includes editable `index.html`, input `brief.json`, `project.json`, local runtime assets and HyperFrames configuration. `glacier` and `plum` are supported palettes. Symbols: telescope, binoculars, eye, dish, sound, sculpture, stage, hands, star, wave. No photos or people are simulated by these diagram symbols.

## Authoring and checks

See `references/authoring.md` for constraints and verification. Short names improve legibility. Do not use position as evidence of a real-world claim unless the brief supplies valid data. Values must stay within [0,1]; two to six marks are supported. The generator rejects close positions rather than distorting data. Check any long text visually because glyph width varies.

No network service, credential, model call or payment is required after installation. Fonts and GSAP are local licensed resources in `assets`. HyperFrames is installed at its pinned version. Films are intentionally silent; no soundtrack or listening acceptance is implied. This command-line workflow does not provide an online hosted endpoint.

## FAQ

- Can I use Chinese? Yes; bundled Noto Sans SC covers the demonstrated CJK brief. Unsupported characters still require inspection.
- Can I move a crowded symbol? Change its input only when the new coordinate is truthful. Otherwise simplify the brief.
- Can I use arbitrary art? This version offers ten editable vector symbols. New symbols require authoring and revalidation.
- Is the output a ranking? No. Two independent dimensions describe a comparison; the brief defines their meaning.