mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueenandHanzo Dev
70b41673a3
Forked from HyperFrames (Apache-2.0), full history preserved. Hosts are mapped explicitly and BEFORE the identifier rename, because hyperframes.heygen.com is not decoration: 175 of its occurrences are $schema identifiers that a validator dereferences. A blind rename would have left them naming a host that never serves them. The schema files are in this repo under docs/schema, so the mapped host is one we can actually serve -- that is the condition that makes the rewrite safe, and serving them is a deploy task, not an edit. docs/schema/hyperframes.json is renamed to frames.json to match the identifier it is now published under. api.heygen.com and the CLI auth against heygen.com are left UNRENAMED on purpose. They are a dependency on HeyGen's SaaS, not a name of ours to take, and the right move is to remove that integration rather than rebrand it. LICENSE and CREDITS.md are untouched; NOTICE records the lineage. Co-authored-by: Hanzo Dev <[email protected]>
109 lines
3.0 KiB
HTML
Vendored
109 lines
3.0 KiB
HTML
Vendored
<template id="intro-template">
|
|
<div
|
|
id="intro-comp"
|
|
data-composition-id="intro"
|
|
data-start="0"
|
|
data-duration="__VIDEO_DURATION__"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<div class="intro-container">
|
|
<h1 class="title">FRAMES</h1>
|
|
</div>
|
|
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap");
|
|
|
|
[data-composition-id="intro"] .intro-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-composition-id="intro"] .title {
|
|
font-family: "Nunito", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 180px;
|
|
color: #ff2d8a; /* Hot Pink */
|
|
text-transform: uppercase;
|
|
transform: rotate(-5deg); /* Tilted 5 degrees */
|
|
margin: 0;
|
|
padding: 20px;
|
|
/* Layered offset shadow for depth without suffocating letterforms */
|
|
filter: drop-shadow(8px 8px 0 #ffffff) drop-shadow(15px 15px 0 rgba(0, 0, 0, 0.1));
|
|
opacity: 0;
|
|
scale: 0;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// --- INTRO SEQUENCE ---
|
|
// Animation: Scale-up bounce (0% to 110% to 100%) with elastic overshoot
|
|
// Starts at 0.5s, lasts until 3s
|
|
tl.to('[data-composition-id="intro"] .title', {
|
|
opacity: 1,
|
|
scale: 1.1,
|
|
duration: 0.6,
|
|
ease: "back.out(1.7)",
|
|
delay: 0.5,
|
|
})
|
|
.to('[data-composition-id="intro"] .title', {
|
|
scale: 1,
|
|
duration: 0.4,
|
|
ease: "elastic.out(1, 0.3)",
|
|
})
|
|
// Ambient motion
|
|
.to(
|
|
'[data-composition-id="intro"] .title',
|
|
{
|
|
rotation: "-3deg",
|
|
duration: 1,
|
|
repeat: 1,
|
|
yoyo: true,
|
|
ease: "sine.inOut",
|
|
},
|
|
"-=0.5",
|
|
)
|
|
// Exit intro
|
|
.to(
|
|
'[data-composition-id="intro"] .title',
|
|
{
|
|
opacity: 0,
|
|
scale: 0.5,
|
|
duration: 0.3,
|
|
ease: "power2.in",
|
|
},
|
|
1.4,
|
|
);
|
|
|
|
// --- END CARD SEQUENCE ---
|
|
// Appears at 14.619s (after Moment 3 finishes exiting at 14.239 + 0.3)
|
|
tl.to(
|
|
'[data-composition-id="intro"] .title',
|
|
{
|
|
opacity: 1,
|
|
scale: 1.1,
|
|
duration: 0.6,
|
|
ease: "back.out(1.7)",
|
|
},
|
|
14.619,
|
|
).to('[data-composition-id="intro"] .title', {
|
|
scale: 1,
|
|
duration: 0.4,
|
|
ease: "elastic.out(1, 0.3)",
|
|
});
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["intro"] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|