---
name: loop-story
version: 0.1.2
description: Create an editable short loop-explanation animation where stages build around an ellipse, the final connection closes the loop, and confirmation appears afterward. Use for cyclic workflows, learning or material cycles rather than linear pipelines.
category: video
delivery: download-only
---

# Loop Story

Create a local HTML/SVG/GSAP composition and render it through HyperFrames. This is a parameterized animation module, not a full launch-film director. English labels, 3–5 nodes, four palettes and a 7.2-second minimum are supported. Five nodes extend duration to preserve the final reading hold.

## Create

Write a project-local JSON file with `nodes` (3–5 short English labels, at most 24 characters each), optional `title`, optional `confirmation`, and `palette` (`chalk`, `carbon`, `clay`, `mono`). For example, `{"nodes":["Notice","Try","Review"],"palette":"chalk"}`.

```sh
node <skill>/scripts/create.mjs --data content.json --out my-loop
cd my-loop
npm install
npm run setup
npm run check
npm run preview
npm run render
```

Node.js 22+, FFmpeg and a local Chromium-compatible HyperFrames environment are required. Installed runtime versions are GSAP 3.14.2 and HyperFrames 0.8.159. No model credentials or paid calls are needed. The generator refuses to overwrite an existing project. Use a new directory for each iteration and retain the dependency lockfile produced by npm.

## Preserve the mechanism

The first node appears, an outgoing arc draws, the next node resolves, and the process repeats. The last arc is stronger and changes an open route into a closed loop. Only then may the center confirmation appear. Preserve at least two seconds of settled reading time. Do not replace this with a moving dot around an already complete ring or a set of fading cards.

The glyphs are generic vector process marks, not automatic semantic illustrations. For topics requiring distinct icon meaning, author and review replacement SVG glyphs in the project. Longer copy, more than five nodes, Chinese typography and presenter/image slots require extension; they are not validated capabilities of this release.

Read [runtime.md](references/runtime.md) for installation and runtime requirements. Titles and themes change through data; example content and rendered videos stay outside the package.

## Verify and deliver

Inspect the rendered beginning, each arc-to-node arrival, closure and final hold, including native-size text. A connector may intentionally be visible before its target node during the build; assess that against the mechanism rather than erasing the sequence to silence a generic layout hint. Report other genuine layout issues and fix them.

Deliver `film.mp4`, the editable project, `story.json`, `timing.json`, lockfile and actual check results. The default output is **silent**: this module does not define a music or sound workflow. If sound is requested, add project-local tracks with provenance and cue them to the actual timeline, then verify the encoded audio. Never describe silent output as a final mix.

Inspect unknown third-party code before use and isolate it when necessary. This generator writes local projects using included runtime resources. Dependency installation and browser tooling have their own network/runtime requirements. See [runtime.md](references/runtime.md).