mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
Miguel Ángel
d7688f9943
* fix(docs): load the player from latest, not a pinned minor The catalog pages pinned the player CDN URL to a minor line, and that pin sat one line behind after the last release. Every page kept rendering, on the older build, so nothing surfaced it: the only symptom was that a fix published to npm never appeared on the docs. The generator derived its pin from the player's package.json, which is correct only if every page is regenerated on the release that moves it. That is the step that did not happen, and it has to happen across 175 generated pages plus three hand-written files for the pin to be true. A version carried in step across 178 places will be stale, and stale here is silent. Ask for latest instead and there is nothing to carry. This costs the ability to hold the docs back from a bad player release. Paid deliberately: the pin did not buy that either, it only delayed the good releases too. A test asserts no pinned version comes back, and fails if it stops finding the references at all, so it cannot pass by matching nothing. * refactor(scripts): list tracked files instead of walking the tree The pin guard hand-rolled a recursive directory walk with its own skip list and size cap, which the audit flagged: helpers living in a test file earn no coverage, so their complexity lands straight on the CRAP score. git already knows which files to read, and ignores node_modules and build output for us, so one call replaces the walker and both findings go away.
362 lines
11 KiB
Plaintext
362 lines
11 KiB
Plaintext
---
|
|
title: "North Korea Locked Down"
|
|
description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
|
|
---
|
|
|
|
import { InstallCommand } from "/snippets/install-command.jsx";
|
|
|
|
<iframe
|
|
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
|
|
title="north-korea-locked-down preview"
|
|
loading="lazy"
|
|
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/north-korea-locked-down.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png");document.body.appendChild(p)});<\/script></body></html>`}
|
|
/>
|
|
|
|
## Install
|
|
|
|
<InstallCommand command="npx hyperframes add north-korea-locked-down" item="north-korea-locked-down" />
|
|
|
|
That writes `compositions/north-korea-locked-down.html`, plus 1 supporting file under `assets/`.
|
|
|
|
## Source
|
|
|
|
<Accordion title={`north-korea-locked-down.html`}>
|
|
|
|
```html
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #eef3f4;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #eef3f4;
|
|
color: #151515;
|
|
}
|
|
|
|
.camera {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
transform-origin: 50% 51%;
|
|
will-change: transform, filter;
|
|
}
|
|
|
|
.map {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.paper-depth {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.08), transparent 28%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(10, 20, 24, 0.12));
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.annotation {
|
|
position: absolute;
|
|
left: 652px;
|
|
top: 235px;
|
|
z-index: 4;
|
|
width: 560px;
|
|
height: 392px;
|
|
overflow: visible;
|
|
transform-origin: center;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.scribble {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 560px;
|
|
height: 392px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.scribble path {
|
|
fill: none;
|
|
stroke: #e21d2f;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
filter: drop-shadow(0 8px 12px rgba(226, 29, 47, 0.24));
|
|
}
|
|
|
|
#circle-a {
|
|
stroke-width: 12;
|
|
stroke-dasharray: 980;
|
|
stroke-dashoffset: 980;
|
|
}
|
|
|
|
#circle-b {
|
|
stroke-width: 6;
|
|
opacity: 0.82;
|
|
stroke-dasharray: 910;
|
|
stroke-dashoffset: 910;
|
|
}
|
|
|
|
.label {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -146px;
|
|
transform: translateX(-50%) scale(0.82);
|
|
transform-origin: 50% 100%;
|
|
min-width: 370px;
|
|
padding: 18px 26px 20px;
|
|
border-radius: 18px;
|
|
color: #ffffff;
|
|
background: #111111;
|
|
box-shadow:
|
|
0 22px 54px rgba(25, 4, 7, 0.24),
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.12);
|
|
font-size: 60px;
|
|
line-height: 0.9;
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
opacity: 0;
|
|
}
|
|
|
|
.label::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -16px;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #111111;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
}
|
|
|
|
.red-wash {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
background:
|
|
radial-gradient(
|
|
circle at 50% 48%,
|
|
rgba(255, 59, 48, 0.3),
|
|
rgba(255, 59, 48, 0.06) 42%,
|
|
rgba(79, 0, 8, 0.22) 100%
|
|
),
|
|
linear-gradient(90deg, rgba(99, 0, 12, 0.12), rgba(255, 59, 48, 0.2));
|
|
opacity: 0;
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.scanline {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 3;
|
|
opacity: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(65, 0, 0, 0.12) 0,
|
|
rgba(65, 0, 0, 0.12) 1px,
|
|
transparent 1px,
|
|
transparent 7px
|
|
);
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
z-index: 6;
|
|
width: 84px;
|
|
height: 84px;
|
|
border-color: rgba(17, 17, 17, 0.62);
|
|
opacity: 0;
|
|
}
|
|
|
|
.corner.tl {
|
|
left: 86px;
|
|
top: 78px;
|
|
border-top: 5px solid;
|
|
border-left: 5px solid;
|
|
}
|
|
|
|
.corner.tr {
|
|
right: 86px;
|
|
top: 78px;
|
|
border-top: 5px solid;
|
|
border-right: 5px solid;
|
|
}
|
|
|
|
.corner.bl {
|
|
left: 86px;
|
|
bottom: 78px;
|
|
border-bottom: 5px solid;
|
|
border-left: 5px solid;
|
|
}
|
|
|
|
.corner.br {
|
|
right: 86px;
|
|
bottom: 78px;
|
|
border-bottom: 5px solid;
|
|
border-right: 5px solid;
|
|
}
|
|
|
|
.attribution {
|
|
position: absolute;
|
|
right: 28px;
|
|
bottom: 22px;
|
|
z-index: 7;
|
|
color: rgba(17, 17, 17, 0.44);
|
|
font-size: 19px;
|
|
font-weight: 650;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="north-korea-locked-down"
|
|
data-root="true"
|
|
data-start="0"
|
|
data-duration="7"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<div id="camera" class="camera">
|
|
<img class="map" src="assets/korea-map.png" alt="" />
|
|
<div class="paper-depth"></div>
|
|
</div>
|
|
|
|
<div id="annotation" class="annotation">
|
|
<div id="label" class="label">LOCKED<br />DOWN</div>
|
|
<svg class="scribble" viewBox="0 0 560 392" aria-hidden="true" data-layout-ignore>
|
|
<path
|
|
id="circle-a"
|
|
d="M 74 211 C 42 119 118 42 254 36 C 410 30 524 111 508 222 C 494 320 350 377 208 346 C 94 322 37 278 74 211"
|
|
/>
|
|
<path
|
|
id="circle-b"
|
|
d="M 92 231 C 33 150 105 55 243 44 C 408 31 529 126 501 244 C 480 334 335 370 197 342 C 83 319 47 269 92 231"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="redWash" class="red-wash"></div>
|
|
<div id="scanline" class="scanline"></div>
|
|
<div class="corner tl"></div>
|
|
<div class="corner tr"></div>
|
|
<div class="corner bl"></div>
|
|
<div class="corner br"></div>
|
|
<div class="attribution">© OpenStreetMap contributors © CARTO</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
|
|
const tl = gsap.timeline({
|
|
paused: true,
|
|
defaults: { overwrite: "auto" },
|
|
});
|
|
|
|
tl.fromTo(
|
|
"#camera",
|
|
{ scale: 0.92, x: -70, y: 18, filter: "saturate(0.92) contrast(0.98)" },
|
|
{
|
|
scale: 2.12,
|
|
x: -56,
|
|
y: -22,
|
|
filter: "saturate(1.08) contrast(1.04)",
|
|
duration: 3.18,
|
|
ease: "expo.inOut",
|
|
},
|
|
0,
|
|
);
|
|
tl.to("#camera", { scale: 2.2, x: -44, y: -34, duration: 0.42, ease: "back.out(1.5)" }, 3.18);
|
|
tl.from(
|
|
".corner",
|
|
{ opacity: 0, scale: 0.72, duration: 0.28, stagger: 0.035, ease: "power3.out" },
|
|
0.42,
|
|
);
|
|
tl.to(".corner", { opacity: 0.72, duration: 0.18, ease: "power2.out" }, 1.2);
|
|
tl.fromTo(
|
|
"#annotation",
|
|
{ opacity: 0, scale: 0.92, x: 4, y: -4 },
|
|
{ opacity: 1, scale: 1, x: 0, y: 0, duration: 0.16, ease: "power2.out" },
|
|
3.12,
|
|
);
|
|
tl.to("#circle-a", { strokeDashoffset: 0, duration: 0.62, ease: "power2.out" }, 3.24);
|
|
tl.to("#circle-b", { strokeDashoffset: 0, duration: 0.44, ease: "power3.out" }, 3.46);
|
|
tl.to("#label", { opacity: 1, scale: 1, duration: 0.28, ease: "back.out(2.1)" }, 3.78);
|
|
tl.to("#redWash", { opacity: 1, duration: 0.24, ease: "power2.out" }, 3.82);
|
|
tl.to("#scanline", { opacity: 0.44, duration: 0.18, ease: "none" }, 3.86);
|
|
tl.to(
|
|
"#annotation",
|
|
{ scale: 1.045, duration: 0.14, yoyo: true, repeat: 1, ease: "sine.inOut" },
|
|
4.1,
|
|
);
|
|
tl.to("#camera", { scale: 2.06, x: -82, y: -8, duration: 2.35, ease: "sine.inOut" }, 4.2);
|
|
tl.to("#redWash", { opacity: 0.82, duration: 2.35, ease: "sine.inOut" }, 4.2);
|
|
tl.to(".corner", { opacity: 0.38, duration: 0.72, ease: "sine.inOut" }, 5.82);
|
|
tl.to("#label", { y: -6, duration: 0.4, yoyo: true, repeat: 1, ease: "sine.inOut" }, 5.94);
|
|
|
|
window.__timelines["north-korea-locked-down"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</Accordion>
|
|
|
|
## Usage
|
|
|
|
After installing, add the block to your host composition:
|
|
|
|
```html
|
|
<div data-composition-id="north-korea-locked-down" data-composition-src="compositions/north-korea-locked-down.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
|
```
|
|
|
|
{/* hf:generated-footer */}
|
|
|
|
Tagged `showcase` `map` `annotation` `youtube` `kinetic`.
|
|
|
|
Created by [Stronkter](https://x.com/Stronkter).
|
|
|
|
<Accordion title="The prompt this was built from">
|
|
|
|
```text
|
|
use 📷HyperFrames by HeyGen and Image Gen if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe
|
|
```
|
|
|
|
</Accordion>
|
|
|
|
## Related topics
|
|
|
|
- [Browse the complete Catalog](/catalog)
|
|
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
- [Build a richer composition](/go-further)
|