mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-11 19:09:20 +00:00
fix(registry): align map metadata with supported controls
This commit is contained in:
Miguel Angel Simon Sierra
@@ -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";
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/MotionPathPlugin.min.js"></script>
|
||||
<style>
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #1a1a1a; overflow: hidden; }
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
overflow: hidden;
|
||||
}
|
||||
#root-map-border-chase {
|
||||
position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #1a1a1a;
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
#mbc-stage {
|
||||
position: absolute; left: 240px; top: 0; width: 1440px; height: 1080px;
|
||||
overflow: hidden; background: #c8c4bc;
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 0;
|
||||
width: 1440px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #c8c4bc;
|
||||
}
|
||||
#mbc-basemap {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
display: block;
|
||||
}
|
||||
#mbc-svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
#mbc-basemap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
|
||||
#mbc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.mbc-feeder {
|
||||
fill: none; stroke: #f2f2f2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
|
||||
opacity: 0.96; filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.4));
|
||||
fill: none;
|
||||
stroke: #f2f2f2;
|
||||
stroke-width: 2.6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
opacity: 0.96;
|
||||
filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
.mbc-feeder-main {
|
||||
stroke-width: 3.4;
|
||||
}
|
||||
.mbc-feeder-border {
|
||||
stroke-width: 2.2;
|
||||
stroke: #ffffff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
#mbc-arrow {
|
||||
fill: #0a0a0a;
|
||||
stroke: #ffffff;
|
||||
stroke-width: 0.8;
|
||||
opacity: 0;
|
||||
}
|
||||
.mbc-feeder-main { stroke-width: 3.4; }
|
||||
.mbc-feeder-border { stroke-width: 2.2; stroke: #ffffff; opacity: 0.9; }
|
||||
#mbc-arrow { fill: #0a0a0a; stroke: #ffffff; stroke-width: 0.8; opacity: 0; }
|
||||
#mbc-grain {
|
||||
position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.16;
|
||||
mix-blend-mode: overlay;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
|
||||
}
|
||||
#mbc-credit {
|
||||
position: absolute; right: 36px; bottom: 28px; color: rgba(236,236,236,0.35);
|
||||
font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none;
|
||||
position: absolute;
|
||||
right: 36px;
|
||||
bottom: 28px;
|
||||
color: rgba(236, 236, 236, 0.35);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -75,13 +132,39 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
>
|
||||
<div id="mbc-stage">
|
||||
<img id="mbc-basemap" src="assets/basemap-t0.png" alt="" width="1440" height="1080" />
|
||||
<svg id="mbc-svg" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path id="mbc-feeder-border" class="mbc-feeder mbc-feeder-border" d="M 420 392 L 450 388 L 480 385 L 510 382 L 540 380 L 570 378 L 600 376 L 630 374" />
|
||||
<path id="mbc-feeder-main" class="mbc-feeder mbc-feeder-main" d="M 560 430 L 545 410 L 530 390 L 510 370 L 490 350 L 470 335 L 450 320 L 430 310 L 410 302 L 390 296 L 370 292 L 350 290" />
|
||||
<path id="mbc-feeder-a" class="mbc-feeder" d="M 560 430 L 580 415 L 595 400 L 605 385 L 610 370" />
|
||||
<path id="mbc-feeder-b" class="mbc-feeder" d="M 530 390 L 510 400 L 490 415 L 470 430 L 455 445" />
|
||||
<svg
|
||||
id="mbc-svg"
|
||||
viewBox="0 0 640 480"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
id="mbc-feeder-border"
|
||||
class="mbc-feeder mbc-feeder-border"
|
||||
d="M 420 392 L 450 388 L 480 385 L 510 382 L 540 380 L 570 378 L 600 376 L 630 374"
|
||||
/>
|
||||
<path
|
||||
id="mbc-feeder-main"
|
||||
class="mbc-feeder mbc-feeder-main"
|
||||
d="M 560 430 L 545 410 L 530 390 L 510 370 L 490 350 L 470 335 L 450 320 L 430 310 L 410 302 L 390 296 L 370 292 L 350 290"
|
||||
/>
|
||||
<path
|
||||
id="mbc-feeder-a"
|
||||
class="mbc-feeder"
|
||||
d="M 560 430 L 580 415 L 595 400 L 605 385 L 610 370"
|
||||
/>
|
||||
<path
|
||||
id="mbc-feeder-b"
|
||||
class="mbc-feeder"
|
||||
d="M 530 390 L 510 400 L 490 415 L 470 430 L 455 445"
|
||||
/>
|
||||
<path id="mbc-feeder-c" class="mbc-feeder" d="M 510 370 L 525 355 L 545 345 L 565 338" />
|
||||
<path id="mbc-arrow-path" fill="none" stroke="none" d="M 560 430 L 545 410 L 530 390 L 510 370 L 490 350 L 470 335 L 450 320 L 430 310 L 410 302 L 390 296 L 350 290 L 365 278" />
|
||||
<path
|
||||
id="mbc-arrow-path"
|
||||
fill="none"
|
||||
stroke="none"
|
||||
d="M 560 430 L 545 410 L 530 390 L 510 370 L 490 350 L 470 335 L 450 320 L 430 310 L 410 302 L 390 296 L 350 290 L 365 278"
|
||||
/>
|
||||
<!-- arrowhead: tip at +x; MotionPath autoRotate aligns to path -->
|
||||
<polygon id="mbc-arrow" points="0,-8 26,0 0,8 -3,2.5 -3,-2.5" />
|
||||
</svg>
|
||||
@@ -91,11 +174,22 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
try { gsap.registerPlugin(MotionPathPlugin); } catch (e) { console.warn(e); }
|
||||
try {
|
||||
gsap.registerPlugin(MotionPathPlugin);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
window.__timelines = window.__timelines || {};
|
||||
var feeders = ["#mbc-feeder-border","#mbc-feeder-main","#mbc-feeder-a","#mbc-feeder-b","#mbc-feeder-c"];
|
||||
var feeders = [
|
||||
"#mbc-feeder-border",
|
||||
"#mbc-feeder-main",
|
||||
"#mbc-feeder-a",
|
||||
"#mbc-feeder-b",
|
||||
"#mbc-feeder-c",
|
||||
];
|
||||
feeders.forEach(function (sel) {
|
||||
var el = document.querySelector(sel); if (!el) return;
|
||||
var el = document.querySelector(sel);
|
||||
if (!el) return;
|
||||
var len = el.getTotalLength();
|
||||
gsap.set(el, { strokeDasharray: len, strokeDashoffset: len, opacity: 1 });
|
||||
});
|
||||
@@ -109,10 +203,20 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
tl.to("#mbc-feeder-b", { strokeDashoffset: 0, duration: 1.15, ease: "none" }, 1.25);
|
||||
tl.to("#mbc-feeder-c", { strokeDashoffset: 0, duration: 1.1, ease: "none" }, 1.35);
|
||||
tl.set("#mbc-arrow", { opacity: 1 }, 2.35);
|
||||
tl.to("#mbc-arrow", {
|
||||
duration: 2.05, ease: "none",
|
||||
motionPath: { path: "#mbc-arrow-path", align: "#mbc-arrow-path", alignOrigin: [0.12, 0.5], autoRotate: true }
|
||||
}, 2.4);
|
||||
tl.to(
|
||||
"#mbc-arrow",
|
||||
{
|
||||
duration: 2.05,
|
||||
ease: "none",
|
||||
motionPath: {
|
||||
path: "#mbc-arrow-path",
|
||||
align: "#mbc-arrow-path",
|
||||
alignOrigin: [0.12, 0.5],
|
||||
autoRotate: true,
|
||||
},
|
||||
},
|
||||
2.4,
|
||||
);
|
||||
tl.to({}, { duration: 0.01 }, 8.942);
|
||||
window.__timelines["map-border-chase"] = tl;
|
||||
})();
|
||||
@@ -152,32 +256,6 @@ It runs for 8.942 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 inspiration - Alaska Highway / map-border-chase - 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 inspiration - Alaska Highway / map-border-chase - 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
|
||||
<div
|
||||
data-composition-id="map-border-chase"
|
||||
data-composition-src="compositions/map-border-chase.html"
|
||||
data-variable-values='{"credit":"Moving Image Archive inspiration - Alaska Highway / map-border-chase - code recreation - not affiliated"}'
|
||||
></div>
|
||||
```
|
||||
|
||||
{/* hf:generated-footer */}
|
||||
|
||||
Tagged `map` `geography` `animation` `border` `highway` `alaska` `newsreel` `svg` `mia`.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Map Radar Rings"
|
||||
description: "Measured film hold-plate with soft-ink multi-hub concentric rings (pass8j-closer: 6 hubs incl NYC, sigma 0.62, stroke 1.48, expand 3.15s, pre-iris 3.5s). Seek-safe SVG/GSAP; PNG plate only (no MP4 wrapper). Inspired by Moving Image Archive, Network Broadcasting, 1934 - not affiliated; code recreation. QC_PASS (Lead + independent judge) 2026-09-21."
|
||||
description: "Soft concentric rings expand from six broadcast hubs across a vintage map, including New York City."
|
||||
mode: "frame"
|
||||
---
|
||||
|
||||
@@ -12,9 +12,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
compositionId="map-radar-rings"
|
||||
compositionSrc="compositions/map-radar-rings.html"
|
||||
title="Map Radar Rings"
|
||||
description="Measured film hold-plate with soft-ink multi-hub concentric rings (pass8j-closer: 6 hubs incl NYC, sigma 0.62, stroke 1.48, expand 3.15s, pre-iris 3.5s). Seek-safe SVG/GSAP; PNG plate only (no MP4 wrapper). Inspired by Moving Image Archive, Network Broadcasting, 1934 - not affiliated; code recreation. QC_PASS (Lead + independent judge) 2026-09-21."
|
||||
variables={[{"id":"credit","type":"string","label":"Credit","default":"Moving Image Archive, Network Broadcasting, 1934 (clip bbdd60a1-a3f6-5d22-8953-3419f5a17afd; IA 0809_Network_Broadcasting_02_01_12_00) - code recreation - not affiliated"}]}
|
||||
meta={{"duration":3.5,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":145}}
|
||||
description="Soft concentric rings expand from six broadcast hubs across a vintage map, including New York City."
|
||||
variables={[]}
|
||||
meta={{"duration":3.5,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":346}}
|
||||
attribution={{"author":"HeyGen","authorUrl":"https://hyperframes.heygen.com","path":"registry/blocks/map-radar-rings","tags":["map","geography","animation","radar","rings","newsreel","svg","mia"]}}
|
||||
hasCode
|
||||
rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/map-radar-rings/map-radar-rings.html"
|
||||
@@ -23,150 +23,351 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
<CatalogSlot slot="code">
|
||||
|
||||
```html map-radar-rings.html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>radar-rings - measured reverse (rings-only) soft-ink pass8j-closer</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,body{margin:0;background:#111;overflow:hidden}
|
||||
#stage{width:1920px;height:1080px;position:relative;background:#B8B8B8}
|
||||
#content{position:absolute;left:240px;top:0;width:1440px;height:1080px;overflow:hidden;background:#000}
|
||||
#mapRoot{position:absolute;inset:0;transform-origin:0 0;transform:scale(4.5);width:320px;height:240px}
|
||||
#plate{position:absolute;left:0;top:0;width:320px;height:240px;display:block}
|
||||
/* P1: uniform film-black plate mask - kills structured ghost map at t0 */
|
||||
#fade{position:absolute;inset:0;background:#0F0F0F;opacity:1;pointer-events:none;z-index:5}
|
||||
#rings{
|
||||
position:absolute;left:0;top:0;width:320px;height:240px;
|
||||
overflow:visible;pointer-events:none;
|
||||
/* P0: normal blend - kill screen additive neon stacking on overlaps */
|
||||
mix-blend-mode:normal;
|
||||
}
|
||||
/* Soft-ink - pass8j-closer: stroke 1.48; single σ0.62; op 0.50; NYC op_scale; thin luminous not fog */
|
||||
.ring{
|
||||
fill:none;stroke:#FFFFFF;stroke-width:1.48;opacity:0;
|
||||
stroke-linecap:round;stroke-linejoin:round;
|
||||
filter:url(#filmBloom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root-map-radar-rings"
|
||||
data-composition-id="map-radar-rings"
|
||||
data-start="0"
|
||||
data-duration="3.5"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div id="stage">
|
||||
<div id="content">
|
||||
<div id="mapRoot">
|
||||
<img id="plate" src="assets/hold-plate.png" width="320" height="240" alt="measured film hold plate"/>
|
||||
<svg id="rings" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="filmBloom" filterUnits="userSpaceOnUse" x="-60" y="-60" width="440" height="360"
|
||||
color-interpolation-filters="sRGB">
|
||||
<!-- pass8j-closer: single soft-ink σ0.62 - thin luminous stroke, no multi-σ/screen -->
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.62" result="soft"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="soft"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="fade"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mrr-credit" style="position:absolute;left:260px;bottom:28px;color:rgba(0,0,0,0.4);font:13px/1.3 ui-monospace,monospace;letter-spacing:0.04em;text-transform:uppercase;z-index:6">
|
||||
Moving Image Archive, Network Broadcasting, 1934 - code recreation - not affiliated
|
||||
</div>
|
||||
<script>
|
||||
const DATA = {"hubs":[{"id":"nyc","x":281,"y":82,"onset_rel":1.1,"r_max":17,"expand_s":3.15,"p":"measured","op_scale":1.7},{"id":"chicago","x":221,"y":94,"onset_rel":1.12,"r_max":17,"expand_s":3.15,"p":"measured"},{"id":"denver","x":109,"y":101,"onset_rel":1.06,"r_max":17,"expand_s":3.15,"op_scale":1.55,"p":"measured"},{"id":"kansas_city","x":167,"y":103,"onset_rel":1.08,"r_max":17,"expand_s":3.15,"op_scale":1.7,"p":"measured"},{"id":"nashville_area","x":220,"y":138,"onset_rel":1.2,"r_max":17,"expand_s":3.15,"p":"measured"},{"id":"atlanta","x":233,"y":140,"onset_rel":1.24,"r_max":17,"expand_s":3.15,"p":"measured"}],"ring":{"rings_per_pulse":2,"pulse_interval_s":0.75,"expand_duration_s":3.15,"r_max_px":17,"stroke_px":1.48,"intra_pulse_stagger_s":0.28,"color":"#FFFFFF","opacity":[0.5,0.0],"ease":"mildOut","opacity_ease":"power1.in","max_pulses":2,"p":"measured","opacity_hold_frac":0.65,"bloom":{"filter":"filmBloom","std_wide":0,"std_mid":0,"std_tight":0.62,"wide_weight":0,"mid_weight":0,"tight_weight":1.0,"blend":"normal","target_fwhm_px":1.6,"note":"pass8j-closer: stroke 1.48 + single soft-ink sigma0.62; op 0.50; NYC op_scale 1.70 (NE plate punch); KEEP normal; no multi-sigma/screen"}},"fade":{"black_overlay_start":1.0,"black_overlay_end":0.0,"duration_s":1.15,"ease":"power2.in","color":"#0F0F0F","p":"measured","note":"pass8i KEEP: stronger solid-to-fade hold power2.in over 1.15s; early SBS cols stay dark; ghost-dead t0"},"duration":3.5,"ease_r_pow":1.1};
|
||||
function main(){
|
||||
window.gsap = gsap;
|
||||
const svg = document.getElementById('rings');
|
||||
const fade = document.getElementById('fade');
|
||||
const RINGS_PER = DATA.ring.rings_per_pulse;
|
||||
const INTERVAL = DATA.ring.pulse_interval_s;
|
||||
const EXPAND_DEFAULT = DATA.ring.expand_duration_s;
|
||||
const RMAX_DEFAULT = DATA.ring.r_max_px;
|
||||
const STAGGER = DATA.ring.intra_pulse_stagger_s || 0.30;
|
||||
const OP0 = DATA.ring.opacity[0];
|
||||
const HOLD = DATA.ring.opacity_hold_frac || 0.55;
|
||||
const MAX_PULSES = DATA.ring.max_pulses || 2;
|
||||
const DUR = DATA.duration;
|
||||
const FADE = DATA.fade;
|
||||
const mildOut = (t) => 1 - Math.pow(1 - t, (DATA.ease_r_pow != null ? DATA.ease_r_pow : 1.55));
|
||||
const EASE_R = mildOut;
|
||||
const EASE_OP = DATA.ring.opacity_ease || 'power1.in';
|
||||
const STROKE = DATA.ring.stroke_px;
|
||||
|
||||
const hubPulsePlan = [];
|
||||
for (const h of DATA.hubs) {
|
||||
const rMax = (h.r_max != null) ? h.r_max : RMAX_DEFAULT;
|
||||
const expand = (h.expand_s != null) ? h.expand_s : EXPAND_DEFAULT;
|
||||
const opPeak = OP0 * (h.op_scale != null ? h.op_scale : 1);
|
||||
const pulses = [];
|
||||
for (let p = 0; p < MAX_PULSES; p++) {
|
||||
const start = h.onset_rel + p * INTERVAL;
|
||||
if (start >= DUR - 0.2) break;
|
||||
const group = [];
|
||||
for (let k = 0; k < RINGS_PER; k++) {
|
||||
const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
c.setAttribute('class', 'ring');
|
||||
c.setAttribute('cx', h.x);
|
||||
c.setAttribute('cy', h.y);
|
||||
c.setAttribute('r', 0);
|
||||
c.setAttribute('stroke-width', STROKE);
|
||||
svg.appendChild(c);
|
||||
group.push(c);
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>radar-rings - measured reverse (rings-only) soft-ink pass8j-closer</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
pulses.push({ start, els: group, rMax, expand, opPeak });
|
||||
}
|
||||
hubPulsePlan.push({ hub: h, pulses });
|
||||
}
|
||||
#stage {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
background: #b8b8b8;
|
||||
}
|
||||
#content {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 0;
|
||||
width: 1440px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
#mapRoot {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(4.5);
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
}
|
||||
#plate {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
display: block;
|
||||
}
|
||||
/* P1: uniform film-black plate mask - kills structured ghost map at t0 */
|
||||
#fade {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #0f0f0f;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
#rings {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
/* P0: normal blend - kill screen additive neon stacking on overlaps */
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
/* Soft-ink - pass8j-closer: stroke 1.48; single σ0.62; op 0.50; NYC op_scale; thin luminous not fog */
|
||||
.ring {
|
||||
fill: none;
|
||||
stroke: #ffffff;
|
||||
stroke-width: 1.48;
|
||||
opacity: 0;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
filter: url(#filmBloom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root-map-radar-rings"
|
||||
data-composition-id="map-radar-rings"
|
||||
data-start="0"
|
||||
data-duration="3.5"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div id="stage">
|
||||
<div id="content">
|
||||
<div id="mapRoot">
|
||||
<img
|
||||
id="plate"
|
||||
src="assets/hold-plate.png"
|
||||
width="320"
|
||||
height="240"
|
||||
alt="measured film hold plate"
|
||||
/>
|
||||
<svg id="rings" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter
|
||||
id="filmBloom"
|
||||
filterUnits="userSpaceOnUse"
|
||||
x="-60"
|
||||
y="-60"
|
||||
width="440"
|
||||
height="360"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<!-- pass8j-closer: single soft-ink σ0.62 - thin luminous stroke, no multi-σ/screen -->
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.62" result="soft" />
|
||||
<feMerge>
|
||||
<feMergeNode in="soft" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="fade"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="mrr-credit"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
bottom: 28px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font:
|
||||
13px/1.3 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
z-index: 6;
|
||||
"
|
||||
>
|
||||
Moving Image Archive, Network Broadcasting, 1934 - code recreation - not affiliated
|
||||
</div>
|
||||
<script>
|
||||
const DATA = {
|
||||
hubs: [
|
||||
{
|
||||
id: "nyc",
|
||||
x: 281,
|
||||
y: 82,
|
||||
onset_rel: 1.1,
|
||||
r_max: 17,
|
||||
expand_s: 3.15,
|
||||
p: "measured",
|
||||
op_scale: 1.7,
|
||||
},
|
||||
{
|
||||
id: "chicago",
|
||||
x: 221,
|
||||
y: 94,
|
||||
onset_rel: 1.12,
|
||||
r_max: 17,
|
||||
expand_s: 3.15,
|
||||
p: "measured",
|
||||
},
|
||||
{
|
||||
id: "denver",
|
||||
x: 109,
|
||||
y: 101,
|
||||
onset_rel: 1.06,
|
||||
r_max: 17,
|
||||
expand_s: 3.15,
|
||||
op_scale: 1.55,
|
||||
p: "measured",
|
||||
},
|
||||
{
|
||||
id: "kansas_city",
|
||||
x: 167,
|
||||
y: 103,
|
||||
onset_rel: 1.08,
|
||||
r_max: 17,
|
||||
expand_s: 3.15,
|
||||
op_scale: 1.7,
|
||||
p: "measured",
|
||||
},
|
||||
{
|
||||
id: "nashville_area",
|
||||
x: 220,
|
||||
y: 138,
|
||||
onset_rel: 1.2,
|
||||
r_max: 17,
|
||||
expand_s: 3.15,
|
||||
p: "measured",
|
||||
},
|
||||
{
|
||||
id: "atlanta",
|
||||
x: 233,
|
||||
y: 140,
|
||||
onset_rel: 1.24,
|
||||
r_max: 17,
|
||||
expand_s: 3.15,
|
||||
p: "measured",
|
||||
},
|
||||
],
|
||||
ring: {
|
||||
rings_per_pulse: 2,
|
||||
pulse_interval_s: 0.75,
|
||||
expand_duration_s: 3.15,
|
||||
r_max_px: 17,
|
||||
stroke_px: 1.48,
|
||||
intra_pulse_stagger_s: 0.28,
|
||||
color: "#FFFFFF",
|
||||
opacity: [0.5, 0.0],
|
||||
ease: "mildOut",
|
||||
opacity_ease: "power1.in",
|
||||
max_pulses: 2,
|
||||
p: "measured",
|
||||
opacity_hold_frac: 0.65,
|
||||
bloom: {
|
||||
filter: "filmBloom",
|
||||
std_wide: 0,
|
||||
std_mid: 0,
|
||||
std_tight: 0.62,
|
||||
wide_weight: 0,
|
||||
mid_weight: 0,
|
||||
tight_weight: 1.0,
|
||||
blend: "normal",
|
||||
target_fwhm_px: 1.6,
|
||||
note: "pass8j-closer: stroke 1.48 + single soft-ink sigma0.62; op 0.50; NYC op_scale 1.70 (NE plate punch); KEEP normal; no multi-sigma/screen",
|
||||
},
|
||||
},
|
||||
fade: {
|
||||
black_overlay_start: 1.0,
|
||||
black_overlay_end: 0.0,
|
||||
duration_s: 1.15,
|
||||
ease: "power2.in",
|
||||
color: "#0F0F0F",
|
||||
p: "measured",
|
||||
note: "pass8i KEEP: stronger solid-to-fade hold power2.in over 1.15s; early SBS cols stay dark; ghost-dead t0",
|
||||
},
|
||||
duration: 3.5,
|
||||
ease_r_pow: 1.1,
|
||||
};
|
||||
function main() {
|
||||
window.gsap = gsap;
|
||||
const svg = document.getElementById("rings");
|
||||
const fade = document.getElementById("fade");
|
||||
const RINGS_PER = DATA.ring.rings_per_pulse;
|
||||
const INTERVAL = DATA.ring.pulse_interval_s;
|
||||
const EXPAND_DEFAULT = DATA.ring.expand_duration_s;
|
||||
const RMAX_DEFAULT = DATA.ring.r_max_px;
|
||||
const STAGGER = DATA.ring.intra_pulse_stagger_s || 0.3;
|
||||
const OP0 = DATA.ring.opacity[0];
|
||||
const HOLD = DATA.ring.opacity_hold_frac || 0.55;
|
||||
const MAX_PULSES = DATA.ring.max_pulses || 2;
|
||||
const DUR = DATA.duration;
|
||||
const FADE = DATA.fade;
|
||||
const mildOut = (t) =>
|
||||
1 - Math.pow(1 - t, DATA.ease_r_pow != null ? DATA.ease_r_pow : 1.55);
|
||||
const EASE_R = mildOut;
|
||||
const EASE_OP = DATA.ring.opacity_ease || "power1.in";
|
||||
const STROKE = DATA.ring.stroke_px;
|
||||
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.set(fade, { opacity: FADE.black_overlay_start }, 0);
|
||||
// stronger solid hold (power2.in) so early SBS cols stay dark/uniform
|
||||
tl.to(fade, { opacity: FADE.black_overlay_end, duration: FADE.duration_s, ease: (FADE.ease || 'power2.in') }, 0);
|
||||
const hubPulsePlan = [];
|
||||
for (const h of DATA.hubs) {
|
||||
const rMax = h.r_max != null ? h.r_max : RMAX_DEFAULT;
|
||||
const expand = h.expand_s != null ? h.expand_s : EXPAND_DEFAULT;
|
||||
const opPeak = OP0 * (h.op_scale != null ? h.op_scale : 1);
|
||||
const pulses = [];
|
||||
for (let p = 0; p < MAX_PULSES; p++) {
|
||||
const start = h.onset_rel + p * INTERVAL;
|
||||
if (start >= DUR - 0.2) break;
|
||||
const group = [];
|
||||
for (let k = 0; k < RINGS_PER; k++) {
|
||||
const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
||||
c.setAttribute("class", "ring");
|
||||
c.setAttribute("cx", h.x);
|
||||
c.setAttribute("cy", h.y);
|
||||
c.setAttribute("r", 0);
|
||||
c.setAttribute("stroke-width", STROKE);
|
||||
svg.appendChild(c);
|
||||
group.push(c);
|
||||
}
|
||||
pulses.push({ start, els: group, rMax, expand, opPeak });
|
||||
}
|
||||
hubPulsePlan.push({ hub: h, pulses });
|
||||
}
|
||||
|
||||
for (const { pulses } of hubPulsePlan) {
|
||||
for (const pulse of pulses) {
|
||||
pulse.els.forEach((el, k) => {
|
||||
const delay = pulse.start + k * STAGGER;
|
||||
if (delay >= DUR) return;
|
||||
const holdT = pulse.expand * HOLD;
|
||||
const fadeT = pulse.expand * (1 - HOLD);
|
||||
const riseT = Math.min(0.14, holdT * 0.20);
|
||||
const opPeak = pulse.opPeak;
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.set(fade, { opacity: FADE.black_overlay_start }, 0);
|
||||
// stronger solid hold (power2.in) so early SBS cols stay dark/uniform
|
||||
tl.to(
|
||||
fade,
|
||||
{
|
||||
opacity: FADE.black_overlay_end,
|
||||
duration: FADE.duration_s,
|
||||
ease: FADE.ease || "power2.in",
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
for (const { pulses } of hubPulsePlan) {
|
||||
for (const pulse of pulses) {
|
||||
pulse.els.forEach((el, k) => {
|
||||
const delay = pulse.start + k * STAGGER;
|
||||
if (delay >= DUR) return;
|
||||
const holdT = pulse.expand * HOLD;
|
||||
const fadeT = pulse.expand * (1 - HOLD);
|
||||
const riseT = Math.min(0.14, holdT * 0.2);
|
||||
const opPeak = pulse.opPeak;
|
||||
|
||||
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();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
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();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<div
|
||||
data-composition-id="map-radar-rings"
|
||||
data-composition-src="compositions/map-radar-rings.html"
|
||||
data-variable-values='{"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"}'
|
||||
></div>
|
||||
```
|
||||
|
||||
{/* hf:generated-footer */}
|
||||
|
||||
Tagged `map` `geography` `animation` `radar` `rings` `newsreel` `svg` `mia`.
|
||||
|
||||
@@ -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";
|
||||
<!-- reservoir schematic (second beat, crossfade) -->
|
||||
<g id="msl-schematic-res" opacity="0">
|
||||
<rect width="1920" height="1080" fill="#121212" />
|
||||
<ellipse cx="960" cy="500" rx="620" ry="280" fill="#1e1e1e" stroke="#3a3a3a" stroke-width="2" />
|
||||
<ellipse
|
||||
cx="960"
|
||||
cy="500"
|
||||
rx="620"
|
||||
ry="280"
|
||||
fill="#1e1e1e"
|
||||
stroke="#3a3a3a"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path d="M 420 520 L 1500 480" stroke="#2a2a2a" stroke-width="6" />
|
||||
<rect x="700" y="430" width="520" height="28" fill="#333" />
|
||||
</g>
|
||||
</svg>
|
||||
<div id="msl-live-label" style="display:none">Schematic stand-in - live plates not replicated</div>
|
||||
<div id="msl-live-label" style="display: none">
|
||||
Schematic stand-in - live plates not replicated
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 10.12-34: topo watershed + tunnel -->
|
||||
@@ -142,7 +152,12 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
seed="7"
|
||||
result="noise"
|
||||
/>
|
||||
<feDiffuseLighting in="noise" lighting-color="#6a6a6a" surfaceScale="1.1" result="lit">
|
||||
<feDiffuseLighting
|
||||
in="noise"
|
||||
lighting-color="#6a6a6a"
|
||||
surfaceScale="1.1"
|
||||
result="lit"
|
||||
>
|
||||
<feDistantLight azimuth="315" elevation="42" />
|
||||
</feDiffuseLighting>
|
||||
<feComposite in="lit" in2="SourceGraphic" operator="in" />
|
||||
@@ -211,7 +226,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
|
||||
<!-- tunnel N→S 20→27: dark underlay + white dashes (gaps read dark); DrawSVG via mask -->
|
||||
<mask id="msl-tunnel-draw-mask" maskUnits="userSpaceOnUse">
|
||||
<rect x="240" y="0" width="1440" height="1080" fill="#000000"/>
|
||||
<rect x="240" y="0" width="1440" height="1080" fill="#000000" />
|
||||
<path
|
||||
id="msl-tunnel-mask-path"
|
||||
d="M 983.2 240.8 C 983.3 248.4 984.0 271.3 984.0 286.6 C 983.9 301.9 982.4 317.3 982.7 332.6 C 983.0 348.0 986.4 363.3 985.8 378.5 C 985.2 393.8 980.7 408.8 979.1 424.0 C 977.5 439.2 974.9 454.7 976.0 469.8 C 977.2 484.9 980.0 500.6 985.9 514.4 C 991.8 528.2 1000.7 542.3 1011.4 552.5 C 1022.0 562.8 1038.9 566.6 1050.1 575.8 C 1061.4 585.0 1070.2 595.7 1078.8 607.6 C 1087.4 619.5 1096.5 633.0 1101.7 647.1 C 1107.0 661.2 1103.3 680.1 1110.1 692.2 C 1117.0 704.3 1130.4 712.9 1142.9 719.8 C 1155.3 726.6 1178.0 731.2 1185.0 733.5"
|
||||
@@ -248,7 +263,13 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
</div>
|
||||
|
||||
<div id="msl-grain"></div>
|
||||
<div id="msl-credit" style="display:none" data-credit="Moving Image Archive, City Water Supply, 1941">Moving Image Archive, City Water Supply, 1941</div>
|
||||
<div
|
||||
id="msl-credit"
|
||||
style="display: none"
|
||||
data-credit="Moving Image Archive, City Water Supply, 1941"
|
||||
>
|
||||
Moving Image Archive, City Water Supply, 1941
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -289,11 +310,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
tl.to("#msl-dam", { opacity: 1, duration: 0.25, ease: "power2.out" }, 16.0);
|
||||
|
||||
// 20.0-27.0 white tunnel DrawSVG N→S
|
||||
tl.to(
|
||||
tunnelMask,
|
||||
{ strokeDashoffset: 0, duration: 7.0, ease: "none" },
|
||||
20.0,
|
||||
);
|
||||
tl.to(tunnelMask, { strokeDashoffset: 0, duration: 7.0, ease: "none" }, 20.0);
|
||||
|
||||
// 27-34 hold (timeline runs to 34)
|
||||
tl.to({}, { duration: 7.0 }, 27.0);
|
||||
@@ -336,32 +353,6 @@ It runs for 34 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, City Water Supply, 1941 - 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, City Water Supply, 1941 - 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
|
||||
<div
|
||||
data-composition-id="map-shipping-lanes"
|
||||
data-composition-src="compositions/map-shipping-lanes.html"
|
||||
data-variable-values='{"credit":"Moving Image Archive, City Water Supply, 1941 - code recreation - not affiliated"}'
|
||||
></div>
|
||||
```
|
||||
|
||||
{/* hf:generated-footer */}
|
||||
|
||||
Tagged `map` `geography` `animation` `shipping` `lanes` `water` `tunnel` `newsreel` `svg` `mia`.
|
||||
|
||||
@@ -3158,7 +3158,7 @@
|
||||
"name": "map-border-chase",
|
||||
"type": "block",
|
||||
"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.",
|
||||
"tags": [
|
||||
"map",
|
||||
"geography",
|
||||
@@ -3425,7 +3425,7 @@
|
||||
"name": "map-radar-rings",
|
||||
"type": "block",
|
||||
"title": "Map Radar Rings",
|
||||
"description": "Measured film hold-plate with soft-ink multi-hub concentric rings (pass8j-closer: 6 hubs incl NYC, sigma 0.62, stroke 1.48, expand 3.15s, pre-iris 3.5s). Seek-safe SVG/GSAP; PNG plate only (no MP4 wrapper). Inspired by Moving Image Archive, Network Broadcasting, 1934 - not affiliated; code recreation. QC_PASS (Lead + independent judge) 2026-09-21.",
|
||||
"description": "Soft concentric rings expand from six broadcast hubs across a vintage map, including New York City.",
|
||||
"tags": [
|
||||
"map",
|
||||
"geography",
|
||||
@@ -3478,7 +3478,7 @@
|
||||
"name": "map-shipping-lanes",
|
||||
"type": "block",
|
||||
"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.",
|
||||
"tags": [
|
||||
"map",
|
||||
"geography",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -15,13 +15,3 @@ Self-host under each block `assets/` for durable HyperFrames catalog use.
|
||||
## Recommended credit
|
||||
|
||||
`Moving Image Archive, [title], [year]; original producer/source collection; archive.org link.`
|
||||
|
||||
## Sample verified shots (browser-captured 2026-09-20)
|
||||
|
||||
| Title | Year | Clip id | Provenance |
|
||||
| ----------------------------------------------- | ---: | -------------------------------------- | ------------------------------------------------------------------ |
|
||||
| New York Water Supply | 1927 | `5791dad1-539e-5947-863e-f19cbac765ba` | NARA; https://archive.org/details/gov.archives.arc.95622 |
|
||||
| New York Water Supply (shot 15) | 1927 | `9693cbe6-49c6-5118-997f-4dbc00aa23c1` | NARA; https://archive.org/details/gov.archives.arc.95622 |
|
||||
| Oakland California Real Estate Promotional Film | 1928 | `bee2ff0d-86d1-5797-98e0-d676725b6c96` | Prelinger; https://archive.org/details/OaklandC1928 |
|
||||
| Oakland (shot 3) | 1928 | `9324c140-4816-546f-b877-0acc5cadcad6` | Prelinger; https://archive.org/details/OaklandC1928 |
|
||||
| EVOLUTION OF THE OIL INDUSTRY, THE | 1934 | `a36b3d33-8c6b-5748-b606-e7841020121f` | NARA / FedFlix; https://archive.org/details/gov.archives.arc.12477 |
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"name": "map-border-chase",
|
||||
"type": "hyperframes:block",
|
||||
"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.",
|
||||
"tags": [
|
||||
"map",
|
||||
"geography",
|
||||
@@ -22,14 +22,6 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 8.942,
|
||||
"variables": [
|
||||
{
|
||||
"id": "credit",
|
||||
"type": "string",
|
||||
"label": "Credit",
|
||||
"default": "Moving Image Archive inspiration - Alaska Highway / map-border-chase - code recreation - not affiliated"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "map-border-chase.html",
|
||||
@@ -41,13 +33,5 @@
|
||||
"target": "assets/basemap-t0.png",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
],
|
||||
"params": [
|
||||
{
|
||||
"id": "credit",
|
||||
"type": "string",
|
||||
"label": "Credit",
|
||||
"default": "Moving Image Archive inspiration - Alaska Highway / map-border-chase - code recreation - not affiliated"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"name": "map-radar-rings",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Map Radar Rings",
|
||||
"description": "Measured film hold-plate with soft-ink multi-hub concentric rings (pass8j-closer: 6 hubs incl NYC, sigma 0.62, stroke 1.48, expand 3.15s, pre-iris 3.5s). Seek-safe SVG/GSAP; PNG plate only (no MP4 wrapper). Inspired by Moving Image Archive, Network Broadcasting, 1934 - not affiliated; code recreation. QC_PASS (Lead + independent judge) 2026-09-21.",
|
||||
"description": "Soft concentric rings expand from six broadcast hubs across a vintage map, including New York City.",
|
||||
"tags": ["map", "geography", "animation", "radar", "rings", "newsreel", "svg", "mia"],
|
||||
"author": "HeyGen",
|
||||
"authorUrl": "https://hyperframes.heygen.com",
|
||||
@@ -12,14 +12,6 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 3.5,
|
||||
"variables": [
|
||||
{
|
||||
"id": "credit",
|
||||
"type": "string",
|
||||
"label": "Credit",
|
||||
"default": "Moving Image Archive, Network Broadcasting, 1934 (clip bbdd60a1-a3f6-5d22-8953-3419f5a17afd; IA 0809_Network_Broadcasting_02_01_12_00) - code recreation - not affiliated"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "map-radar-rings.html",
|
||||
@@ -36,13 +28,5 @@
|
||||
"target": "assets/measured-data.json",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
],
|
||||
"params": [
|
||||
{
|
||||
"id": "credit",
|
||||
"type": "string",
|
||||
"label": "Credit",
|
||||
"default": "Moving Image Archive, Network Broadcasting, 1934 (clip bbdd60a1-a3f6-5d22-8953-3419f5a17afd; IA 0809_Network_Broadcasting_02_01_12_00) - code recreation - not affiliated"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"name": "map-shipping-lanes",
|
||||
"type": "hyperframes:block",
|
||||
"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.",
|
||||
"tags": [
|
||||
"map",
|
||||
"geography",
|
||||
@@ -23,14 +23,6 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 34,
|
||||
"variables": [
|
||||
{
|
||||
"id": "credit",
|
||||
"type": "string",
|
||||
"label": "Credit",
|
||||
"default": "Moving Image Archive, City Water Supply, 1941 - code recreation - not affiliated"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "map-shipping-lanes.html",
|
||||
@@ -42,13 +34,5 @@
|
||||
"target": "assets/topo-plate.png",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
],
|
||||
"params": [
|
||||
{
|
||||
"id": "credit",
|
||||
"type": "string",
|
||||
"label": "Credit",
|
||||
"default": "Moving Image Archive, City Water Supply, 1941 - code recreation - not affiliated"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -2,7 +2,7 @@
|
||||
"model": "bge-small-en-v1.5",
|
||||
"modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
|
||||
"dimensions": 384,
|
||||
"revision": "1c7b2de867a8c9a48cf8999bea1ede3d049c6d8fdb761a6cfc11ceed82d31d87",
|
||||
"revision": "d55e38c07190e1a946fed53a9da5aca1a0bb68b8696e3f4aff63452f985f54ce",
|
||||
"names": [
|
||||
"ai-chat-reveal",
|
||||
"animated-bar-chart",
|
||||
|
||||
@@ -1761,6 +1761,6 @@
|
||||
}
|
||||
],
|
||||
"catalogArtifact": {
|
||||
"revision": "1c7b2de867a8c9a48cf8999bea1ede3d049c6d8fdb761a6cfc11ceed82d31d87"
|
||||
"revision": "d55e38c07190e1a946fed53a9da5aca1a0bb68b8696e3f4aff63452f985f54ce"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user