---
name: chapter-flip
description: Render an editorial chapter locator with independently flipping 3D tiles, a moving oversized plane, selected chapter hold and mosaic handoff to local video.
version: 1.0.2
category: video
delivery: download-only
---

# Chapter Flip

This is a parameterized HTML/CSS + GSAP composition rendered with HyperFrames, not arbitrary prompt-to-film automation. Read [direction](references/direction.md) and [provenance](references/runtime.md).

Use for a short chapter transition. Author 1–6 concise chapter labels (up to 22 characters each), zero-based `focusIndex`, `sectionMark` (up to 28 characters), and optionally one short `badges` entry per chapter. Select a meaningful symbol for each phase. Avoid redundant wording. Use English by default; Chinese automatically uses bundled Smiley Sans with Noto Sans SC fallback. Supply `--zh-font noto-sans-sc` or `--font /path/font.woff2` if needed.

Install Node >=22, FFmpeg/ffprobe, Chrome compatible with HyperFrames, then run `npm ci --ignore-scripts` inside this Skill. HyperFrames may need `npx hyperframes browser install` depending on host setup; consult its CLI help. No API keys or paid generation are needed.

Create a brief JSON:

```json
{"chapterNames":["Prepare","Build","Review"],"focusIndex":1,"sectionMark":"CHAPTER 02","badges":["○","+","✓"]}
```

Supply a local video covering at least 6.8 seconds. For a presenter handoff, supply an appropriately licensed real presenter take. This Skill never manufactures or substitutes a presenter. Video playback starts at composition time zero; its audio is muted.

```sh
node scripts/create.mjs --out /absolute/project --data /absolute/brief.json --media /absolute/video.mp4 --style linen-gold
node scripts/render.mjs /absolute/project /absolute/film.mp4
```

Palettes: `linen-gold`, `forest-mint`, `clay-coral`, `slate-silver`. Dark styles retain a sparse vertical paper grain. Optional `--overrides /absolute/colors.json` accepts semantic keys `bg,surface,ink,muted,accent,accentInk,rule`, each a six-digit hex color. Check contrast after overrides. Projects copy all runtime assets locally and remain editable (`index.html`, `brief.json`, `build.json`, assets).

Keep 1920×1080, 30fps and 6.8 seconds. Do not replace the separate Y-axis tile wave or two-axis camera travel with zooms. The active tile becomes face-on before the reading interval; the short label appears above it. Keep the double edge, static reading hold, 24-piece return mask and background video time alignment. See the exact beats in references.

Run HyperFrames check (lint, runtime validation and layout inspect), then inspect encoded video at native resolution and browser 1× playback. Dense-sample the flip wave and 4.75–5.48s mosaic. Check selected label bounds, contrast, deterministic out-of-order seek, media alignment, input boundaries and package isolation. Intentional off-frame neighboring tiles do not excuse a clipped selected chapter.

Generic ZIP excludes example films and artwork. Each new brief needs its own local video and rights/provenance record. Novel layouts, longer duration or more than six chapterNames require authoring and new validation. No publication step is included.

Human CLI diagnostics default to English. Add `--lang zh-CN` (`zh` is an alias) for Chinese diagnostics; unsupported locales use English. JSON keys, tool flags and paths remain stable.