---
name: ratio-span
description: Explain a pair of quantities through sequential bar growth, travelling counts and a calculated multiple in an editable video.
version: 1.0.1
category: video
delivery: local
---

# Ratio Span

Use for two positive measurements of the same kind. The output is a parameterized diagram renderer: a supplied JSON brief controls text and quantities, while the composition follows a nine-second reading sequence.

Read [the brief contract](references/brief.md), [motion guidance](references/direction.md) and [runtime notes](references/runtime.md).

1. Install Node.js 22 and run `npm ci` in this directory. Dependencies are pinned in the lockfile; initial installation needs npm access. Fonts and the browser GSAP build are bundled.
2. Write a JSON brief that names the measurements and their context. Keep claims factual or explicitly mark them illustrative.
3. Run `node scripts/compose.mjs brief.json project tide`. Choose `tide`, `mulberry`, `clay` or `graphite`.
4. Run `node scripts/render.mjs project film.mp4`. The wrapper runs HyperFrames lint and strict rendering with one worker. Review all beats and the final reading hold.

The project contains editable HTML, SVG, GSAP timing, its resolved brief and resource files. A renderer does not research quantities or write a narrative from a natural-language request. Its fixed choreography needs author input for the brief.

The shared horizontal scale is linear. Each count stays adjacent to its changing endpoint. After both settle, a bracket draws and the quotient of the larger measurement over the smaller appears. The default output is silent; no audio editor, music or synthesis is included. See runtime notes for dependency and local-use limits.