mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueen
62bbc7766c
Every SKILL.md already declared the new name — name: frames, frames-cli, frames-core, and so on — but the directories were never moved, so the tree carried frames-* in content and hyperframes-* on disk. Everything that resolves a skill by path missed: the core-skill list, the plugin marketplace pin, and the docs the CLI reads at runtime. Eight tests failed on main because the files they open do not exist. The directories now match what the files say they are, and the guide the claude-design contract reads takes the name that contract already used.
348 lines
11 KiB
HTML
348 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1920, height=1080" />
|
||
<title>Scene 5 — Frames Displace Reveal</title>
|
||
|
||
<!--
|
||
Frames composition.tsx.
|
||
|
||
Choreography (4 phases, 7.5 seconds total):
|
||
0.00 – 0.67s Typewriter reveals "Frames turns" (3 → 17 chars)
|
||
1.67 – 2.22s Ticker scrolls: HTML → motion
|
||
3.33 – 3.88s Ticker scrolls: motion → video
|
||
4.60 – 5.45s Logo enters from offscreen-right with rotation + scale impact
|
||
Text group pushed left + fades (40-50% of hero duration)
|
||
6.60 – 7.50s Logo breathes (dual-frequency sine onUpdate, multiplicative on 1.3 scale)
|
||
tuned to 40-50% of hero duration so the impact reads as causal
|
||
- Breathing uses Form 2 (onUpdate) so it multiplies onto the 1.3 final scale,
|
||
not overwrites it (Form 1 yoyo would undo the impact)
|
||
- Two breathing periods (1.0s scale, 1.33s rotation) for organic feel
|
||
- Logo uses a local static image asset referenced with a plain URL
|
||
-->
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
|
||
|
||
<style>
|
||
:root {
|
||
--bg: linear-gradient(
|
||
135deg,
|
||
#3a3a3a 0%,
|
||
#17211f 30%,
|
||
#0b2328 48%,
|
||
#1f3518 70%,
|
||
#343434 100%
|
||
);
|
||
--text: #f8fafc;
|
||
--accent: #18d9e8;
|
||
--accent-2: #7bea5a;
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
font-family:
|
||
"Inter",
|
||
system-ui,
|
||
-apple-system,
|
||
sans-serif;
|
||
color: var(--text);
|
||
}
|
||
|
||
.stage {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Text group — typewriter + ticker side by side, displaced as a unit */
|
||
.text-group {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.typewriter {
|
||
height: 168px; /* = ITEM_HEIGHT (FONT_SIZE × 1.2) */
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--text);
|
||
font-weight: 400;
|
||
font-size: 140px;
|
||
line-height: 1;
|
||
white-space: pre;
|
||
text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
|
||
}
|
||
|
||
/* Vertical ticker */
|
||
.ticker-window {
|
||
height: 168px;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
.ticker-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
will-change: transform;
|
||
}
|
||
.ticker-item {
|
||
height: 168px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--accent);
|
||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-weight: 700;
|
||
font-size: 140px;
|
||
padding-left: 20px;
|
||
line-height: 1;
|
||
white-space: pre;
|
||
}
|
||
|
||
/* Hero logo — enters from offscreen right */
|
||
.hero {
|
||
position: absolute;
|
||
width: 440px;
|
||
height: 440px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 20; /* above text during overlap */
|
||
opacity: 0; /* fromTo will animate */
|
||
}
|
||
.hero .logo-mark {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
border-radius: 52px;
|
||
box-shadow:
|
||
0 0 70px rgba(24, 217, 232, 0.28),
|
||
0 0 120px rgba(123, 234, 90, 0.18);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="root"
|
||
data-composition-id="main"
|
||
data-start="0"
|
||
data-duration="7.5"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
>
|
||
<div
|
||
class="stage clip"
|
||
data-start="0"
|
||
data-duration="7.5"
|
||
data-track-index="1"
|
||
id="displace-stage"
|
||
>
|
||
<!-- Text group: typewriter + ticker -->
|
||
<div class="text-group" id="text-group">
|
||
<div class="typewriter">
|
||
<span class="typewriter-text">Hyp</span>
|
||
</div>
|
||
<div class="ticker-window">
|
||
<div class="ticker-stack">
|
||
<div class="ticker-item">HTML</div>
|
||
<div class="ticker-item">motion</div>
|
||
<div class="ticker-item">video</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero logo asset -->
|
||
<div class="hero" id="hero-logo">
|
||
<!-- Inline-SVG placeholder mark — swap for your logo image -->
|
||
<svg class="logo-mark" viewBox="0 0 100 100" role="img" aria-label="Frames">
|
||
<defs>
|
||
<linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#8b7bff" />
|
||
<stop offset="1" stop-color="#3ddc97" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
|
||
<text
|
||
x="50"
|
||
y="63"
|
||
text-anchor="middle"
|
||
font-family="Inter, system-ui, sans-serif"
|
||
font-size="40"
|
||
font-weight="800"
|
||
fill="#fff"
|
||
>
|
||
HF
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ================================================================
|
||
CONSTANTS
|
||
================================================================ */
|
||
const TOTAL_DURATION = 7.5;
|
||
const FONT_SIZE = 140;
|
||
const ITEM_HEIGHT = FONT_SIZE * 1.2; // = 168 px
|
||
|
||
const TIMING = {
|
||
// Phase 1: typewriter
|
||
typeStart: 0.0,
|
||
typeDur: 0.67,
|
||
typeStartLen: 3, // pre-render the first 3 chars
|
||
|
||
// Phase 2: ticker steps
|
||
ticker1At: 1.67, // HTML → motion
|
||
ticker2At: 3.33, // motion → video
|
||
stepDur: 0.55,
|
||
|
||
// Phase 3: reactive displacement
|
||
displaceAt: 4.6,
|
||
heroDur: 0.85, // matches spring(mass:1.5) settle
|
||
offscreenX: 800, // hero starts here
|
||
pushDist: -150, // text pushed THIS direction
|
||
|
||
// Phase 4: breathing
|
||
idleStart: 6.6, // displaceAt + heroDur + ~1.15s buffer
|
||
};
|
||
|
||
const FULL_TEXT = "Frames turns";
|
||
|
||
/* ================================================================
|
||
TIMELINE
|
||
================================================================ */
|
||
window.__timelines = window.__timelines || {};
|
||
const tl = gsap.timeline({ paused: true });
|
||
window.__timelines["main"] = tl;
|
||
|
||
/* ----------------------------------------------------------------
|
||
PHASE 1: Typewriter (smooth slice)
|
||
---------------------------------------------------------------- */
|
||
const typewriterEl = document.querySelector(".typewriter-text");
|
||
const typeProxy = { progress: TIMING.typeStartLen };
|
||
|
||
tl.to(
|
||
typeProxy,
|
||
{
|
||
progress: FULL_TEXT.length,
|
||
duration: TIMING.typeDur,
|
||
ease: "none",
|
||
onUpdate: () => {
|
||
const len = Math.floor(typeProxy.progress);
|
||
const next = FULL_TEXT.slice(0, len);
|
||
if (typewriterEl.textContent !== next) typewriterEl.textContent = next;
|
||
},
|
||
},
|
||
TIMING.typeStart,
|
||
);
|
||
|
||
/* ----------------------------------------------------------------
|
||
PHASE 2: Vertical ticker (2 steps: HTML → motion → video)
|
||
---------------------------------------------------------------- */
|
||
tl.to(
|
||
".ticker-stack",
|
||
{
|
||
y: `-=${ITEM_HEIGHT}`,
|
||
duration: TIMING.stepDur,
|
||
ease: "back.out(1.4)", // spring(stiffness:120, damping:14)
|
||
},
|
||
TIMING.ticker1At,
|
||
);
|
||
|
||
tl.to(
|
||
".ticker-stack",
|
||
{
|
||
y: `-=${ITEM_HEIGHT}`,
|
||
duration: TIMING.stepDur,
|
||
ease: "back.out(1.4)",
|
||
},
|
||
TIMING.ticker2At,
|
||
);
|
||
|
||
/* ----------------------------------------------------------------
|
||
PHASE 3: Reactive displacement — three concurrent tweens.
|
||
---------------------------------------------------------------- */
|
||
// (1) Hero enters with rotation + scale impact, lands at scale 1.3.
|
||
tl.fromTo(
|
||
".hero",
|
||
{ x: TIMING.offscreenX, scale: 0.5, rotation: -45, opacity: 0 },
|
||
{
|
||
x: 0,
|
||
scale: 1.3,
|
||
rotation: 0,
|
||
opacity: 1,
|
||
duration: TIMING.heroDur,
|
||
ease: "power2.out", // spring(stiffness:100, damping:20, mass:1.5)
|
||
},
|
||
TIMING.displaceAt,
|
||
);
|
||
|
||
// (2) Text pushed left. Completes at 50% of hero duration → immediate impact.
|
||
tl.to(
|
||
".text-group",
|
||
{ x: TIMING.pushDist, duration: TIMING.heroDur * 0.5, ease: "power2.out" },
|
||
TIMING.displaceAt,
|
||
);
|
||
|
||
// (3) Text fades. Completes at 40% → fades slightly before push lands.
|
||
tl.to(
|
||
".text-group",
|
||
{ opacity: 0, duration: TIMING.heroDur * 0.4, ease: "power2.out" },
|
||
TIMING.displaceAt,
|
||
);
|
||
|
||
/* ----------------------------------------------------------------
|
||
PHASE 4: Breathing — onUpdate so it MULTIPLIES onto the 1.3 scale.
|
||
Dual frequencies (1.0s scale, 1.33s rotation) for organic motion.
|
||
---------------------------------------------------------------- */
|
||
const heroEl = document.querySelector(".hero");
|
||
const HERO_FINAL_SCALE = 1.3;
|
||
const HERO_FINAL_ROTATION = 0;
|
||
const SCALE_PERIOD = 1.0; // seconds per scale cycle
|
||
const ROTATE_PERIOD = 1.333; // seconds per rotation cycle — not a simple ratio of SCALE_PERIOD
|
||
const SCALE_AMP = 0.05;
|
||
const ROTATE_AMP = 3;
|
||
|
||
const breathDur = TOTAL_DURATION - TIMING.idleStart;
|
||
|
||
tl.to(
|
||
{ tick: 0 },
|
||
{
|
||
tick: 1,
|
||
duration: breathDur,
|
||
ease: "none",
|
||
onUpdate: function () {
|
||
const idleTime = Math.max(0, tl.time() - TIMING.idleStart);
|
||
const omegaS = (idleTime / SCALE_PERIOD) * Math.PI * 2;
|
||
const omegaR = (idleTime / ROTATE_PERIOD) * Math.PI * 2;
|
||
gsap.set(heroEl, {
|
||
scale: HERO_FINAL_SCALE * (1 + Math.sin(omegaS) * SCALE_AMP),
|
||
rotation: HERO_FINAL_ROTATION + Math.sin(omegaR) * ROTATE_AMP,
|
||
});
|
||
},
|
||
},
|
||
TIMING.idleStart,
|
||
);
|
||
</script>
|
||
</body>
|
||
</html>
|