Files
AgentCompany/promo-video/index.html
T
2026-04-21 12:44:33 -04:00

1020 lines
36 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>AgentCompany — Promo</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
/* ============================================================
Global
============================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
background: #ffffff;
font-family: "Space Grotesk", sans-serif;
color: #212121;
-webkit-font-smoothing: antialiased;
}
.scene {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
}
#scene1 { z-index: 1; background: #ffffff; }
#scene2, #scene3, #scene5, #scene6 { z-index: 2; background: #ffffff; opacity: 0; visibility: hidden; }
#scene4 {
z-index: 2;
background: radial-gradient(ellipse at 20% 30%, #2a1b4e 0%, #1a0f3a 55%, #120828 100%);
opacity: 0;
visibility: hidden;
}
.scene-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 110px 160px;
box-sizing: border-box;
}
/* Type roles */
.mono {
font-family: "JetBrains Mono", monospace;
font-weight: 500;
font-size: 18px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #5f5f6b;
}
.serif {
font-family: "Fraunces", serif;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.02;
color: #000000;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.sans { font-family: "Space Grotesk", sans-serif; }
/* ============================================================
Ambient decoratives (shared)
============================================================ */
.ambient-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
/* ============================================================
Scene 1 — Opening title
============================================================ */
#scene1 .glow {
width: 900px;
height: 900px;
background: rgba(24, 99, 220, 0.08);
top: 180px;
left: 510px;
}
#scene1 .glow-b {
width: 700px;
height: 700px;
background: rgba(155, 96, 170, 0.10);
top: 420px;
right: 280px;
}
#scene1 .nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#scene1 .brand {
display: flex;
align-items: center;
gap: 16px;
}
#scene1 .brand img { width: 44px; height: 44px; border-radius: 11px; }
#scene1 .brand-name {
font-family: "Fraunces", serif;
font-weight: 600;
font-size: 24px;
color: #000;
letter-spacing: -0.01em;
}
#scene1 .version-chip {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
color: #212121;
padding: 8px 14px;
border: 1px solid #d9d9dd;
border-radius: 9999px;
letter-spacing: 0.1em;
}
#scene1 .center {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 28px;
}
#scene1 .eyebrow {
color: #1863dc;
}
#scene1 .title {
font-size: 176px;
color: #000;
}
#scene1 .title .accent {
font-style: italic;
font-weight: 400;
color: #1863dc;
}
#scene1 .sub {
font-family: "Space Grotesk", sans-serif;
font-size: 32px;
font-weight: 400;
color: #212121;
max-width: 920px;
line-height: 1.35;
}
#scene1 .footline {
display: flex;
justify-content: space-between;
align-items: flex-end;
color: #5f5f6b;
font-size: 18px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.14em;
text-transform: uppercase;
}
#scene1 .url-cta {
color: #000;
}
#scene1 .url-cta .arrow { color: #1863dc; margin-left: 12px; }
/* ============================================================
Scene 2 — Describe mission
============================================================ */
#scene2 .tag { color: #1863dc; }
#scene2 .heading {
font-size: 120px;
margin-top: 16px;
max-width: 1400px;
}
#scene2 .heading .em {
font-style: italic;
font-weight: 400;
}
#scene2 .form-wrap {
margin-top: 70px;
width: 1320px;
}
#scene2 .card {
background: #ffffff;
border: 1px solid #d9d9dd;
border-radius: 22px;
padding: 40px 48px 36px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
position: relative;
}
#scene2 .card-label {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #5f5f6b;
margin-bottom: 20px;
}
#scene2 .prompt-text {
font-family: "Fraunces", serif;
font-size: 44px;
line-height: 1.28;
color: #000;
letter-spacing: -0.01em;
min-height: 180px;
}
#scene2 .cursor {
display: inline-block;
width: 3px;
height: 44px;
background: #1863dc;
vertical-align: -8px;
margin-left: 4px;
}
#scene2 .submit-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid #f2f2f2;
}
#scene2 .hint {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
color: #5f5f6b;
letter-spacing: 0.18em;
text-transform: uppercase;
}
#scene2 .btn {
background: #000;
color: #fff;
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
font-size: 20px;
padding: 18px 34px;
border-radius: 9999px;
letter-spacing: -0.005em;
position: relative;
}
#scene2 .btn .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #1863dc;
margin-right: 12px;
vertical-align: middle;
}
/* ============================================================
Scene 3 — CEO recruits team (org chart)
============================================================ */
#scene3 .tag { color: #1863dc; }
#scene3 .heading {
font-size: 120px;
margin-top: 16px;
max-width: 1500px;
}
#scene3 .chart {
flex: 1;
position: relative;
margin-top: 40px;
}
#scene3 .chart svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#scene3 .node {
position: absolute;
background: #fff;
border: 1px solid #d9d9dd;
border-radius: 22px;
padding: 20px 26px;
display: flex;
align-items: center;
gap: 16px;
min-width: 260px;
}
#scene3 .node .avatar {
width: 48px;
height: 48px;
border-radius: 14px;
background: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
font-family: "JetBrains Mono", monospace;
font-weight: 500;
font-size: 16px;
color: #000;
}
#scene3 .node .meta { display: flex; flex-direction: column; }
#scene3 .node .role {
font-family: "Fraunces", serif;
font-weight: 600;
font-size: 22px;
color: #000;
letter-spacing: -0.01em;
}
#scene3 .node .tag-sm {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: #5f5f6b;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-top: 4px;
}
#scene3 .ceo {
left: 50%;
top: 0;
transform: translateX(-50%);
border-color: #000;
background: #000;
color: #fff;
}
#scene3 .ceo .avatar { background: #1863dc; color: #fff; }
#scene3 .ceo .role { color: #fff; }
#scene3 .ceo .tag-sm { color: #93939f; }
#scene3 .n1 { left: 0; top: 220px; }
#scene3 .n2 { left: 340px; top: 220px; }
#scene3 .n3 { right: 340px; top: 220px; }
#scene3 .n4 { right: 0; top: 220px; }
/* ============================================================
Scene 4 — Purple band features
============================================================ */
#scene4 .glow-purple {
width: 1400px;
height: 1400px;
background: rgba(155, 96, 170, 0.16);
top: -400px;
right: -200px;
}
#scene4 .glow-blue {
width: 900px;
height: 900px;
background: rgba(76, 110, 230, 0.18);
bottom: -260px;
left: -100px;
}
#scene4 .tag { color: #c9b8e0; }
#scene4 .heading {
font-size: 108px;
color: #fff;
margin-top: 14px;
max-width: 1500px;
}
#scene4 .heading .em {
font-style: italic;
font-weight: 400;
color: #cbb4ff;
}
#scene4 .grid {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
#scene4 .tile {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 22px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
#scene4 .tile .shot {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 14px;
overflow: hidden;
background: #0e0820;
border: 1px solid rgba(255, 255, 255, 0.10);
}
#scene4 .tile .shot img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
display: block;
}
#scene4 .tile .cap-label {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #d4c3ea;
}
#scene4 .tile .cap-title {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 26px;
color: #fff;
letter-spacing: -0.01em;
line-height: 1.2;
}
/* ============================================================
Scene 5 — Human in the loop
============================================================ */
#scene5 .scene-content { flex-direction: row; gap: 80px; align-items: center; }
#scene5 .left { flex: 0 0 620px; display: flex; flex-direction: column; gap: 28px; }
#scene5 .tag { color: #1863dc; }
#scene5 .heading {
font-size: 92px;
color: #000;
max-width: 620px;
}
#scene5 .heading .em { font-style: italic; font-weight: 400; }
#scene5 .body {
font-family: "Space Grotesk", sans-serif;
font-size: 26px;
line-height: 1.45;
color: #212121;
max-width: 580px;
}
#scene5 .bullets {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 12px;
}
#scene5 .bullet {
display: flex;
align-items: center;
gap: 14px;
font-family: "JetBrains Mono", monospace;
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #212121;
}
#scene5 .bullet .box {
width: 10px;
height: 10px;
background: #1863dc;
}
#scene5 .right {
flex: 1;
height: 720px;
position: relative;
}
#scene5 .shot-card {
width: 100%;
height: 100%;
border-radius: 22px;
overflow: hidden;
border: 1px solid #d9d9dd;
background: #fff;
}
#scene5 .shot-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
#scene5 .approve-chip {
position: absolute;
top: 48px;
right: 48px;
background: #fff;
border: 1px solid #1863dc;
border-radius: 9999px;
padding: 14px 22px;
display: flex;
align-items: center;
gap: 10px;
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
font-size: 20px;
color: #1863dc;
box-shadow: 0 10px 30px rgba(24, 99, 220, 0.18);
}
#scene5 .approve-chip .check {
width: 22px;
height: 22px;
border-radius: 50%;
background: #1863dc;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
}
/* ============================================================
Scene 6 — Close CTA
============================================================ */
#scene6 .glow {
width: 1200px;
height: 1200px;
background: rgba(24, 99, 220, 0.10);
top: -200px;
left: 50%;
transform: translateX(-50%);
}
#scene6 .scene-content {
align-items: center;
justify-content: center;
gap: 28px;
}
#scene6 .kicker { color: #5f5f6b; }
#scene6 .hero {
font-size: 156px;
text-align: center;
max-width: 1500px;
}
#scene6 .hero .em {
font-style: italic;
font-weight: 400;
color: #1863dc;
}
#scene6 .stats {
display: flex;
align-items: center;
gap: 60px;
margin-top: 24px;
}
#scene6 .stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#scene6 .stat .num {
font-family: "Fraunces", serif;
font-weight: 600;
font-size: 72px;
color: #000;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
#scene6 .stat .label {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #5f5f6b;
}
#scene6 .divider {
width: 1px;
height: 72px;
background: #d9d9dd;
}
#scene6 .cta {
margin-top: 28px;
display: flex;
align-items: center;
gap: 18px;
background-color: #000000;
color: #ffffff;
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
font-size: 30px;
padding: 26px 44px;
border-radius: 22px;
letter-spacing: -0.01em;
}
#scene6 .cta .arrow { color: #1863dc; font-size: 34px; line-height: 1; }
#scene6 .bottom {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
}
#scene6 .bottom img { width: 36px; height: 36px; border-radius: 9px; }
#scene6 .bottom .mark {
font-family: "Fraunces", serif;
font-weight: 600;
font-size: 22px;
color: #000;
letter-spacing: -0.01em;
}
/* ============================================================
Transition wipes (staggered blocks)
============================================================ */
.wipe {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
z-index: 50;
transform: translateX(-1920px);
pointer-events: none;
}
#wipe-a { background: #000000; }
#wipe-b { background: #1a0f3a; }
</style>
</head>
<body>
<div
id="root"
data-composition-id="main"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="32"
>
<!-- ================================================
SCENE 1 — Opening
================================================ -->
<div id="scene1" class="scene">
<div class="ambient-glow glow"></div>
<div class="ambient-glow glow-b"></div>
<div class="scene-content">
<div class="nav">
<div class="brand">
<img src="assets/icon.svg" alt="" />
<div class="brand-name">AgentCompany</div>
</div>
<div class="version-chip">v0.4.167</div>
</div>
<div class="center">
<div class="mono eyebrow">FOR AUTONOMOUS AI TEAMS</div>
<div class="serif title">
Launch an<br />AI company<span class="accent">.</span>
</div>
<div class="sub">
Describe your mission. A CEO agent recruits the team,
delegates work, and delivers real results.
</div>
</div>
<div class="footline">
<div>ENTERPRISE · LOCAL-FIRST · 26 PROVIDERS</div>
<div class="url-cta">agent-company.dev<span class="arrow">→</span></div>
</div>
</div>
</div>
<!-- ================================================
SCENE 2 — Describe mission
================================================ -->
<div id="scene2" class="scene">
<div class="scene-content">
<div class="mono tag">01 · DESCRIBE</div>
<div class="serif heading">
Describe your <span class="em">mission</span>.
</div>
<div class="form-wrap">
<div class="card">
<div class="card-label">COMPANY MISSION · PLAIN ENGLISH</div>
<div class="prompt-text">
<span id="s2-typed">Build a marketing agency that ships weekly content, tracks KPIs, and auto-reports to stakeholders.</span><span class="cursor" id="s2-cursor"></span>
</div>
<div class="submit-row">
<div class="hint">⌘ + ↵ TO SUBMIT</div>
<div class="btn" id="s2-btn"><span class="dot"></span>Create Company</div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================================
SCENE 3 — CEO recruits
================================================ -->
<div id="scene3" class="scene">
<div class="scene-content">
<div class="mono tag">02 · ASSEMBLE</div>
<div class="serif heading">
A CEO agent <span class="em" style="font-style: italic; font-weight: 400;">recruits</span> the team.
</div>
<div class="chart">
<svg viewBox="0 0 1600 540" preserveAspectRatio="none">
<g stroke="#1863dc" stroke-width="2" fill="none" stroke-linecap="round" id="s3-lines">
<path class="line" d="M 800 90 C 800 160, 170 160, 170 220" />
<path class="line" d="M 800 90 C 800 160, 510 160, 510 220" />
<path class="line" d="M 800 90 C 800 160, 1090 160, 1090 220" />
<path class="line" d="M 800 90 C 800 160, 1430 160, 1430 220" />
</g>
</svg>
<div class="node ceo" id="s3-ceo">
<div class="avatar">CEO</div>
<div class="meta">
<div class="role">Chief Executive</div>
<div class="tag-sm">AUTONOMOUS · CLAUDE OPUS</div>
</div>
</div>
<div class="node n1" id="s3-n1">
<div class="avatar">MK</div>
<div class="meta">
<div class="role">Marketing Lead</div>
<div class="tag-sm">HIRED · 00:03</div>
</div>
</div>
<div class="node n2" id="s3-n2">
<div class="avatar">CW</div>
<div class="meta">
<div class="role">Content Writer</div>
<div class="tag-sm">HIRED · 00:05</div>
</div>
</div>
<div class="node n3" id="s3-n3">
<div class="avatar">DA</div>
<div class="meta">
<div class="role">Data Analyst</div>
<div class="tag-sm">HIRED · 00:07</div>
</div>
</div>
<div class="node n4" id="s3-n4">
<div class="avatar">OP</div>
<div class="meta">
<div class="role">Ops Manager</div>
<div class="tag-sm">HIRED · 00:09</div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================================
SCENE 4 — Purple band features
================================================ -->
<div id="scene4" class="scene">
<div class="ambient-glow glow-purple"></div>
<div class="ambient-glow glow-blue"></div>
<div class="scene-content">
<div class="mono tag">03 · EXECUTE</div>
<div class="serif heading">
A team that <span class="em">actually works</span>.
</div>
<div class="grid">
<div class="tile" id="s4-t1">
<div class="shot"><img src="assets/Dashboard.jpeg" alt="" /></div>
<div class="cap-label">COMMAND DECK</div>
<div class="cap-title">Live company dashboard</div>
</div>
<div class="tile" id="s4-t2">
<div class="shot"><img src="assets/AI-Internal-Realtime-Message.jpeg" alt="" /></div>
<div class="cap-label">COLLABORATION</div>
<div class="cap-title">Real-time agent messages</div>
</div>
<div class="tile" id="s4-t3">
<div class="shot"><img src="assets/Auto-Task.jpeg" alt="" /></div>
<div class="cap-label">ORCHESTRATION</div>
<div class="cap-title">Self-assigning task queue</div>
</div>
<div class="tile" id="s4-t4">
<div class="shot"><img src="assets/Document-Center.jpeg" alt="" /></div>
<div class="cap-label">DELIVERABLES</div>
<div class="cap-title">AI-generated document center</div>
</div>
</div>
</div>
</div>
<!-- ================================================
SCENE 5 — Human in the loop
================================================ -->
<div id="scene5" class="scene">
<div class="scene-content">
<div class="left">
<div class="mono tag">04 · APPROVE</div>
<div class="serif heading">
You stay in <span class="em">control</span>.
</div>
<div class="body">
Gate sensitive moves behind human approval. Hiring, budget,
outbound messages — every critical decision waits for your sign-off.
</div>
<div class="bullets">
<div class="bullet"><span class="box"></span>AI CEO · full autonomy</div>
<div class="bullet"><span class="box"></span>AI CO-FOUNDER · ask first</div>
<div class="bullet"><span class="box"></span>AUDIT TRAIL · every decision</div>
</div>
</div>
<div class="right">
<div class="shot-card">
<img src="assets/Approval-by-Human.jpeg" alt="" />
</div>
<div class="approve-chip" id="s5-chip">
<span class="check">✓</span>
<span>Approved by founder</span>
</div>
</div>
</div>
</div>
<!-- ================================================
SCENE 6 — CTA close
================================================ -->
<div id="scene6" class="scene">
<div class="ambient-glow glow"></div>
<div class="scene-content">
<div class="mono kicker">READY TO LAUNCH?</div>
<div class="serif hero">
Start your<br />AI company <span class="em">today</span>.
</div>
<div class="stats">
<div class="stat">
<div class="num">26</div>
<div class="label">AI PROVIDERS</div>
</div>
<div class="divider"></div>
<div class="stat">
<div class="num">13,674+</div>
<div class="label">DOWNLOADS</div>
</div>
<div class="divider"></div>
<div class="stat">
<div class="num">100%</div>
<div class="label">LOCAL-FIRST</div>
</div>
</div>
<div class="cta">agent-company.dev <span class="arrow">→</span></div>
</div>
<div class="bottom">
<img src="assets/icon.png" alt="" />
<div class="mark">AgentCompany</div>
</div>
</div>
<!-- Transition wipes -->
<div id="wipe-a" class="wipe"></div>
<div id="wipe-b" class="wipe"></div>
</div>
<script>
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
/* ============================================================
SCENE 1 entrances (0 → 4.8)
============================================================ */
tl.from("#scene1 .brand img", { scale: 0.6, opacity: 0, duration: 0.6, ease: "back.out(2)" }, 0.2);
tl.from("#scene1 .brand-name", { x: -18, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.35);
tl.from("#scene1 .version-chip", { x: 18, opacity: 0, duration: 0.45, ease: "power2.out" }, 0.45);
tl.from("#scene1 .eyebrow", { y: 16, opacity: 0, duration: 0.55, ease: "power2.out" }, 0.6);
tl.from("#scene1 .title", { y: 60, opacity: 0, duration: 0.9, ease: "expo.out" }, 0.75);
tl.from("#scene1 .title .accent", { scale: 0, opacity: 0, transformOrigin: "center", duration: 0.5, ease: "back.out(3)" }, 1.4);
tl.from("#scene1 .sub", { y: 28, opacity: 0, duration: 0.7, ease: "power3.out" }, 1.1);
tl.from("#scene1 .footline > div:first-child", { opacity: 0, duration: 0.6, ease: "sine.out" }, 1.5);
tl.from("#scene1 .footline .url-cta", { x: 20, opacity: 0, duration: 0.55, ease: "power2.out" }, 1.65);
// Ambient breathing
tl.to("#scene1 .glow", { scale: 1.12, duration: 2.4, ease: "sine.inOut", repeat: 1, yoyo: true }, 0);
tl.to("#scene1 .glow-b", { scale: 1.08, duration: 2.8, ease: "sine.inOut", repeat: 1, yoyo: true }, 0.4);
/* ============================================================
TRANSITION 1 — Push slide (S1 → S2) @ 4.8
============================================================ */
var T1 = 4.8;
tl.set("#scene2", { visibility: "visible" }, T1);
tl.to("#scene1", { x: -1920, duration: 0.5, ease: "power3.inOut", overwrite: "auto" }, T1);
tl.fromTo("#scene2", { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut", overwrite: "auto" }, T1);
tl.set("#scene1", { visibility: "hidden" }, T1 + 0.6);
/* ============================================================
SCENE 2 entrances (5.3 → 9.3)
============================================================ */
tl.from("#scene2 .tag", { y: 14, opacity: 0, duration: 0.5, ease: "power2.out" }, 5.2);
tl.from("#scene2 .heading", { y: 42, opacity: 0, duration: 0.7, ease: "expo.out" }, 5.35);
tl.from("#scene2 .card", { y: 50, opacity: 0, duration: 0.65, ease: "power3.out" }, 5.75);
tl.from("#scene2 .card-label", { opacity: 0, duration: 0.4, ease: "sine.out" }, 6.1);
// Typing effect via clip reveal of the typed text
tl.set("#s2-typed", { clipPath: "inset(0 100% 0 0)" }, 0);
tl.to("#s2-typed", { clipPath: "inset(0 0% 0 0)", duration: 2.2, ease: "steps(48)" }, 6.35);
tl.fromTo("#s2-cursor",
{ opacity: 1 },
{ opacity: 0, duration: 0.45, ease: "steps(1)", repeat: 7, yoyo: true },
6.35
);
tl.from("#scene2 .hint", { opacity: 0, duration: 0.4 }, 8.55);
tl.from("#scene2 .btn", { scale: 0.92, opacity: 0, duration: 0.5, ease: "back.out(2.4)" }, 8.55);
tl.to("#scene2 .btn", { boxShadow: "0 0 0 6px rgba(24,99,220,0.22)", duration: 0.35, ease: "sine.out", repeat: 1, yoyo: true }, 8.95);
/* ============================================================
TRANSITION 2 — Push slide (S2 → S3) @ 9.3
============================================================ */
var T2 = 9.3;
tl.set("#scene3", { visibility: "visible" }, T2);
tl.to("#scene2", { x: -1920, duration: 0.5, ease: "power3.inOut", overwrite: "auto" }, T2);
tl.fromTo("#scene3", { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut", overwrite: "auto" }, T2);
tl.set("#scene2", { visibility: "hidden" }, T2 + 0.6);
/* ============================================================
SCENE 3 entrances (9.8 → 13.8)
============================================================ */
tl.from("#scene3 .tag", { y: 14, opacity: 0, duration: 0.5, ease: "power2.out" }, 9.7);
tl.from("#scene3 .heading", { y: 42, opacity: 0, duration: 0.7, ease: "expo.out" }, 9.85);
// CEO appears first
tl.from("#s3-ceo", { y: 30, scale: 0.9, opacity: 0, duration: 0.6, ease: "back.out(1.8)" }, 10.35);
// Lines draw in via stroke-dashoffset
tl.set("#s3-lines path", { strokeDasharray: 900, strokeDashoffset: 900 }, 0);
tl.to("#s3-lines path", {
strokeDashoffset: 0,
duration: 0.55,
ease: "power2.inOut",
stagger: 0.12,
}, 10.85);
// Team nodes cascade in after their line completes
tl.from("#s3-n1", { y: 40, opacity: 0, duration: 0.55, ease: "power3.out" }, 11.1);
tl.from("#s3-n2", { y: 40, opacity: 0, duration: 0.55, ease: "power3.out" }, 11.25);
tl.from("#s3-n3", { y: 40, opacity: 0, duration: 0.55, ease: "power3.out" }, 11.4);
tl.from("#s3-n4", { y: 40, opacity: 0, duration: 0.55, ease: "power3.out" }, 11.55);
// Subtle pulse on CEO to signal activity
tl.to("#s3-ceo", { boxShadow: "0 0 0 10px rgba(24,99,220,0.14)", duration: 0.7, ease: "sine.inOut", repeat: 2, yoyo: true }, 12.2);
/* ============================================================
TRANSITION 3 — Staggered blocks (S3 → S4) @ 13.8
============================================================ */
var T3 = 13.8;
tl.set("#wipe-a", { x: -1920 }, T3 - 0.01);
tl.set("#wipe-b", { x: -1920 }, T3 - 0.01);
tl.to("#wipe-a", { x: 0, duration: 0.28, ease: "power3.inOut", overwrite: "auto" }, T3);
tl.to("#wipe-b", { x: 0, duration: 0.28, ease: "power3.inOut", overwrite: "auto" }, T3 + 0.06);
tl.set("#scene3", { opacity: 0, visibility: "hidden" }, T3 + 0.22);
tl.set("#scene4", { opacity: 1, visibility: "visible" }, T3 + 0.22);
tl.to("#wipe-a", { x: 1920, duration: 0.28, ease: "power3.inOut", overwrite: "auto" }, T3 + 0.32);
tl.to("#wipe-b", { x: 1920, duration: 0.28, ease: "power3.inOut", overwrite: "auto" }, T3 + 0.38);
/* ============================================================
SCENE 4 entrances (14.5 → 20.1)
============================================================ */
tl.from("#scene4 .tag", { y: 14, opacity: 0, duration: 0.5, ease: "power2.out" }, 14.45);
tl.from("#scene4 .heading", { y: 44, opacity: 0, duration: 0.75, ease: "expo.out" }, 14.6);
// Tiles cascade from bottom
tl.from("#s4-t1", { y: 70, opacity: 0, duration: 0.7, ease: "power3.out" }, 15.15);
tl.from("#s4-t2", { y: 70, opacity: 0, duration: 0.7, ease: "power3.out" }, 15.3);
tl.from("#s4-t3", { y: 70, opacity: 0, duration: 0.7, ease: "power3.out" }, 15.45);
tl.from("#s4-t4", { y: 70, opacity: 0, duration: 0.7, ease: "power3.out" }, 15.6);
// Screenshots subtle zoom
tl.from("#scene4 .tile .shot img", { scale: 1.08, opacity: 0, duration: 0.8, ease: "power2.out", stagger: 0.08 }, 15.3);
// Ambient glow drift
tl.to("#scene4 .glow-purple", { scale: 1.08, duration: 4, ease: "sine.inOut", repeat: 1, yoyo: true }, 14.5);
tl.to("#scene4 .glow-blue", { scale: 1.1, duration: 4.5, ease: "sine.inOut", repeat: 1, yoyo: true }, 14.8);
/* ============================================================
TRANSITION 4 — Push slide (S4 → S5) @ 20.1
============================================================ */
var T4 = 20.1;
tl.set("#scene5", { visibility: "visible" }, T4);
tl.to("#scene4", { x: -1920, duration: 0.5, ease: "power3.inOut", overwrite: "auto" }, T4);
tl.fromTo("#scene5", { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut", overwrite: "auto" }, T4);
tl.set("#scene4", { visibility: "hidden" }, T4 + 0.6);
/* ============================================================
SCENE 5 entrances (20.6 → 25.6)
============================================================ */
tl.from("#scene5 .tag", { y: 14, opacity: 0, duration: 0.5, ease: "power2.out" }, 20.55);
tl.from("#scene5 .heading", { y: 42, opacity: 0, duration: 0.75, ease: "expo.out" }, 20.7);
tl.from("#scene5 .body", { y: 20, opacity: 0, duration: 0.6, ease: "power2.out" }, 21.1);
tl.from("#scene5 .bullet", { x: -18, opacity: 0, duration: 0.5, ease: "power2.out", stagger: 0.12 }, 21.4);
tl.from("#scene5 .shot-card", { scale: 0.94, opacity: 0, duration: 0.75, ease: "power3.out" }, 20.9);
// Approve chip slams in
tl.set("#s5-chip", { scale: 0.6, opacity: 0, visibility: "hidden" }, 0);
tl.set("#s5-chip", { visibility: "visible" }, 22.75);
tl.to("#s5-chip", { scale: 1, opacity: 1, duration: 0.45, ease: "back.out(2.6)" }, 22.8);
tl.to("#s5-chip", { y: -4, duration: 0.7, ease: "sine.inOut", repeat: 2, yoyo: true }, 23.3);
/* ============================================================
TRANSITION 5 — Blur crossfade (S5 → S6) @ 25.6
============================================================ */
var T5 = 25.6;
tl.set("#scene6", { visibility: "visible" }, T5);
tl.set("#s5-chip", { visibility: "hidden" }, T5 + 0.55);
tl.to("#scene5", { filter: "blur(10px)", scale: 1.03, opacity: 0, duration: 0.5, ease: "power2.inOut", overwrite: "auto" }, T5);
tl.fromTo("#scene6",
{ filter: "blur(10px)", scale: 0.97, opacity: 0 },
{ filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.5, ease: "power2.inOut", overwrite: "auto" },
T5 + 0.1
);
tl.set("#scene5", { visibility: "hidden" }, T5 + 0.6);
/* ============================================================
SCENE 6 entrances (26.1 → 31.5)
============================================================ */
tl.from("#scene6 .kicker", { y: 14, opacity: 0, duration: 0.55, ease: "power2.out" }, 26.1);
tl.from("#scene6 .hero", { y: 50, opacity: 0, duration: 0.85, ease: "expo.out" }, 26.3);
tl.from("#scene6 .hero .em", { scale: 0.85, opacity: 0, transformOrigin: "center", duration: 0.55, ease: "back.out(2.4)" }, 26.9);
tl.from("#scene6 .stat", { y: 28, opacity: 0, duration: 0.6, ease: "power3.out", stagger: 0.14 }, 27.25);
tl.from("#scene6 .divider", { scaleY: 0, transformOrigin: "center", duration: 0.4, ease: "power2.out", stagger: 0.14 }, 27.45);
tl.from("#scene6 .stat .num", { scale: 0.85, opacity: 0, duration: 0.55, ease: "back.out(2.2)", stagger: 0.14 }, 27.4);
tl.from("#scene6 .cta", { y: 30, scale: 0.94, opacity: 0, duration: 0.55, ease: "back.out(1.8)" }, 27.7);
tl.to("#scene6 .cta", { boxShadow: "0 10px 40px rgba(24,99,220,0.35)", duration: 0.6, ease: "sine.inOut", repeat: 3, yoyo: true }, 29.0);
tl.from("#scene6 .bottom", { y: 20, opacity: 0, duration: 0.55, ease: "power2.out" }, 28.2);
tl.to("#scene6 .glow", { scale: 1.1, duration: 4, ease: "sine.inOut" }, 26.1);
// Final scene — gentle close fade on decoratives
tl.to("#scene6 .glow", { opacity: 0.6, duration: 1.0, ease: "sine.inOut" }, 31.0);
window.__timelines["main"] = tl;
</script>
</body>
</html>