1020 lines
36 KiB
HTML
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>
|