Can I change the words and colors?

Yes. Edit tasks and screenTitle in the content JSON, select one of the four palettes, or supply semantic style overrides. Keep labels short enough to read alongside the phone; more than four task records will not add visible rows.

Do I need to supply footage?

Not for an illustrative layout using the included static screen. For a real demonstration, supply your own recording and matching action timestamps. Presenter footage is needed only if you enable the optional inset; bundled imagery is not evidence of a real workflow.

Can I revise the motion?

The project is editable. Preserve the stable checklist and action-driven completion states; replacing them with staggered row entrances changes what the animation explains. Re-render after changing timing or layout.

Will it synchronize checks automatically?

No. The at values are supplied by you. Compare the rendered checks with the recording, and allow viewers enough time to recognize each completed action.

What should I check before using the result?

Watch all seven seconds, verify the screen asset is the intended one, check phone-frame readability and confirm each action time. Treat any default screen as a demonstration, and add narration or music in your separate edit.

CreatorMotion · Synchronized Action Checklist

Previews from the publisher

Let viewers see a task being completed and its checklist update on the same beat. This seven-second composition keeps a paper-style task list beside a phone-shaped media frame, so progress stays visible throughout the demonstration. You supply the recording and action times; the Skill does not infer completed actions from video.

What you get

The package contains a local generator, effect implementation, motion specification and visual review guidance. Running it creates an editable HyperFrames project; rendering that project produces a video segment rather than a complete edited production.
Up to four persistent checklist rows, a short screen title and timed check strokes beside a screenshot or recording. The default has three illustrative actions. Rows stay in place while their completion state changes, instead of appearing one by one.
A default 1920×1080, 30 fps landscape sequence with a settled opening, approximately 0.20-second check strokes and a quiet closing hold. Optional presenter footage can appear in a small round inset.
Choose White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange), or Black & White (midnight-ice). The palette changes the treatment while keeping the sequence consistent; semantic overrides need a fresh contrast check. Fonts are local: Inter for ordinary copy, IBM Plex Mono for measurements and ordinals, and Smiley Sans automatically for Chinese content, with Noto Sans SC available through --zh-font noto-sans-sc. Use --font for a supplied font; inspect wrapping again after any font change. Dark palettes include a fine static grid.

Before you choose

Choose this effect when completion is the point of the explanation. If the audience needs to inspect small interface controls, crop the recording deliberately or choose a larger screen layout rather than shrinking a desktop tutorial into the phone.

Good fit

A short tutorial that needs viewers to connect a visible action with a completed instruction, such as reviewing, choosing and saving.
A teaching passage with concise task labels and a phone-friendly screen view, rather than a dense full-desktop interface.
An instructional series that reuses the same palette and typography while changing the recording and checklist for each lesson.

Not for

Automatic recognition of actions or automatic editing of a long recording: each task needs a manually chosen at timestamp.
A long checklist or a demonstration whose useful screen detail becomes unreadable inside the phone frame. The current layout displays at most four tasks.
An automatically generated presenter performance, voiceover or music, or reuse of a reference creator’s identity and footage. Supply your own authorized material.

How to use

You say

/creatormotion-cards-action-checklist Turn my supplied explanation into a white-yellow B-roll scene using the Synchronized Action Checklist effect. Use the text, data and media I provide, and ask for any required input that is missing.

Choose one short demonstration and write tasks as label/at pairs, plus screenTitle. The default checks occur at 1.4, 3.1 and 4.8 seconds. The implementation clamps times to 0.16–5.8 seconds, so trim or retime the recording rather than expecting later actions to extend the film.
Provide your screen recording in the --images map under screen-recording, or change screenMediaKey to your chosen key. A local screenshot also works, but a still cannot demonstrate a real timed interaction. The bundled mobileScreen is illustrative. Keep the screen legible within the tall phone frame.
If you want the inset presenter, set presenter to true and supply --media with a continuous take covering the visible interval, up to 6.8 seconds in this composition. This is optional; the checklist and screen do not require a presenter. Read the image policy before replacing other materials.
Prepare Node.js 22+, FFmpeg and the documented HyperFrames CLI 0.8.30. From the installed package, run node scripts/create.mjs with --out for a new project directory and --data for your content JSON. Add --style for the palette, --images for chosen replacements, and --overrides for semantic styling. Image paths resolve relative to the image-map file; slots not replaced retain the bundled defaults.
Inspect the editable project, then use the pinned HyperFrames CLI to lint, validate and render at 1920×1080 and 30 fps. Watch the main transitions and the final reading hold in the rendered video; passing a structural check alone does not establish readable text or correct content. Assemble narration, music and other shots separately. Check each checkbox against the actual recording frame, including whether the action has really finished when the check appears.

Requirements and costs

You bring: Concise checklist items and a short screen title · For a real screen demonstration: your own screen recording and the timestamp of each checklist action · Optional presenter name and visual palette
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