mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
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.
862 lines
28 KiB
HTML
862 lines
28 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1920, height=1080" />
|
||
<title>Scene 03 — Frames Anchor Chain Reveal</title>
|
||
|
||
<!--
|
||
Frames-native version of the scene-03-anchor-chain-reveal concept.
|
||
Same 5-phase choreography, GSAP-driven, seek-safe.
|
||
|
||
Audio (assumed accompanying narration):
|
||
"Meet Frames, the HTML video composition toolkit for building,
|
||
previewing, and rendering programmable motion."
|
||
|
||
Sub-shots (local time, 8s total):
|
||
0.0 – 1.2s "Frames" Brand reveal (hacker-flip)
|
||
1.2 – 4.0s "HTML VIDEO" Text swap + rolling ticker
|
||
4.0 – 6.3s "60FPS" Counter + capability cloud
|
||
6.3 – 8.0s "Built for Motion" Capability strip
|
||
|
||
Placeholders (self-contained — no asset files needed):
|
||
inline-SVG "HF" mark — brand logo (swap for your image)
|
||
CSS initials circles — user avatars (edit CREATOR_INITIALS)
|
||
CSS text chips — partner brand logos (edit --brand-name)
|
||
Replace with real assets for production.
|
||
-->
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
|
||
|
||
<style>
|
||
:root {
|
||
/* Palette — direct port of the the source COLORS constants */
|
||
--text-primary: #ffffff;
|
||
--text-muted: rgba(255, 255, 255, 0.45);
|
||
--brand-green: #00e676;
|
||
--bg-grad-from: #0a1a2e;
|
||
--bg-grad-to: #1a0a2e;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
background: #000;
|
||
font-family:
|
||
"Inter",
|
||
system-ui,
|
||
-apple-system,
|
||
sans-serif;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* ============================================================
|
||
BACKGROUND (port of <FrostedGlassBackground />)
|
||
============================================================ */
|
||
.bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(ellipse at 30% 20%, rgba(0, 230, 118, 0.18), transparent 50%),
|
||
radial-gradient(ellipse at 70% 80%, rgba(120, 60, 220, 0.18), transparent 50%),
|
||
linear-gradient(135deg, var(--bg-grad-from), var(--bg-grad-to));
|
||
}
|
||
|
||
/* Camera wrapper — port of <CameraSystem /> */
|
||
.camera {
|
||
position: absolute;
|
||
inset: 0;
|
||
transform-origin: center center;
|
||
}
|
||
|
||
/* ============================================================
|
||
PHASES 1–3 (BrandReveal): logo + decode + swap + recenter
|
||
============================================================ */
|
||
.brand-stage {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 50; /* above cloud SVG (z:1), below logo (z:100) */
|
||
}
|
||
.anchor-shift {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 35px;
|
||
/* GSAP tweens .x on this element for Phase-2 recenter */
|
||
}
|
||
.anchor-logo {
|
||
position: relative;
|
||
width: 192px;
|
||
height: 192px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 100; /* highest — sits above lines + avatars */
|
||
opacity: 1;
|
||
/* initial scale(0) set by GSAP fromTo — no CSS transform here */
|
||
}
|
||
.anchor-logo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
|
||
}
|
||
.anchor-text {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.phase1-text {
|
||
display: flex;
|
||
perspective: 800px; /* required for the per-glyph rotateX */
|
||
white-space: nowrap;
|
||
}
|
||
.flip-glyph {
|
||
position: relative;
|
||
display: inline-block;
|
||
font-size: 163px; /* 1920 × 0.085 — matches the source brandFontSize */
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.flip-glyph .ghost {
|
||
opacity: 0;
|
||
}
|
||
.flip-glyph .anim {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
color: var(--text-primary);
|
||
opacity: 0;
|
||
transform: perspective(600px) rotateX(90deg);
|
||
transform-origin: bottom;
|
||
backface-visibility: hidden;
|
||
}
|
||
.flip-glyph.space {
|
||
min-width: 0.35em;
|
||
}
|
||
|
||
.phase2-claim {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
opacity: 0;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 40px;
|
||
}
|
||
.claim-rank {
|
||
color: var(--brand-green);
|
||
font-size: 163px;
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.claim-ai,
|
||
.claim-video {
|
||
color: var(--text-primary);
|
||
font-size: 163px;
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
/* Vertical ticker — port of <RollingWord /> */
|
||
.ticker-window {
|
||
height: 204px; /* fontSize × 1.25 = 163 × 1.25 ≈ 204 */
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
vertical-align: bottom;
|
||
}
|
||
.ticker-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
will-change: transform;
|
||
}
|
||
.ticker-item {
|
||
height: 204px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--text-primary);
|
||
font-weight: 900;
|
||
font-size: 163px;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* ============================================================
|
||
PHASE 4 (CreatorCloud): counter + avatar cloud + lines
|
||
============================================================ */
|
||
.cloud-stage {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 10; /* below brand-stage's logo (z:100), below counter */
|
||
opacity: 0; /* GSAP fades it in */
|
||
}
|
||
.counter-pin {
|
||
position: absolute;
|
||
top: 3%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
text-align: center;
|
||
z-index: 60; /* above brand-stage so it overlays cleanly */
|
||
}
|
||
.count {
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 900;
|
||
font-size: 115px; /* 1920 × 0.06 */
|
||
color: var(--brand-green);
|
||
display: inline-block;
|
||
min-width: 200px;
|
||
text-align: right;
|
||
}
|
||
.count-suffix {
|
||
font-weight: 900;
|
||
font-size: 115px;
|
||
color: var(--brand-green);
|
||
opacity: 0; /* GSAP fades in after count */
|
||
}
|
||
.cloud-lines {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
.cloud-avatars {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 10;
|
||
}
|
||
.cloud-avatar {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||
opacity: 0;
|
||
/* initial scale(0) set by GSAP fromTo — no CSS transform here */
|
||
background: linear-gradient(135deg, #6b8cff, #a6b3ff);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-weight: 700;
|
||
font-size: 32px;
|
||
}
|
||
|
||
/* ============================================================
|
||
PHASE 5 (BrandShowcase): label + scrolling brand strip
|
||
============================================================ */
|
||
.brand-strip {
|
||
position: absolute;
|
||
bottom: 8%;
|
||
left: 0;
|
||
right: 0;
|
||
opacity: 0; /* GSAP fades + translateY in via fromTo */
|
||
z-index: 70;
|
||
}
|
||
.brand-label {
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
font-size: 27px; /* 1920 × 0.014 */
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
}
|
||
.brand-strip-window {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 80px;
|
||
overflow: hidden;
|
||
}
|
||
.brand-strip-track {
|
||
display: flex;
|
||
gap: 110px;
|
||
}
|
||
.brand-logo {
|
||
width: 170px;
|
||
height: 52px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
/* initial scale(0.5) set by GSAP fromTo — no CSS transform here */
|
||
}
|
||
.brand-logo::before {
|
||
content: var(--brand-name);
|
||
font-family: Inter, system-ui, sans-serif;
|
||
font-size: 30px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.08em;
|
||
white-space: nowrap;
|
||
color: rgba(255, 255, 255, 0.72);
|
||
}
|
||
.brand-nvidia {
|
||
--brand-name: "NVIDIA";
|
||
}
|
||
.brand-visa {
|
||
--brand-name: "VISA";
|
||
}
|
||
.brand-zoominfo {
|
||
--brand-name: "ZOOMINFO";
|
||
}
|
||
.brand-github {
|
||
--brand-name: "GITHUB";
|
||
}
|
||
|
||
/* Vignette overlay */
|
||
.vignette {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
|
||
pointer-events: none;
|
||
z-index: 200;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="root"
|
||
data-composition-id="main"
|
||
data-start="0"
|
||
data-duration="8"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
>
|
||
<div class="bg"></div>
|
||
|
||
<div class="camera">
|
||
<!-- =====================================================
|
||
PHASES 1–3: BrandReveal (logo + hacker-flip + swap)
|
||
===================================================== -->
|
||
<div
|
||
id="phase-anchor"
|
||
class="brand-stage clip"
|
||
data-start="0"
|
||
data-duration="8"
|
||
data-track-index="1"
|
||
>
|
||
<div class="anchor-shift" data-layout-allow-overflow>
|
||
<!-- Anchor logo — persists across all phases -->
|
||
<div class="anchor-logo">
|
||
<!-- Inline-SVG placeholder mark — swap for your logo image -->
|
||
<svg
|
||
class="logo-mark"
|
||
viewBox="0 0 100 100"
|
||
width="100%"
|
||
height="100%"
|
||
role="img"
|
||
aria-label="frames logo"
|
||
>
|
||
<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>
|
||
|
||
<!-- Swappable text zone -->
|
||
<div class="anchor-text">
|
||
<!-- Phase 1: 'Frames' decoded character by character -->
|
||
<div class="phase1-text" aria-label="Frames">
|
||
<!-- Spans generated by the script below -->
|
||
</div>
|
||
|
||
<!-- Phase 2: 'HTML video render/ship' claim -->
|
||
<div class="phase2-claim">
|
||
<span class="claim-rank">HTML</span>
|
||
<span class="claim-ai">Video</span>
|
||
<div class="claim-ticker">
|
||
<div class="ticker-window" data-layout-allow-overflow>
|
||
<div class="ticker-stack">
|
||
<div class="ticker-item">render</div>
|
||
<div class="ticker-item">ship</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- =====================================================
|
||
PHASE 4: CreatorCloud (counter + avatar ring + lines)
|
||
===================================================== -->
|
||
<div
|
||
id="phase-cloud"
|
||
class="cloud-stage clip"
|
||
data-start="3.6"
|
||
data-duration="4.4"
|
||
data-track-index="2"
|
||
>
|
||
<div class="counter-pin">
|
||
<span class="count">60</span><span class="count-suffix">FPS</span>
|
||
</div>
|
||
<svg class="cloud-lines" width="1920" height="1080">
|
||
<defs>
|
||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#00e676" stop-opacity="0.8" />
|
||
<stop offset="100%" stop-color="#00e676" stop-opacity="0.2" />
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- <line> elements generated by JS -->
|
||
</svg>
|
||
<div class="cloud-avatars">
|
||
<!-- .cloud-avatar elements generated by JS -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- =====================================================
|
||
PHASE 5: BrandShowcase (label + scrolling logos)
|
||
===================================================== -->
|
||
<div
|
||
id="phase-brands"
|
||
class="brand-strip clip"
|
||
data-start="6.3"
|
||
data-duration="1.7"
|
||
data-track-index="3"
|
||
>
|
||
<div class="brand-label">Trusted by Leading Brands</div>
|
||
<div class="brand-strip-window" data-layout-allow-overflow>
|
||
<div class="brand-strip-track">
|
||
<div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>
|
||
<div class="brand-logo brand-visa" aria-label="Visa"></div>
|
||
<div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>
|
||
<div class="brand-logo brand-github" aria-label="GitHub"></div>
|
||
<div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>
|
||
<div class="brand-logo brand-visa" aria-label="Visa"></div>
|
||
<div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>
|
||
<div class="brand-logo brand-github" aria-label="GitHub"></div>
|
||
<div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>
|
||
<div class="brand-logo brand-visa" aria-label="Visa"></div>
|
||
<div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>
|
||
<div class="brand-logo brand-github" aria-label="GitHub"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.camera -->
|
||
|
||
<div class="vignette"></div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ================================================================
|
||
CONSTANTS — all derived once, never recomputed at tween time.
|
||
Composition is 1920 × 1080, total duration 8.0s.
|
||
================================================================ */
|
||
const W = 1920,
|
||
H = 1080;
|
||
const FPS_HASH = 60; // synthetic clock for the hacker-flip flicker hash only
|
||
|
||
// Self-contained placeholder data — swap for real asset paths in production.
|
||
const CREATOR_INITIALS = ["JC", "MK", "AR", "TS", "LP", "DV", "NW", "SB", "KH", "EM"];
|
||
|
||
const TIMING = {
|
||
// Phase 1 — logo pop + Frames decode
|
||
logoPop: 0.32,
|
||
flipStart: 0.4, // logoPop + ~5/60
|
||
flipStagger: 0.033, // 2 frames at 60fps per glyph
|
||
flipDuration: 0.55,
|
||
|
||
// Phase 2 — slide-out + claim slide-in.
|
||
swapTrigger: 1.38,
|
||
swapDuration: 0.55,
|
||
claimFadeIn: 1.65, // swapTrigger + ~8/60
|
||
claimFadeDur: 0.27,
|
||
|
||
// Rolling ticker — render → ship.
|
||
tickerTrigger: 2.35,
|
||
tickerDuration: 0.45,
|
||
|
||
// Phase 3 — logo recenters (anchored ~0.25s before "trusted")
|
||
recenterTrigger: 3.87,
|
||
recenterDuration: 0.9,
|
||
|
||
// Phase 4 — cloud + counter.
|
||
cloudFadeIn: 4.12,
|
||
cloudFadeDur: 0.4,
|
||
avatarEntryStart: 4.3,
|
||
avatarStagger: 0.1,
|
||
avatarEntryDur: 0.55,
|
||
linesDelay: 0.2, // gap after last avatar
|
||
linesDur: 0.45,
|
||
lineStagger: 0.033,
|
||
|
||
counterStart: 4.92,
|
||
counterDuration: 0.85,
|
||
suffixDelay: 0.05,
|
||
|
||
// Phase 5 — brand logos
|
||
brandStripStart: 6.5,
|
||
brandStripFadeDur: 0.35,
|
||
brandLogoStagger: 0.1,
|
||
brandScrollDur: 1.4, // until end (8.0 - 6.5 - 0.1 buffer)
|
||
};
|
||
|
||
// Layout constants — shared center keeps logo, avatars, and lines aligned.
|
||
const RECENTER_OFFSET = -W * 0.12; // = -230.4 px — container shift in Phase 2
|
||
const CENTER_OFFSET = 800; // Phase 3: logo center aligns with cloud center.
|
||
|
||
// Cloud geometry — logo final position and line origins derive from this center.
|
||
const CLOUD_CENTER_X = W / 2;
|
||
const CLOUD_CENTER_Y = H * 0.47; // = 507.6 px
|
||
const VERTICAL_ADJUST = CLOUD_CENTER_Y - H / 2;
|
||
const CLOUD_RADIUS_X = W * 0.25; // = 480 px
|
||
const CLOUD_RADIUS_Y = H * 0.22; // = 237.6 px
|
||
const AVATAR_COUNT = 10;
|
||
|
||
/* ================================================================
|
||
BUILD DOM — flip glyphs, avatars, connection lines.
|
||
Runs synchronously before the timeline registration.
|
||
================================================================ */
|
||
|
||
// ---- Hacker-flip glyphs for "Frames" -------------------------
|
||
const phase1 = document.querySelector(".phase1-text");
|
||
const decodeText = "Frames";
|
||
decodeText.split("").forEach((char, index) => {
|
||
const span = document.createElement("span");
|
||
span.className = "flip-glyph" + (char === " " ? " space" : "");
|
||
span.dataset.char = char;
|
||
span.dataset.index = String(index);
|
||
const ghost = document.createElement("span");
|
||
ghost.className = "ghost";
|
||
ghost.textContent = char === " " ? " " : char;
|
||
const anim = document.createElement("span");
|
||
anim.className = "anim";
|
||
anim.textContent = char === " " ? " " : char;
|
||
span.append(ghost, anim);
|
||
phase1.appendChild(span);
|
||
});
|
||
|
||
// ---- Avatar cloud + connection lines ------------------------------
|
||
const cloudLines = document.querySelector(".cloud-lines");
|
||
const cloudAvatars = document.querySelector(".cloud-avatars");
|
||
const avatarPositions = [];
|
||
const avatars = CREATOR_INITIALS.slice(0, AVATAR_COUNT);
|
||
|
||
for (let i = 0; i < avatars.length; i++) {
|
||
const angle = (i / avatars.length) * Math.PI * 2 - Math.PI / 2;
|
||
const x = CLOUD_CENTER_X + Math.cos(angle) * CLOUD_RADIUS_X;
|
||
const y = CLOUD_CENTER_Y + Math.sin(angle) * CLOUD_RADIUS_Y;
|
||
avatarPositions.push({ x, y });
|
||
|
||
const size = 90 + (i % 3) * 15;
|
||
const av = document.createElement("div");
|
||
av.className = "cloud-avatar";
|
||
av.style.left = x - size / 2 + "px";
|
||
av.style.top = y - size / 2 + "px";
|
||
av.style.width = size + "px";
|
||
av.style.height = size + "px";
|
||
av.dataset.index = String(i);
|
||
// Initials placeholder — deterministic hue from index (no asset files).
|
||
av.textContent = avatars[i];
|
||
av.style.background = `linear-gradient(135deg, hsl(${(220 + i * 36) % 360}, 70%, 62%), hsl(${(260 + i * 36) % 360}, 70%, 46%))`;
|
||
cloudAvatars.appendChild(av);
|
||
|
||
// SVG line — both endpoints start at center; will tween x2/y2 outward.
|
||
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
||
line.setAttribute("x1", CLOUD_CENTER_X);
|
||
line.setAttribute("y1", CLOUD_CENTER_Y);
|
||
line.setAttribute("x2", CLOUD_CENTER_X);
|
||
line.setAttribute("y2", CLOUD_CENTER_Y);
|
||
line.setAttribute("stroke", "#00e676");
|
||
line.setAttribute("stroke-width", "2");
|
||
line.setAttribute("stroke-dasharray", "4 4");
|
||
line.setAttribute("stroke-opacity", "0");
|
||
cloudLines.appendChild(line);
|
||
}
|
||
|
||
/* ================================================================
|
||
TIMELINE
|
||
================================================================ */
|
||
window.__timelines = window.__timelines || {};
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
// ----------------------------------------------------------------
|
||
// Camera: gentle initial zoom + drift. Finite, computed from duration.
|
||
// ----------------------------------------------------------------
|
||
tl.fromTo(".camera", { scale: 0.95 }, { scale: 1.0, duration: 0.95, ease: "power2.out" }, 0);
|
||
|
||
// Subtle drift across the whole 8s. Finite yoyo cycles, not infinite.
|
||
// sin(frame * 0.003) cycle = 2π / 0.003 frames = 2094 frames ≈ 34.9s at 60fps.
|
||
// Over 8s we see roughly a quarter cycle — model as a single slow yoyo.
|
||
tl.fromTo(
|
||
".camera",
|
||
{ x: 0, y: 0 },
|
||
{ x: 3, y: 2, duration: 4, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||
0,
|
||
);
|
||
|
||
// ----------------------------------------------------------------
|
||
// PHASE 1: Logo pop + Frames decode
|
||
// ----------------------------------------------------------------
|
||
tl.fromTo(
|
||
".anchor-logo",
|
||
{ scale: 0 },
|
||
{
|
||
scale: 1,
|
||
duration: 0.6,
|
||
ease: "back.out(1.4)", // spring(stiffness:180, damping:12)
|
||
},
|
||
TIMING.logoPop,
|
||
);
|
||
|
||
// Hacker-flip per glyph. Each glyph has its own tween with onUpdate
|
||
// that derives the visible character from time.
|
||
const CHAR_POOL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&";
|
||
const FLICKER = 3; // frames between glyph reshuffles
|
||
const REVEAL_AT = 0.6; // progress threshold to swap random → real
|
||
|
||
function pseudoHash(i, t) {
|
||
// Cheap deterministic 32-bit mix — no Math.random, no Date.now
|
||
return ((i * 374761393 + t * 668265263) >>> 0) % CHAR_POOL.length;
|
||
}
|
||
|
||
document.querySelectorAll(".flip-glyph").forEach((glyph) => {
|
||
const index = Number(glyph.dataset.index);
|
||
const real = glyph.dataset.char === " " ? " " : glyph.dataset.char;
|
||
const anim = glyph.querySelector(".anim");
|
||
const start = TIMING.flipStart + index * TIMING.flipStagger;
|
||
|
||
tl.fromTo(
|
||
anim,
|
||
{ rotationX: 90, opacity: 0, "--p": 0 },
|
||
{
|
||
rotationX: 0,
|
||
opacity: 1,
|
||
"--p": 1,
|
||
duration: TIMING.flipDuration,
|
||
ease: "back.out(1.6)", // spring(stiffness:150, damping:14)
|
||
onUpdate: function () {
|
||
const p = Number(gsap.getProperty(anim, "--p"));
|
||
if (p >= REVEAL_AT) {
|
||
if (anim.textContent !== real) anim.textContent = real;
|
||
} else {
|
||
const localFrame = Math.floor((tl.time() - start) * FPS_HASH);
|
||
const bucket = Math.max(0, Math.floor(localFrame / FLICKER));
|
||
anim.textContent = CHAR_POOL[pseudoHash(index, bucket)];
|
||
}
|
||
},
|
||
},
|
||
start,
|
||
);
|
||
});
|
||
|
||
// ----------------------------------------------------------------
|
||
// PHASE 2: Swap — old text slides out, container shifts left,
|
||
// claim fades in at the old text's origin.
|
||
// ----------------------------------------------------------------
|
||
tl.to(
|
||
".phase1-text",
|
||
{
|
||
x: 200,
|
||
opacity: 0,
|
||
duration: TIMING.swapDuration * 0.5,
|
||
ease: "power3.out",
|
||
},
|
||
TIMING.swapTrigger,
|
||
);
|
||
tl.set(".phase1-text .anim", { opacity: 0 }, TIMING.swapTrigger + TIMING.swapDuration * 0.5);
|
||
|
||
tl.to(
|
||
".anchor-shift",
|
||
{
|
||
x: RECENTER_OFFSET,
|
||
duration: TIMING.swapDuration,
|
||
ease: "power3.out", // spring(stiffness:80, damping:18)
|
||
},
|
||
TIMING.swapTrigger,
|
||
);
|
||
|
||
tl.to(
|
||
".phase2-claim",
|
||
{
|
||
opacity: 1,
|
||
duration: TIMING.claimFadeDur,
|
||
ease: "power2.out",
|
||
},
|
||
TIMING.claimFadeIn,
|
||
);
|
||
|
||
// Rolling ticker — render → ship.
|
||
tl.to(
|
||
".ticker-stack",
|
||
{
|
||
y: "-=204", // one itemHeight
|
||
duration: TIMING.tickerDuration,
|
||
ease: "back.out(1.4)", // spring(stiffness:120, damping:14)
|
||
},
|
||
TIMING.tickerTrigger,
|
||
);
|
||
|
||
// ----------------------------------------------------------------
|
||
// PHASE 3: Logo recenters + text fades out.
|
||
// ----------------------------------------------------------------
|
||
tl.to(
|
||
".anchor-text",
|
||
{
|
||
opacity: 0,
|
||
duration: 0.3,
|
||
ease: "power2.out",
|
||
},
|
||
TIMING.recenterTrigger,
|
||
);
|
||
|
||
tl.to(
|
||
".anchor-logo",
|
||
{
|
||
x: CENTER_OFFSET,
|
||
y: VERTICAL_ADJUST,
|
||
duration: TIMING.recenterDuration,
|
||
ease: "power2.out", // spring(stiffness:45, damping:22) — gentle
|
||
},
|
||
TIMING.recenterTrigger,
|
||
);
|
||
|
||
// ----------------------------------------------------------------
|
||
// PHASE 4: Avatar cloud + counter.
|
||
// ----------------------------------------------------------------
|
||
tl.to(
|
||
".cloud-stage",
|
||
{
|
||
opacity: 1,
|
||
duration: TIMING.cloudFadeDur,
|
||
ease: "power2.out",
|
||
},
|
||
TIMING.cloudFadeIn,
|
||
);
|
||
|
||
// Avatars cascade in.
|
||
tl.fromTo(
|
||
".cloud-avatar",
|
||
{ scale: 0, opacity: 0 },
|
||
{
|
||
scale: 1,
|
||
opacity: 1,
|
||
duration: TIMING.avatarEntryDur,
|
||
ease: "back.out(1.7)",
|
||
stagger: { each: TIMING.avatarStagger, from: "start" },
|
||
},
|
||
TIMING.avatarEntryStart,
|
||
);
|
||
|
||
// Connection lines draw outward from center after all avatars settle.
|
||
const lastAvatarEnd =
|
||
TIMING.avatarEntryStart + TIMING.avatarStagger * (AVATAR_COUNT - 1) + TIMING.avatarEntryDur;
|
||
const linesStart = lastAvatarEnd + TIMING.linesDelay;
|
||
|
||
document.querySelectorAll(".cloud-lines line").forEach((line, i) => {
|
||
const { x, y } = avatarPositions[i];
|
||
tl.to(
|
||
line,
|
||
{
|
||
attr: { x2: x, y2: y },
|
||
strokeOpacity: 0.6,
|
||
duration: TIMING.linesDur,
|
||
ease: "power2.out",
|
||
},
|
||
linesStart + i * TIMING.lineStagger,
|
||
);
|
||
});
|
||
|
||
const countEl = document.querySelector(".count");
|
||
const suffixEl = document.querySelector(".count-suffix");
|
||
|
||
// Counter pulse — text stays deterministic under timeline seeking.
|
||
tl.fromTo(
|
||
countEl,
|
||
{
|
||
scale: 0.88,
|
||
},
|
||
{
|
||
scale: 1,
|
||
duration: TIMING.counterDuration,
|
||
ease: "power2.out",
|
||
},
|
||
TIMING.counterStart,
|
||
);
|
||
|
||
tl.to(
|
||
suffixEl,
|
||
{
|
||
opacity: 1,
|
||
duration: 0.3,
|
||
ease: "back.out(1.6)",
|
||
},
|
||
TIMING.counterStart + TIMING.counterDuration + TIMING.suffixDelay,
|
||
);
|
||
|
||
// ----------------------------------------------------------------
|
||
// PHASE 5: Brand strip — label + scrolling partner logos.
|
||
// ----------------------------------------------------------------
|
||
tl.fromTo(
|
||
".brand-strip",
|
||
{ opacity: 0, y: 40 },
|
||
{
|
||
opacity: 1,
|
||
y: 0,
|
||
duration: TIMING.brandStripFadeDur,
|
||
ease: "power2.out",
|
||
},
|
||
TIMING.brandStripStart,
|
||
);
|
||
|
||
tl.fromTo(
|
||
".brand-logo",
|
||
{ scale: 0.5, opacity: 0 },
|
||
{
|
||
scale: 1,
|
||
opacity: 0.7,
|
||
duration: 0.5,
|
||
ease: "back.out(1.4)",
|
||
stagger: { each: TIMING.brandLogoStagger, from: "start" },
|
||
},
|
||
TIMING.brandStripStart,
|
||
);
|
||
|
||
// Finite horizontal scroll. Distance derived from remaining time × speed.
|
||
// Speed in original: 0.8 px/frame at 30fps = 24 px/s. Over 1.4s ≈ 33.6 px.
|
||
// For a more visible scroll, multiply by 4 → ~135 px.
|
||
tl.to(
|
||
".brand-strip-track",
|
||
{
|
||
x: -135,
|
||
duration: TIMING.brandScrollDur,
|
||
ease: "none",
|
||
},
|
||
TIMING.brandStripStart,
|
||
);
|
||
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body>
|
||
</html>
|