← All videos

1280×720 · 16:9 landscape HyperFrames HyperFrames + GSAP
Run log
ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final3
Render time24.0s (final render)
Format1280×720 · 16:9 landscape
Published2026-11-02
What broke (and the fix)
  • First framing drew the whole region, so the entire operation happened in one corner: the checker raised real text-overlap and contrast errors and the end frame was a knot of objective labels, SECURED tags and unit names. Fixed by cropping into the sector, staggering the objective labels into open ground, brightening the geography labels to #7d7d7d, fading the unit name tags out for the final phase, and lifting one objective label off a passing unit's track.
  • Accepted check warnings: the unit name tags are 12.5px SVG labels (map furniture that retires before the dense phase), and the closing caption holds about 1.5s by the checker's reading-speed rule over an already-readable end state.
Original prompt Tested

Unit tracking map — HyperFrames prompt (tank units, phases, objectives)

by MotionPrompts (own run)
Explainermaps

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> Build a 1280x720, 11-second unit tracking map in HyperFrames + GSAP: a fictional armored exercise on a real regional map (Natural Earth country geometry) where three tank unit symbols advance in two phases along dashed planned tracks — a solid accent trail draws behind each unit, an OPERATION CLOCK ticks DAY 1 → DAY 2 → DAY 3 at the phase boundaries, and every objective ring turns accent with a "SECURED" tag the frame its unit arrives. House style: background #0a0a0a, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, NO webfonts, no gradients, no glows, no 3D. It is fiction and says so: the kicker carries "FICTIONAL EXERCISE" and the footer reads "FICTIONAL EXERCISE — ILLUSTRATIVE SAMPLE — SWAP IN YOUR OWN UNITS, OBJECTIVES + STATS" for the whole film. Operation name (title): Operation Dustline Stat callouts (value — label, three of them): 3 — armored units, 142 KM — deepest advance, 3 — objectives Banned: stock map imagery, extra colours, real operations, real units or any real conflict presented as fact — every name, objective and number here is invented sample content. </direction> <structure> 0.0-0.7s: orange kicker "UNIT TRACKING MAP — FICTIONAL EXERCISE", the operation title and the DAY 1 clock settle; footer fades in. 0.7-1.7s: the sector map fades in — land, borders, faint graticule, country names — with the three unit symbols on their start line, dashed planned tracks running ahead of each, and white objective rings with their labels placed in open ground. 3.2-5.4s (DAY 1): phase one — all three units advance to the phase line, staggered, each drawing its solid trail over the dashed plan; the units chip lands. 5.6s: the clock flips to DAY 2 and the unit name tags retire (identity is established; the endgame stays clean). 5.9-8.9s (DAY 2 → DAY 3 at 8.1s): phase two — units advance to their objectives; on each arrival the objective ring and dot turn accent and its SECURED tag appears; the remaining stat chips land. 9.4-11.0s: the closing caption "EVERY UNIT · EVERY OBJECTIVE · NO STOCK MAPS" sits under the chips; hold the finished sector, everything readable. </structure> <build> Map data: countries from world-atlas (Natural Earth), re-projected into ONE tight sector window — frame the operation, not the continent, or the labels collide where the action clusters. Each unit rides its own track path (Catmull-Rom through start → phase-line → objective) driven by its own progress proxy; the solid trail is the same path re-drawn from that proxy (dashoffset), so trail and unit can never disagree. Captures fire from the proxy at t = 1 inside the same update that moves the unit. Unit symbols are drawn glyphs (hull rectangle + inner rectangle + barrel line) rotated to the track tangent, forward = +X. Objective and state labels are HTML overlays in screen space, staggered into open ground away from arrival positions; anything grey on the dark land fill needs #7d7d7d or brighter to clear contrast. One paused GSAP timeline registered as window.__timelines["main"]; the clock swaps are timeline calls at the phase boundaries. </build>

Use this prompt

Frame the operation, not the continent: the first cut drew the whole region and the entire fight happened in one corner as a knot of labels. The sector crop is what makes the genre read. Second lesson: plan the label layer for the END state — unit name tags are essential at the start line and pure collision at the objectives, so they retire when phase two begins.

Related videos

Animated map explainer — HyperFrames prompt (world map, route draw + country highlight)
Animated map explainer — HyperFrames prompt (world map, route draw + country highlight)
HyperFrames·16:9 landscape Tested
Flight tracking map — HyperFrames prompt (animated plane route with live-tracked arc)
Flight tracking map — HyperFrames prompt (animated plane route with live-tracked arc)
HyperFrames·16:9 landscape Tested
Convoy tracking map — HyperFrames prompt (truck route with synced checkpoints)
Convoy tracking map — HyperFrames prompt (truck route with synced checkpoints)
HyperFrames·16:9 landscape Tested
Frontline advance animation — HyperFrames prompt (morphing front, territory, date clock)
Frontline advance animation — HyperFrames prompt (morphing front, territory, date clock)
HyperFrames·16:9 landscape Tested