---
name: whole-to-units
description: Build an editable visual comparison where one photographed subject becomes an anchor beside a counted collection of image studies.
version: 1.0.8
category: video
---

# Whole to Units

A parameterized HTML composition generator for concise visual comparisons. Supply a brief and licensed local raster images. GSAP positions a prominent overview into its final anchor before introducing the relationship and the individually numbered collection. HyperFrames renders the resulting editable project at 1920 × 1080, 30 fps, for 8.4 seconds.

Use this for a unified object versus fragments, a collection versus details, or a visual inventory. A relation symbol expresses the brief's intended claim; verify its meaning rather than inferring a factual equivalence from the animation.

1. Use Node.js 22 and run `npm ci` inside this folder. Versions are locked. The initial dependency installation needs registry access; generated projects use local fonts, images and GSAP.
2. Read [the brief contract](references/brief.md), prepare the JSON and acquire image rights. Media files are deliberately excluded from this reusable download.
3. Run `node scripts/compose.mjs /absolute/brief.json /absolute/project fern`. Palettes are `fern`, `porcelain`, `copper`, and `carbon`.
4. Render with `node scripts/render.mjs /absolute/project /absolute/film.mp4`. Rendering uses one worker. Chromium and FFmpeg may need their initial HyperFrames setup downloads.
5. Inspect the large image, contraction, first and last unit, count, labels and final hold. Check a backward seek to zero and both sides of each handoff. Use a new subject and image set for each demonstration.

The generated HTML, local assets, brief and render record remain editable. The input supports 1–16 image pieces. This is a bounded comparison layout, requiring author-selected images and copy; it does not interpret arbitrary prompts or generate imagery. Inputs are raster JPEG, PNG and WebP only; video subjects are unsupported. It produces silent video. Audio editing and mixing require a separate workflow if the brief asks for sound.

See [motion and inspection](references/motion.md) for timing and [dependency scope](references/dependencies.md) before installation. Preserve supplied third-party font notices when sharing projects.