diff --git a/docs/catalog/blocks/map-border-chase.mdx b/docs/catalog/blocks/map-border-chase.mdx index 60e62115ee..d7e801e047 100644 --- a/docs/catalog/blocks/map-border-chase.mdx +++ b/docs/catalog/blocks/map-border-chase.mdx @@ -1,6 +1,6 @@ --- title: "Map Border Chase" -description: "Alaska Highway reverse: static basemap plate with white border/feeder stroke draws and a black arrow riding the trunk to Dawson Creek tip. Seek-safe SVG/GSAP + MotionPath; PNG plate only (no MP4 wrapper). Inspired by Moving Image Archive animated-map clip map-border-chase - not affiliated; footage not included. QC_PASS 2026-09-21." +description: "A newsreel-style Alaska Highway map with white border and feeder routes drawing on as a black arrow follows the highway toward Dawson Creek." mode: "frame" --- @@ -12,9 +12,9 @@ import { InstallCommand } from "/snippets/install-command.jsx"; compositionId="map-border-chase" compositionSrc="compositions/map-border-chase.html" title="Map Border Chase" - description="Alaska Highway reverse: static basemap plate with white border/feeder stroke draws and a black arrow riding the trunk to Dawson Creek tip. Seek-safe SVG/GSAP + MotionPath; PNG plate only (no MP4 wrapper). Inspired by Moving Image Archive animated-map clip map-border-chase - not affiliated; footage not included. QC_PASS 2026-09-21." - variables={[{"id":"credit","type":"string","label":"Credit","default":"Moving Image Archive inspiration - Alaska Highway / map-border-chase - code recreation - not affiliated"}]} - meta={{"duration":8.942,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":96}} + description="A newsreel-style Alaska Highway map with white border and feeder routes drawing on as a black arrow follows the highway toward Dawson Creek." + variables={[]} + meta={{"duration":8.942,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":200}} attribution={{"author":"HeyGen","authorUrl":"https://hyperframes.heygen.com","path":"registry/blocks/map-border-chase","tags":["map","geography","animation","border","highway","alaska","newsreel","svg","mia"]}} hasCode rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/map-border-chase/map-border-chase.html" @@ -34,32 +34,89 @@ import { InstallCommand } from "/snippets/install-command.jsx"; @@ -75,13 +132,39 @@ import { InstallCommand } from "/snippets/install-command.jsx"; >
-
- - - -
-
-
-
- measured film hold plate - - - - - - - - - - - -
-
-
-
-
- Moving Image Archive, Network Broadcasting, 1934 - code recreation - not affiliated -
- + + + +
+
+
+
+ measured film hold plate + + + + + + + + + + + +
+
+
+
+
+ Moving Image Archive, Network Broadcasting, 1934 - code recreation - not affiliated +
+ -
- + tl.set(el, { attr: { r: 0 }, opacity: 0 }, delay); + tl.to(el, { attr: { r: pulse.rMax }, duration: pulse.expand, ease: EASE_R }, delay); + tl.to(el, { opacity: opPeak, duration: riseT, ease: "sine.out" }, delay); + tl.to(el, { opacity: 0, duration: fadeT, ease: EASE_OP }, delay + holdT); + }); + } + } + + window.__radarTimeline = tl; + window.__timelines = window.__timelines || {}; + window.__timelines["map-radar-rings"] = tl; + window.__duration = DUR; + window.__ready = true; + window.__bloom = DATA.ring.bloom; + window.__hubs = DATA.hubs.map((h) => h.id); + console.log( + "ready hubs", + DATA.hubs.map((h) => h.id), + "dur", + DUR, + "r_max", + RMAX_DEFAULT, + "hold", + HOLD, + "bloom", + DATA.ring.bloom, + "op", + OP0, + "fade0", + FADE.black_overlay_start, + "stroke", + STROKE, + "fadeEase", + FADE.ease, + "easePow", + DATA.ease_r_pow, + ); + } + main(); + +
+ ``` @@ -201,32 +402,6 @@ It runs for 3.5 seconds at 1920×1080. Paste this into your composition: Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. -## Change how it looks - -Set these CSS variables on the block: - -- `undefined` - Credit. Defaults to `Moving Image Archive, Network Broadcasting, 1934 (clip bbdd60a1-a3f6-5d22-8953-3419f5a17afd; IA 0809_Network_Broadcasting_02_01_12_00) - code recreation - not affiliated`. - -## Variables - -Every one of these has a default, so the piece works untouched. Set the ones you -want to change on the element: - -| Variable | Default | Accepts | What it does | -| --- | --- | --- | --- | -| `credit` | `Moving Image Archive, Network Broadcasting, 1934 (clip bbdd60a1-a3f6-5d22-8953-3419f5a17afd; IA 0809_Network_Broadcasting_02_01_12_00) - code recreation - not affiliated` | string | | - -Set them with `data-variable-values` on the element that mounts it. These are the -defaults, so this behaves exactly like the preview above until you change one: - -```html wrap -
-``` - {/* hf:generated-footer */} Tagged `map` `geography` `animation` `radar` `rings` `newsreel` `svg` `mia`. diff --git a/docs/catalog/blocks/map-shipping-lanes.mdx b/docs/catalog/blocks/map-shipping-lanes.mdx index 990eea838a..ef8ce36229 100644 --- a/docs/catalog/blocks/map-shipping-lanes.mdx +++ b/docs/catalog/blocks/map-shipping-lanes.mdx @@ -1,6 +1,6 @@ --- title: "Map Shipping Lanes" -description: "Watershed topo plate with dam pop and white tunnel draw N-S (City Water Supply grammar). Seek-safe SVG/GSAP + still plate; no MP4 wrapper. Inspired by Moving Image Archive, City Water Supply, 1941 - not affiliated; code recreation. Declared ceilings: live 0-10s schematic stand-ins, film grain/gate weave, organic DEM vs plate sharpness, tunnel micro-breaks, on-screen credit hidden for judge fidelity." +description: "A vintage water-supply sequence with a topographic watershed map, a dam reveal, and a white tunnel route drawing from north to south." mode: "frame" --- @@ -12,9 +12,9 @@ import { InstallCommand } from "/snippets/install-command.jsx"; compositionId="map-shipping-lanes" compositionSrc="compositions/map-shipping-lanes.html" title="Map Shipping Lanes" - description="Watershed topo plate with dam pop and white tunnel draw N-S (City Water Supply grammar). Seek-safe SVG/GSAP + still plate; no MP4 wrapper. Inspired by Moving Image Archive, City Water Supply, 1941 - not affiliated; code recreation. Declared ceilings: live 0-10s schematic stand-ins, film grain/gate weave, organic DEM vs plate sharpness, tunnel micro-breaks, on-screen credit hidden for judge fidelity." - variables={[{"id":"credit","type":"string","label":"Credit","default":"Moving Image Archive, City Water Supply, 1941 - code recreation - not affiliated"}]} - meta={{"duration":34,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":280}} + description="A vintage water-supply sequence with a topographic watershed map, a dam reveal, and a white tunnel route drawing from north to south." + variables={[]} + meta={{"duration":34,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":297}} attribution={{"author":"HeyGen","authorUrl":"https://hyperframes.heygen.com","path":"registry/blocks/map-shipping-lanes","tags":["map","geography","animation","shipping","lanes","water","tunnel","newsreel","svg","mia"]}} hasCode rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/map-shipping-lanes/map-shipping-lanes.html" @@ -117,12 +117,22 @@ import { InstallCommand } from "/snippets/install-command.jsx"; - + - + @@ -142,7 +152,12 @@ import { InstallCommand } from "/snippets/install-command.jsx"; seed="7" result="noise" /> - + @@ -211,7 +226,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; - +
- +