Locate a chapter within a field of turning tiles, then return to the presenter. Individual icon cards rotate into view as the camera plane moves, a selected tile receives an edge cue and chapter label, and a mosaic clears the graphic to reveal your take. The 6.8-second sequence makes section selection visible without building an interactive menu.
What you get
A local generator, editable HyperFrames effect and motion/review instructions. Generate the 1920×1080 project and render a 30 fps segment with a chapter-grid opening and presenter handoff.
Up to six chapter names, a zero-based activeIndex and a chapterLabel. Each position uses a fixed symbol; the selected card receives accent styling, a double-edge cue and the label above it.
Independent vertical-axis tile flips alongside a two-axis camera move, followed by a reading hold. The mosaic return begins at 4.75 seconds and finishes at approximately 5.5 seconds, leaving the supplied presenter visible.
Four palettes preserve the sequence: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange) and Black & White (midnight-ice). Semantic overrides adapt styling; recheck contrast afterwards. Dark palettes have a fine static grid. Fonts are bundled locally: Inter, IBM Plex Mono for measurements/ordinals, Smiley Sans and Noto Sans SC. Chinese text automatically selects Smiley Sans, including Latin text in the same composition; --zh-font noto-sans-sc selects the plainer alternative and --font embeds your own face. Inspect line breaks after changes.
Before you choose
Use the grid to give viewers a sense of location in a small series. Keep chapter names short, choose symbols deliberately and align the presenter return with the next explanation; the visual selection alone does not establish a navigation system.
Good fit
A creator moving to one section of a small chapter set before continuing on camera.
A short lesson introduction with concise chapter names and a clearly identified active section.
A series using consistent icon-grid navigation, palette and typography between sections.
Not for
A clickable chapter menu, automatic section detection or semantic icon selection. The chapter names and active position are supplied inputs.
Generating presenter video, automatically aligning its spoken content or treating oversized background tiles as permission to crop the selected label.
Automatic long-form editing, generated narration or music, or copying a reference creator’s identity and footage.
How to use
You say/creatormotion-chapter-grid-flip Turn my supplied explanation into a white-yellow B-roll scene using the Chapter Grid Flip effect. Use the text, data and media I provide, and ask for any required input that is missing.
Provide one to six chapters, an integer activeIndex from zero to the last visible item, and chapterLabel. The sample selects the third chapter; replace it with the section you are actually introducing.
Check the position-based symbols—circle, arrow, check, repeat, diamond and plus—against your chapter wording. They do not change automatically with the names. The code centers the selected destination; review another activeIndex rather than assuming every copy length fits identically.
Supply a continuous 6.8-second presenter take through --media. It plays from timeline zero and is exposed by the final mosaic, so align the later visible portion with your narration. No separate alpha matte or raster image slot is required.
Prepare Node.js 22+, FFmpeg and the documented HyperFrames CLI 0.8.30. From the extracted package run node scripts/create.mjs --out PROJECT --data CONTENT.json --style white-yellow, adding --media for the effects that require a take. Optional --overrides changes semantic tokens. Read the motion specification and design reference before adapting the composition; keep generated assets local.
Lint, validate and inspect with the pinned HyperFrames CLI, then render at 1920×1080 and 30 fps using the command printed by the generator. Inspect real rendered frames at the opening, main change and ending for text bounds, contrast and media seams. Check all four palette examples if you change the effect implementation. Narration, music and assembly with other scenes remain separate work. Watch each tile turn, the selected label settle and the mosaic clear to the speaker. The oversized plane may extend outside the canvas intentionally, but the chosen tile and its label must remain readable in the settled frame.
Requirements and costs
You bring
chapters: provide your own content or retain the illustrative default. · activeIndex: provide your own content or retain the illustrative default. · chapterLabel: provide your own content or retain the illustrative default.
Dependencies
HyperFrames CLI 0.8.30 or compatible — required · Node.js 22 or newer — required · FFmpeg — required
Outside costs
Not collected yet
Tools used
HyperFrames
Publisher testing
v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
Yes. Supply chapters, activeIndex and chapterLabel in JSON, then choose a palette or semantic overrides. The six fixed symbols require implementation edits if different icons are needed.
Yes, a local presenter take covering the full 6.8-second composition supplies the final handoff. Generic generated-image defaults do not replace it, and this effect does not require a cutout matte.
Yes. Preserve separate vertical-axis card rotation, the moving plane, face-on selected card and mosaic return. A single whole-grid fade would remove the distinguishing movement.
Yes. The selected item determines the plane’s positioned destination as well as the accent and label. Use a valid integer referring to an existing visible chapter and inspect the result.
At composition time zero, behind the graphic. Choose or trim a take that makes sense when the mosaic reveals it later; the effect does not restart playback at the handoff.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.