← All videos

1280×720 · 16:9 landscape HyperFrames HyperFrames + GSAP
Run log
ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final2
Render time25.1s (final render)
Format1280×720 · 16:9 landscape
Published2026-11-02
What broke (and the fix)
  • First cut closed the territory polygon at an interior vertical line, so the shaded control zone read as a floating rectangle pasted on the map. The territory now runs off the frame edge, the way the documentary maps it models actually shade a front.
  • Accepted check warnings: the closing caption's hold and the nested-div timeline rows — the checker reported 0 errors on the final build.
Original prompt Tested

Frontline advance animation — HyperFrames prompt (morphing front, territory, date clock)

by MotionPrompts (own run)
Explainermaps

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> Build a 1280x720, 12-second frontline advance map in HyperFrames + GSAP: a fictional battle on a real regional map (Natural Earth country geometry) where a bold frontline MORPHS eastward through four dated states — the territory behind it shades in the accent colour, three attack-axis arrows draw at the start line, an OPERATION CLOCK flips DAY 1 → DAY 8 → DAY 15 → DAY 21 at the phase boundaries, and every town flips to a "TAKEN" tag as the front passes it. 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 BATTLE" and the footer reads "FICTIONAL BATTLE — ILLUSTRATIVE SAMPLE — SWAP IN YOUR OWN FRONT, DATES + STATS" for the whole film. Operation name (title): Operation Emberline Stat callouts (value — label, three of them): 3 — attack axes, 86 KM — deepest advance, 21 — days Banned: stock map imagery, extra colours, real battles, real units or any real conflict presented as fact — the operation, towns, dates and numbers are invented sample content. </direction> <structure> 0.0-0.7s: orange kicker "FRONTLINE ADVANCE MAP — FICTIONAL BATTLE", 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 white frontline and its accent glow on the start line, the shaded territory behind it running off the frame edge, and three town markers with their labels in open ground. 3.0-4.9s (DAY 1 → DAY 8): the front morphs to its second state; the three attack arrows draw in along the advance corridor; the axes chip lands. 5.3-7.2s (→ DAY 15): the front morphs again; the first town flips accent with its TAKEN tag as the line passes it; arrows pulse. 7.6-9.9s (→ DAY 21): the final, deepest morph; the remaining towns are taken in sequence; the advance and days chips land as the clock settles on DAY 21. 10.2-12.0s: the closing caption "ONE FRONTLINE · THREE WEEKS · NO STOCK MAPS" sits under the chips; hold the finished front, everything readable. </structure> <build> Map data: countries from world-atlas (Natural Earth), re-projected into one tight sector window. The front is a smoothed polyline through six control points; all four dated states are generated by the SAME smoothing function with per-point eastward offsets, so every state has identical path structure — that is what lets GSAP morph attr d cleanly. The territory polygon is the front path plus a run to the frame's edge corners (the shaded zone must bleed off-frame; closing it at an interior line makes it read as a floating rectangle). Three layers morph in sync on identical tweens: territory fill (accent at 16% opacity), a wide accent glow stroke, and the white frontline on top. Town captures are timeline calls timed from the geometry — each fires when the morphing front actually crosses the town's longitude at its latitude band. Clock swaps are timeline calls at the phase boundaries. One paused GSAP timeline registered as window.__timelines["main"]. </build>

Use this prompt

Path morphing only works when every state is built by the same code path — same command count, same structure — so generate the front's dated states from one smoothing function with per-point offsets, never hand-drawn variants. And time the town captures from the geometry (when the front's x crosses the town at its latitude), not by eye: the sync is what makes it feel tracked instead of decorated.

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
Unit tracking map — HyperFrames prompt (tank units, phases, objectives)
Unit tracking map — HyperFrames prompt (tank units, phases, objectives)
HyperFrames·16:9 landscape Tested