mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueen
bb68594c65
The 217 catalog preview URLs pointed at static.heygen.ai, which now answers 403 Access Denied. The manifests carry no preview rather than a URL that cannot resolve; scripts/generate-catalog-previews.ts regenerates the files whenever we have somewhere of our own to serve them from. Social-card blocks introduce Hanzo, not HeyGen, and the avatar they ship is the Frames mark instead of the vendor logo. ui-3d-reveal drops the embedded vendor logo, its hg- class prefix, and the app.heygen.com framing. .github/workflows ran on GitHub-hosted runners, published to npm with a repo-held token, and synced skills to clawhub.ai/heygen-com. CI runs from .hanzo/workflows on the git.hanzo.ai fleet, so the tree goes; the issue and patch templates stay, pointed at our forge. The changelog-video mirrors synthesize with `frames tts` and time words with `frames transcribe` — local models, no key, no account — in place of the HeyGen CLI and its pinned voice, and ship Inter and JetBrains Mono in place of two licensed brand faces we have no right to redistribute. Dockerfile.test filtered on the @hyperframes scope and a runtime script name that no longer exist, so it built nothing.
243 lines
5.8 KiB
HTML
Vendored
243 lines
5.8 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html,
|
|
body {
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
font-family: "DM Sans", sans-serif;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .lower-third {
|
|
position: absolute;
|
|
bottom: 80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
background: #ffffff;
|
|
border-radius: 60px;
|
|
padding: 20px 32px 20px 20px;
|
|
box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .avatar {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .channel-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .channel-name {
|
|
font-size: 34px;
|
|
font-weight: 700;
|
|
color: #0f0f0f;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .subscriber-count {
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
color: #606060;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .subscribe-btn {
|
|
position: relative;
|
|
width: 220px;
|
|
height: 68px;
|
|
border-radius: 34px;
|
|
background: #0f0f0f;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .btn-text {
|
|
position: absolute;
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .btn-text-subscribe {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .btn-text-subscribed {
|
|
opacity: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .check-icon {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
[data-composition-id="yt-lower-third"] .check-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="yt-lower-third"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
data-start="0"
|
|
data-duration="4.5"
|
|
>
|
|
<div
|
|
id="card"
|
|
class="clip lower-third"
|
|
data-start="0"
|
|
data-duration="4.5"
|
|
data-track-index="0"
|
|
>
|
|
<img class="avatar" src="assets/avatar.png" alt="Hanzo" crossorigin="anonymous" />
|
|
<div class="channel-info">
|
|
<div class="channel-name">Hanzo</div>
|
|
<div class="subscriber-count">82.2K subscribers</div>
|
|
</div>
|
|
<div id="subscribe-btn" class="subscribe-btn">
|
|
<span id="btn-subscribe" class="btn-text btn-text-subscribe">Subscribe</span>
|
|
<span id="btn-subscribed" class="btn-text btn-text-subscribed">
|
|
<span class="check-icon"
|
|
><svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#fff"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12"></polyline></svg
|
|
></span>
|
|
Subscribed
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
var card = document.getElementById("card");
|
|
var btn = document.getElementById("subscribe-btn");
|
|
var textSub = document.getElementById("btn-subscribe");
|
|
var textSubd = document.getElementById("btn-subscribed");
|
|
|
|
// Slide in from bottom
|
|
gsap.set(card, { y: 300, opacity: 0 });
|
|
|
|
tl.to(
|
|
card,
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.5,
|
|
ease: "power3.out",
|
|
},
|
|
0.1,
|
|
);
|
|
|
|
// Hold, then button press-in
|
|
tl.to(
|
|
btn,
|
|
{
|
|
scale: 0.92,
|
|
duration: 0.15,
|
|
ease: "power2.out",
|
|
},
|
|
1.0,
|
|
);
|
|
|
|
// Button release with spring bounce + text swap
|
|
tl.to(
|
|
btn,
|
|
{
|
|
scale: 1,
|
|
duration: 0.4,
|
|
ease: "elastic.out(1, 0.4)",
|
|
},
|
|
1.15,
|
|
);
|
|
|
|
// Fade out "Subscribe", fade in "Subscribed"
|
|
tl.to(
|
|
textSub,
|
|
{
|
|
opacity: 0,
|
|
duration: 0.08,
|
|
ease: "none",
|
|
},
|
|
1.15,
|
|
);
|
|
|
|
tl.to(
|
|
textSubd,
|
|
{
|
|
opacity: 1,
|
|
duration: 0.08,
|
|
ease: "none",
|
|
},
|
|
1.18,
|
|
);
|
|
|
|
// Slide out to bottom (inverse of entrance)
|
|
tl.to(
|
|
card,
|
|
{
|
|
y: 300,
|
|
opacity: 0,
|
|
duration: 0.25,
|
|
ease: "power3.in",
|
|
},
|
|
3.8,
|
|
);
|
|
|
|
window.__timelines["yt-lower-third"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|