Move from a headline percentage to the interface details intended to support it. A ring and number build over a moving screenshot, then clear away so selected regions can be framed in place. This ten-second scene visualizes a metric and evidence relationship you supply; it does not read the screenshot or calculate whether the metric is justified.
What you get
A local generator, editable HyperFrames interface/metric shot and motion/review instructions for a 1920×1080, 30 fps segment. Generate and render the sequence from your screenshot, percentage and region coordinates.
interface, metric from zero to 100, metricLabel, cameraTarget and detailRegions. Rectangles use normalized [x,y,width,height] coordinates within the 1600×780 interface plane. The screenshot is required, with bundled illustrative material available.
One coordinated camera move from 0.90 seconds, a metric overlay/ring/count, overlay removal from 4.30 seconds and subsequent detail-frame reveals. The numeric build finishes before the camera settles and the later frames stay attached to their interface plane.
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
Choose details that genuinely explain the headline metric, and keep the calculation traceable outside the animation. A moving screenshot and precise boxes should aid inspection rather than imply that the claimed percentage was automatically verified.
Good fit
A creator explaining a prepared percentage before directing attention to a few specific interface details.
A teaching passage where an initial summary should clear out of the way for a closer evidence reading.
A series using consistent metric overlays, camera framing and detail-region annotations.
Not for
Extracting or verifying a metric from an image, automatically detecting supporting regions or proving a claimed completion rate.
Automatically fitting any target rectangle as a precise crop, arbitrary screenshot replacement without recalibration or assuming every region remains visible after zoom.
Automatic full-film editing, generated presenter footage or music, or copying another creator’s identity and material.
How to use
You say/creatormotion-spotlight-metric-to-detail Turn my supplied explanation into a white-yellow B-roll scene using the Metric to Interface Detail effect. Use the text, data and media I provide, and ask for any required input that is missing.
Choose interface, a percentage metric, metricLabel and a compact set of detailRegions. Calculate and substantiate the percentage separately; the default 100/Collection reviewed example is illustrative. Update the image, metric and coordinates together.
Set cameraTarget and detailRegions as normalized rectangles within the interface plane. Use positive target width and inspect the actual destination: zoom is capped at 1.75 and based on target width, while both dimensions determine its center. It is not a general fit-to-rectangle algorithm.
Reuse the bundled interface image or replace its named slot through --images MAP.json, using paths relative to the map. Despite older optional-screenshot wording, requiredImage makes a raster mandatory. Account for image fit and any margins when calibrating regions. No presenter or matte is used.
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.
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 camera travel, the ring/count agreement, overlay removal and each frame against the screenshot in actual MP4 frames. Detail borders reveal as scaled/opacity entrances rather than a stroke drawing. Keep at least 1.2 seconds of final reading after edits and check that essential evidence survives the crop.
Requirements and costs
You bring
interface: provide your own content or retain the illustrative default. · metric: provide your own content or retain the illustrative default. · metricLabel: provide your own content or retain the illustrative default. · cameraTarget: provide your own content or retain the illustrative default. · detailRegions: 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. The five documented fields are JSON inputs, with four palettes and semantic overrides. Metric and region coordinates are supplied content rather than values derived from the screenshot.
No presenter footage is needed. A required interface raster has a bundled default and can be replaced locally. No alpha matte is used here.
Yes. Preserve summary overlay, coordinated camera move, overlay clearance and detail emphasis. Re-render after screenshot or rectangle changes and inspect both transition and settled frames.
No. metric is a separate input. The animation counts toward that value but performs no screenshot analysis or completion audit.
Not necessarily. The code derives zoom from width with a cap and centers on the rectangle; height does not independently set the fit. Review the resulting crop with your actual image.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.