CreatorMotion · Target Overrun

Show a result reaching its goal and continuing beyond it. The nine-second scene fills to a fixed 100% marker, adds a patterned excess segment, and holds the final completion percentage beside the track. Supply the achieved value and target in the same unit; the animation calculates their ratio without deciding whether exceeding the target is desirable.

What you get

  • A local generator, editable HyperFrames scene and documented motion/review instructions. Generate and render a target-comparison segment from your own figures; the package does not measure delivery or confirm an achievement.
  • Editable label, value, target and unit inputs. The large number is value divided by target, multiplied by 100 and displayed to one decimal place; the supporting sentence retains the raw quantities and their unit.
  • Two coordinated phases: ordinary progress from one second to 4.10 seconds, then the excess build through 5.35 seconds. A goal marker stays visible, a hatched treatment separates the overrun, and an explanatory sentence enters at six seconds. The bar geometry scales to fit the supplied excess.
  • 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

Name what the target represents before celebrating the overrun. Explain the raw value as well as the normalized completion percentage, and distinguish “118% of target” from “118% above target.”

Good fit

  • A creator explaining a measured result that has exceeded a clearly defined positive target.
  • A short teaching passage where the difference between reaching a threshold and going beyond it is the central point.
  • A series of goal comparisons that needs consistent typography, ratio logic and a distinct overrun treatment.

Not for

  • Zero or negative targets, negative achieved quantities, or presenting the final completion percentage as percentage growth.
  • Live progress tracking, automatic target setting, performance verification or a conclusion that every overrun is a success.
  • Automatic editing of a full production, generation of missing presenter footage or music, or copying another creator’s identity and source materials.

How to use

You say/creatormotion-comparison-target-overrun Turn my supplied explanation into a white-yellow B-roll scene using the Target Overrun effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare label, achieved value, a positive target and unit in JSON. Use the same measurement basis for value and target. Replace the illustrative 118-against-100 example with figures you can substantiate; an above-target value preserves this effect’s defining threshold crossing.

  2. Check the arithmetic separately. For value 118 and target 100, the counter ends at 118.0% of target, which is 18% above target. For 59 against 50 it also ends at 118.0%; unit labels the raw amounts rather than changing that calculation.

  3. Keep the label and supporting unit concise. Very large ratios leave a short target portion and can squeeze the goal annotation even though total bar length fits the scene. No presenter, alpha matte or raster image is used; the excess pattern is editable styling.

  4. From the extracted package, prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json --style white-yellow, substituting another documented palette if wanted. Read the motion specification and image policy before adapting the scene; use semantic --overrides for deliberate style changes.

  5. Inspect the editable project at entry, each motion handoff and final hold, then render with the command printed by the generator. Check the resulting frames for text collisions, correct numbers and readable contrast. Keep at least 1.2 seconds for the final reading when editing, and compare all four palettes with identical content after structural changes. Narration, music and assembly into a longer film remain separate work. Inspect the fixed goal line, both fill/counter phases and the final supporting sentence. Never lengthen the overrun independently of the supplied ratio to make a stronger visual claim. Check the narrative too: exceeding a budget or capacity limit may be undesirable, despite the delivery wording in the current supporting sentence.

Requirements and costs

You bring
label: provide your own content or retain the illustrative default. · value: provide your own content or retain the illustrative default. · target: provide your own content or retain the illustrative default. · unit: 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