CreatorMotion · Phone Completion Scale

Show a mobile checklist reaching a prepared completion state, then let the phone recede beside the speaker. Rows and checks reveal in order; the action wording changes before the whole device scales back around its lower anchor. This 6.8-second scene illustrates readiness with supplied text, without completing tasks or checking the state of a real application.

What you get

  • A local generator, editable HyperFrames phone/presenter shot and motion/review instructions for a 1920×1080, 30 fps segment. Generate and render a demonstration using your own content and continuous local footage.
  • phoneTitle, one to four steps, actionLabel and completeLabel. A required mobile-screen raster slot has a bundled default; checklist rows and action text are editable overlays separate from the background image.
  • Ordered row/check reveals, action wording replacement from 2.70 seconds, a later supporting completion note and device scale-back from 3.72 to 4.50 seconds. The result remains visible in the smaller phone rather than being replaced by an unrelated success screen.
  • Four styles keep the same data and choreography: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange), and Black & White (midnight-ice). Semantic style overrides are supported; check contrast after changing them. Dark canvases use a fine grid. Local fonts include Inter, IBM Plex Mono for measurements and ordinals, Smiley Sans and Noto Sans SC. Chinese text selects Smiley Sans automatically, including accompanying Latin text; --zh-font noto-sans-sc selects Noto Sans SC, while --font takes precedence for a supplied font.

Before you choose

Use the final wording to describe exactly what is ready, and keep that statement separate from actual task completion. The shrinking device should give the audience room to understand the result, not hide unreadable checklist content.

Good fit

  • A creator explaining a compact preparation flow and its intended ready-to-begin state.
  • A teaching passage where completion-before-scale-back provides a clear change of emphasis beside a speaker.
  • A series with consistent checklist overlays, phone geometry and readable completion wording.

Not for

  • Checking whether tasks are actually complete, triggering an app action or validating readiness.
  • Long checklists, arbitrary interactive phone controls or automatically changing text embedded in the raster screen.
  • Automatic full-film editing, generation of missing presenter footage or soundtrack, or copying another creator’s identity and interface materials.

How to use

You say/creatormotion-split-phone-scale Turn my supplied explanation into a white-yellow B-roll scene using the Phone Completion Scale effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare phoneTitle, one to four concise steps, actionLabel and completeLabel. Write the intended readiness state accurately; the scene’s check marks and button change are predetermined animation, not observations of work being done.

  2. Supply a continuous local presenter take at least 6.8 seconds long through --media. It is muted and zoomed into the adjacent region, so inspect framing against both the initial oversized phone and final smaller state. Never loop a shorter recording. This scene uses no alpha matte.

  3. Reuse mobile-screen or replace that exact slot through --images MAP.json, with relative paths resolved beside the map. The raster fills the phone behind editable header, steps and action overlays. Use material appropriate to the story and follow the image policy; the default is illustrative.

  4. Prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. From the extracted package run node scripts/create.mjs --out /absolute/PROJECT --data /absolute/CONTENT.json --style white-yellow --media /absolute/PRESENTER.mp4. Use another documented palette or semantic --overrides as needed. Read the motion specification, DESIGN.md and image policy before adapting materials.

  5. Run the generated project’s lint, validate and inspect checks, then render with the printed command. Inspect actual MP4 frames at entry, every focus change and the final reading hold for seams, clipping, contrast and media overlap. Keep essential text and interface targets readable; compare all four palettes with identical content after module changes. Narration is separate, and a silent preview does not establish audio synchronization. Inspect every row/check pairing, the action-label change and the bottom-anchored device reduction in actual MP4 frames. Keep the completed text readable after scaling and check four-row layouts for crowding. The fixed supporting note Everything is in place. should also match your intended meaning.

Requirements and costs

You bring
phoneTitle: provide your own content or retain the illustrative default. · steps: provide your own content or retain the illustrative default. · actionLabel: provide your own content or retain the illustrative default. · completeLabel: 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

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills