555 lines
23 KiB
HTML
555 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1080, height=1920">
|
||
<title>Никита — Архитектор систем</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=block" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html, body {
|
||
margin: 0;
|
||
width: 1080px;
|
||
height: 1920px;
|
||
overflow: hidden;
|
||
background: #0a0a12;
|
||
}
|
||
body {
|
||
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
|
||
#root {
|
||
position: relative;
|
||
width: 1080px;
|
||
height: 1920px;
|
||
overflow: hidden;
|
||
background: #0a0a12;
|
||
}
|
||
|
||
/* === Typography === */
|
||
.hero {
|
||
font-size: 100px;
|
||
font-weight: 900;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.hero-mono {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 140px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
.headline {
|
||
font-size: 64px;
|
||
font-weight: 800;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.body-text {
|
||
font-size: 44px;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
.mono {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 38px;
|
||
font-weight: 400;
|
||
}
|
||
.mono-large {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 52px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* === Animation base states === */
|
||
.fade-up {
|
||
opacity: 0;
|
||
transform: translateY(60px);
|
||
}
|
||
.fade-in {
|
||
opacity: 0;
|
||
}
|
||
.scale-up {
|
||
opacity: 0;
|
||
transform: scale(0.7);
|
||
}
|
||
.glitch-in {
|
||
opacity: 0;
|
||
transform: skewX(-8deg) scale(0.9);
|
||
}
|
||
|
||
/* === Scene container === */
|
||
.scene {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 200px 100px;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* === Backgrounds === */
|
||
.bg-grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(134,125,229,0.04) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(134,125,229,0.04) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
opacity: 0;
|
||
z-index: -1;
|
||
}
|
||
.bg-radial-pink {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 40%, rgba(255,111,204,0.1) 0%, transparent 60%);
|
||
opacity: 0;
|
||
z-index: -1;
|
||
}
|
||
.bg-radial-yellow {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 35%, rgba(230,255,111,0.08) 0%, transparent 55%);
|
||
opacity: 0;
|
||
z-index: -1;
|
||
}
|
||
.bg-radial-purple {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 45%, rgba(93,38,190,0.15) 0%, transparent 60%);
|
||
opacity: 0;
|
||
z-index: -1;
|
||
}
|
||
.bg-radial-red {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 40%, rgba(255,60,80,0.1) 0%, transparent 55%);
|
||
opacity: 0;
|
||
z-index: -1;
|
||
}
|
||
/* Scanlines overlay */
|
||
.scanlines {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0,0,0,0.08) 2px,
|
||
rgba(0,0,0,0.08) 4px
|
||
);
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* === Decorative elements === */
|
||
.neon-line-h {
|
||
width: 200px;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, transparent, #ff6fcc, transparent);
|
||
border-radius: 2px;
|
||
opacity: 0;
|
||
}
|
||
.neon-line-v {
|
||
width: 3px;
|
||
height: 120px;
|
||
background: linear-gradient(180deg, transparent, #e6ff6f, transparent);
|
||
border-radius: 2px;
|
||
opacity: 0;
|
||
}
|
||
.corner-bracket {
|
||
position: absolute;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-color: rgba(134,125,229,0.3);
|
||
border-style: solid;
|
||
opacity: 0;
|
||
}
|
||
.corner-bracket.tl { top: 60px; left: 60px; border-width: 3px 0 0 3px; }
|
||
.corner-bracket.tr { top: 60px; right: 60px; border-width: 3px 3px 0 0; }
|
||
.corner-bracket.bl { bottom: 60px; left: 60px; border-width: 0 0 3px 3px; }
|
||
.corner-bracket.br { bottom: 60px; right: 60px; border-width: 0 3px 3px 0; }
|
||
|
||
/* === Shield icon (CSS art) === */
|
||
.shield-container {
|
||
position: relative;
|
||
width: 280px;
|
||
height: 340px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.shield-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* === Cloud with X === */
|
||
.cloud-cross {
|
||
position: relative;
|
||
width: 300px;
|
||
height: 200px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
/* === Tag / badge === */
|
||
.tech-tag {
|
||
display: inline-block;
|
||
padding: 10px 28px;
|
||
border: 1px solid rgba(230,255,111,0.3);
|
||
border-radius: 8px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 28px;
|
||
color: #e6ff6f;
|
||
letter-spacing: 0.05em;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* === Price display === */
|
||
.price-display {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.price-dollar {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 80px;
|
||
font-weight: 700;
|
||
color: #e6ff6f;
|
||
}
|
||
.price-zero {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 160px;
|
||
font-weight: 700;
|
||
color: #e6ff6f;
|
||
line-height: 0.85;
|
||
}
|
||
.price-label {
|
||
font-size: 48px;
|
||
font-weight: 500;
|
||
color: rgba(255,255,255,0.5);
|
||
}
|
||
|
||
/* === Spec line === */
|
||
.spec-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 20px;
|
||
margin-bottom: 16px;
|
||
opacity: 0;
|
||
transform: translateX(-30px);
|
||
}
|
||
.spec-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #ff6fcc;
|
||
flex-shrink: 0;
|
||
}
|
||
.spec-text {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 40px;
|
||
font-weight: 500;
|
||
color: rgba(255,255,255,0.9);
|
||
}
|
||
|
||
/* === Cross icon === */
|
||
.cross-mark {
|
||
position: absolute;
|
||
font-size: 200px;
|
||
font-weight: 900;
|
||
color: rgba(255,60,80,0.7);
|
||
opacity: 0;
|
||
}
|
||
|
||
/* === Footer === */
|
||
.footer-tag {
|
||
display: inline-block;
|
||
padding: 16px 40px;
|
||
border: 1px solid rgba(134,125,229,0.4);
|
||
border-radius: 100px;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: rgba(255,255,255,0.7);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* === Animated background particles (CSS only) === */
|
||
.bg-particles {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
opacity: 0;
|
||
}
|
||
.particle {
|
||
position: absolute;
|
||
width: 4px;
|
||
height: 4px;
|
||
background: rgba(134,125,229,0.4);
|
||
border-radius: 50%;
|
||
}
|
||
.particle:nth-child(1) { left: 10%; top: 20%; animation: float 6s ease-in-out infinite; }
|
||
.particle:nth-child(2) { left: 30%; top: 60%; animation: float 8s ease-in-out 1s infinite; width: 3px; height: 3px; }
|
||
.particle:nth-child(3) { left: 70%; top: 30%; animation: float 7s ease-in-out 2s infinite; }
|
||
.particle:nth-child(4) { left: 85%; top: 70%; animation: float 9s ease-in-out 0.5s infinite; width: 5px; height: 5px; }
|
||
.particle:nth-child(5) { left: 50%; top: 80%; animation: float 6.5s ease-in-out 1.5s infinite; }
|
||
.particle:nth-child(6) { left: 20%; top: 40%; animation: float 7.5s ease-in-out 3s infinite; width: 3px; height: 3px; }
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); opacity: 0.3; }
|
||
50% { transform: translateY(-40px); opacity: 0.8; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div data-hf-id="hf-xile" id="root" data-composition-id="sovereignty" data-start="0" data-duration="15" data-width="1080" data-height="1920">
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 1: HOOK — "$0/мес за AI" -->
|
||
<!-- Time: 0–3s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div data-hf-id="hf-0dgk" class="scene clip" data-start="0" data-duration="3" data-track-index="1" id="scene-1">
|
||
<div data-hf-id="hf-czju" class="bg-radial-yellow" id="s1-bg"></div>
|
||
<div data-hf-id="hf-v631" class="bg-grid" id="s1-grid"></div>
|
||
<div data-hf-id="hf-8y7v" class="corner-bracket tl" id="s1-c1"></div>
|
||
<div data-hf-id="hf-c9m6" class="corner-bracket tr" id="s1-c2"></div>
|
||
<div data-hf-id="hf-vcwb" class="corner-bracket bl" id="s1-c3"></div>
|
||
<div data-hf-id="hf-4i2y" class="corner-bracket br" id="s1-c4"></div>
|
||
<div data-hf-id="hf-54fa" class="fade-in" id="s1-subtitle" style="margin-bottom: 24px;">
|
||
<span data-hf-id="hf-pf2t" class="mono" style="color: rgba(255,255,255,0.4); font-size: 32px;">AI-инфраструктура</span>
|
||
</div>
|
||
<div data-hf-id="hf-92tu" class="scale-up" id="s1-price">
|
||
<div data-hf-id="hf-8ad6" class="price-display">
|
||
<span data-hf-id="hf-m3bh" class="price-dollar">$</span><span data-hf-id="hf-auvd" class="price-zero">0</span>
|
||
</div>
|
||
<span data-hf-id="hf-r353" class="price-label">/мес за AI</span>
|
||
</div>
|
||
<div data-hf-id="hf-rm46" class="neon-line-h" id="s1-line" style="margin-top: 24px;"></div>
|
||
<div data-hf-id="hf-nfyv" class="bg-particles" id="s1-particles">
|
||
<div data-hf-id="hf-w47a" class="particle"></div>
|
||
<div data-hf-id="hf-l4cq" class="particle"></div>
|
||
<div data-hf-id="hf-linr" class="particle"></div>
|
||
<div data-hf-id="hf-lwys" class="particle"></div>
|
||
<div data-hf-id="hf-mb9t" class="particle"></div>
|
||
<div data-hf-id="hf-mpku" class="particle"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 2: SHIELD — "Данные не уходят" -->
|
||
<!-- Time: 3–7s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div data-hf-id="hf-2eq8" class="scene clip" data-start="3" data-duration="4" data-track-index="2" id="scene-2">
|
||
<div data-hf-id="hf-dc39" class="bg-radial-purple" id="s2-bg"></div>
|
||
<div data-hf-id="hf-7f94" class="bg-grid" id="s2-grid"></div>
|
||
<div data-hf-id="hf-z87a" class="shield-container" id="s2-shield">
|
||
<svg data-hf-id="hf-r5ka" class="shield-svg" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<defs data-hf-id="hf-mh0t">
|
||
<lineargradient data-hf-id="hf-48o9" id="shield-grad" x1="0" y1="0" x2="200" y2="240">
|
||
<stop data-hf-id="hf-2f5e" offset="0%" stop-color="#867de5" />
|
||
<stop data-hf-id="hf-22oq" offset="100%" stop-color="#5d26be" />
|
||
</lineargradient>
|
||
<filter data-hf-id="hf-49pv" id="glow">
|
||
<fegaussianblur data-hf-id="hf-qc1n" stdDeviation="6" result="blur" />
|
||
<femerge data-hf-id="hf-zn2o">
|
||
<femergenode data-hf-id="hf-t7ws" in="blur" />
|
||
<femergenode data-hf-id="hf-cmaw" in="SourceGraphic" />
|
||
</femerge>
|
||
</filter>
|
||
</defs>
|
||
<!-- Shield outline -->
|
||
<path data-hf-id="hf-di4c" d="M100 10 L190 50 L190 130 Q190 195 100 230 Q10 195 10 130 L10 50 Z" stroke="url(#shield-grad)" stroke-width="4" fill="rgba(134,125,229,0.05)" filter="url(#glow)" />
|
||
<!-- Lock icon inside -->
|
||
<rect data-hf-id="hf-0tmd" x="72" y="100" width="56" height="44" rx="8" stroke="#e6ff6f" stroke-width="3" fill="rgba(230,255,111,0.08)" />
|
||
<path data-hf-id="hf-3kjf" d="M84 100 L84 80 Q100 60 116 80 L116 100" stroke="#e6ff6f" stroke-width="3" fill="none" />
|
||
<circle data-hf-id="hf-826m" cx="100" cy="122" r="6" fill="#e6ff6f" />
|
||
</svg>
|
||
</div>
|
||
<div data-hf-id="hf-3498" class="glitch-in" id="s2-text" style="margin-bottom: 16px;">
|
||
<span data-hf-id="hf-zt9u" class="headline" style="color: #fff;">Данные<br data-hf-id="hf-x5px">никогда не<br data-hf-id="hf-rsrt">покидают сервер</span>
|
||
</div>
|
||
<div data-hf-id="hf-o141" class="neon-line-v" id="s2-line" style="position:relative; margin-top: 20px;"></div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 3: SPECS — Qwen3.6 + Hardware -->
|
||
<!-- Time: 7–11s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div data-hf-id="hf-trzq" class="scene clip" data-start="7" data-duration="4" data-track-index="3" id="scene-3">
|
||
<div data-hf-id="hf-bkqg" class="bg-radial-pink" id="s3-bg"></div>
|
||
<div data-hf-id="hf-d39n" class="bg-grid" id="s3-grid"></div>
|
||
<div data-hf-id="hf-pk31" class="tech-tag" id="s3-tag" style="margin-bottom: 40px;">Qwen3.6-35B-A3B</div>
|
||
<div data-hf-id="hf-eyw5" id="s3-specs" style="display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%;">
|
||
<div data-hf-id="hf-yre4" class="spec-row" id="s3-spec-1">
|
||
<div data-hf-id="hf-1k1f" class="spec-dot"></div>
|
||
<span data-hf-id="hf-vlhn" class="spec-text">2× RTX 3080 Ti</span>
|
||
</div>
|
||
<div data-hf-id="hf-9mvr" class="spec-row" id="s3-spec-2">
|
||
<div data-hf-id="hf-37se" class="spec-dot" style="background: #e6ff6f;"></div>
|
||
<span data-hf-id="hf-l9yo" class="spec-text">145 tok/s</span>
|
||
</div>
|
||
<div data-hf-id="hf-3h5y" class="spec-row" id="s3-spec-3">
|
||
<div data-hf-id="hf-kqei" class="spec-dot" style="background: #867de5;"></div>
|
||
<span data-hf-id="hf-l4kh" class="spec-text">Context: 229K</span>
|
||
</div>
|
||
</div>
|
||
<div data-hf-id="hf-947v" class="neon-line-h" id="s3-line" style="margin-top: 36px;"></div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 4: EDGE — "Облако — чужие данные" -->
|
||
<!-- Time: 11–13.5s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div data-hf-id="hf-9ldc" class="scene clip" data-start="11" data-duration="2.5" data-track-index="4" id="scene-4">
|
||
<div data-hf-id="hf-kp7a" class="bg-radial-red" id="s4-bg"></div>
|
||
<div data-hf-id="hf-sa72" class="bg-grid" id="s4-grid"></div>
|
||
<div data-hf-id="hf-lpj7" id="s4-cloud-cross" style="position: relative; width: 340px; height: 200px; margin-bottom: 30px;">
|
||
<!-- Cloud shape -->
|
||
<ellipse data-hf-id="hf-2wl2" cx="170" cy="100" rx="100" ry="50" fill="rgba(255,60,80,0.1)" stroke="rgba(255,60,80,0.4)" stroke-width="3">
|
||
<ellipse data-hf-id="hf-xoy5" cx="130" cy="90" rx="55" ry="40" fill="rgba(255,60,80,0.08)" stroke="rgba(255,60,80,0.3)" stroke-width="2">
|
||
<ellipse data-hf-id="hf-nli1" cx="210" cy="85" rx="45" ry="35" fill="rgba(255,60,80,0.06)" stroke="rgba(255,60,80,0.25)" stroke-width="2">
|
||
<!-- Big X -->
|
||
<line data-hf-id="hf-ak6o" x1="100" y1="50" x2="240" y2="150" stroke="rgba(255,60,80,0.8)" stroke-width="8" opacity="0">
|
||
<line data-hf-id="hf-50vu" x1="240" y1="50" x2="100" y2="150" stroke="rgba(255,60,80,0.8)" stroke-width="8" opacity="0">
|
||
</line></line></ellipse></ellipse></ellipse></div>
|
||
<div data-hf-id="hf-x6hm" class="glitch-in" id="s4-text">
|
||
<span data-hf-id="hf-8lqc" class="headline" style="color: rgba(255,60,80,0.9);">Облако —<br data-hf-id="hf-szow">чужие данные</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 5: CTA — Архитектор -->
|
||
<!-- Time: 13.5–15s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div data-hf-id="hf-es4w" class="scene clip" data-start="13.5" data-duration="1.5" data-track-index="5" id="scene-5">
|
||
<div data-hf-id="hf-3eng" class="bg-radial-purple" id="s5-bg"></div>
|
||
<div data-hf-id="hf-bld5" class="bg-grid" id="s5-grid"></div>
|
||
<div data-hf-id="hf-voej" class="bg-particles" id="s5-particles">
|
||
<div data-hf-id="hf-n3vv" class="particle"></div>
|
||
<div data-hf-id="hf-ni6w" class="particle"></div>
|
||
<div data-hf-id="hf-nwhx" class="particle"></div>
|
||
<div data-hf-id="hf-oasy" class="particle"></div>
|
||
</div>
|
||
<div data-hf-id="hf-abq7" class="glitch-in" id="s5-title" style="margin-bottom: 20px;">
|
||
<span data-hf-id="hf-cbkl" class="hero" style="color: #fff; font-size: 80px;">Архитектор<br data-hf-id="hf-sldv">систем</span>
|
||
</div>
|
||
<div data-hf-id="hf-s9r6" class="neon-line-h" id="s5-line" style="margin-bottom: 20px;"></div>
|
||
<div data-hf-id="hf-pneh" class="footer-tag" id="s5-footer">Никита · Локальный ИИ</div>
|
||
</div>
|
||
|
||
<!-- Scanlines overlay (persistent) -->
|
||
<div data-hf-id="hf-8pzc" class="scanlines"></div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.__timelines = window.__timelines || {};
|
||
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
// ═══════════ SCENE 1: HOOK — "$0/мес" (0–3s) ═══════════
|
||
tl.to("#s1-bg", { opacity: 1, duration: 0.4, ease: "power1.out" }, 0);
|
||
tl.to("#s1-grid", { opacity: 1, duration: 0.5, ease: "power1.out" }, 0.1);
|
||
tl.to(["#s1-c1", "#s1-c2", "#s1-c3", "#s1-c4"], {
|
||
opacity: 1, duration: 0.3, ease: "power2.out"
|
||
}, 0.2);
|
||
tl.from("#s1-subtitle", {
|
||
opacity: 0, y: 20, duration: 0.4, ease: "power2.out"
|
||
}, 0.3);
|
||
tl.from("#s1-price", {
|
||
opacity: 0, scale: 0.7, duration: 0.6, ease: "back.out(1.7)"
|
||
}, 0.5);
|
||
tl.to("#s1-line", { opacity: 1, duration: 0.3, ease: "power2.out" }, 0.9);
|
||
tl.to("#s1-particles", { opacity: 1, duration: 0.5, ease: "power1.out" }, 0.4);
|
||
// Exit
|
||
tl.to("#s1-price, #s1-subtitle, #s1-line, #s1-particles", {
|
||
opacity: 0, y: -40, duration: 0.2, ease: "power2.in"
|
||
}, 2.6);
|
||
tl.set("#s1-price, #s1-subtitle, #s1-line, #s1-particles", { opacity: 0, y: -40 }, 3.0);
|
||
|
||
// ═══════════ SCENE 2: SHIELD (3–7s) ═══════════
|
||
tl.to("#s2-bg", { opacity: 1, duration: 0.4, ease: "power1.out" }, 3.0);
|
||
tl.to("#s2-grid", { opacity: 1, duration: 0.4, ease: "power1.out" }, 3.1);
|
||
tl.from("#s2-shield", {
|
||
opacity: 0, y: 50, duration: 0.6, ease: "power3.out"
|
||
}, 3.2);
|
||
tl.from("#s2-text", {
|
||
opacity: 0, skewX: -8, y: 40, duration: 0.5, ease: "power3.out"
|
||
}, 3.6);
|
||
tl.to("#s2-line", { opacity: 1, duration: 0.3, ease: "power2.out" }, 4.0);
|
||
// Exit
|
||
tl.to("#s2-shield, #s2-text", {
|
||
opacity: 0, scale: 0.9, duration: 0.2, ease: "power2.in"
|
||
}, 6.7);
|
||
tl.set("#s2-shield, #s2-text", { opacity: 0, scale: 0.9 }, 7.0);
|
||
|
||
// ═══════════ SCENE 3: SPECS (7–11s) ═══════════
|
||
tl.to("#s3-bg", { opacity: 1, duration: 0.4, ease: "power1.out" }, 7.0);
|
||
tl.to("#s3-grid", { opacity: 1, duration: 0.4, ease: "power1.out" }, 7.1);
|
||
tl.from("#s3-tag", {
|
||
opacity: 0, y: -30, duration: 0.4, ease: "power3.out"
|
||
}, 7.2);
|
||
tl.from("#s3-spec-1", {
|
||
opacity: 0, x: -40, duration: 0.4, ease: "power2.out"
|
||
}, 7.5);
|
||
tl.from("#s3-spec-2", {
|
||
opacity: 0, x: -40, duration: 0.4, ease: "power2.out"
|
||
}, 7.8);
|
||
tl.from("#s3-spec-3", {
|
||
opacity: 0, x: -40, duration: 0.4, ease: "power2.out"
|
||
}, 8.1);
|
||
tl.to("#s3-line", { opacity: 1, duration: 0.3, ease: "power2.out" }, 8.5);
|
||
// Exit
|
||
tl.to("#s3-tag, #s3-spec-1, #s3-spec-2, #s3-spec-3, #s3-line", {
|
||
opacity: 0, x: 40, duration: 0.2, ease: "power2.in"
|
||
}, 10.7);
|
||
tl.set("#s3-tag, #s3-spec-1, #s3-spec-2, #s3-spec-3, #s3-line", { opacity: 0, x: 40 }, 11.0);
|
||
|
||
// ═══════════ SCENE 4: EDGE — Cloud × (11–13.5s) ═══════════
|
||
tl.to("#s4-bg", { opacity: 1, duration: 0.3, ease: "power1.out" }, 11.0);
|
||
tl.to("#s4-grid", { opacity: 1, duration: 0.3, ease: "power1.out" }, 11.1);
|
||
tl.from("#s4-cloud-cross", {
|
||
opacity: 0, scale: 0.8, duration: 0.4, ease: "power2.out"
|
||
}, 11.2);
|
||
// X mark appears
|
||
tl.to("#s4-cloud-cross line", {
|
||
opacity: 1, duration: 0.3, ease: "power2.out"
|
||
}, 11.5);
|
||
tl.from("#s4-text", {
|
||
opacity: 0, skewX: -10, y: 30, duration: 0.4, ease: "power3.out"
|
||
}, 11.8);
|
||
// Exit
|
||
tl.to("#s4-cloud-cross, #s4-text", {
|
||
opacity: 0, duration: 0.15, ease: "power2.in"
|
||
}, 13.2);
|
||
tl.set("#s4-cloud-cross, #s4-text", { opacity: 0 }, 13.5);
|
||
|
||
// ═══════════ SCENE 5: CTA (13.5–15s) ═══════════
|
||
tl.to("#s5-bg", { opacity: 1, duration: 0.3, ease: "power1.out" }, 13.5);
|
||
tl.to("#s5-grid", { opacity: 1, duration: 0.3, ease: "power1.out" }, 13.5);
|
||
tl.from("#s5-title", {
|
||
opacity: 0, skewX: -6, y: 30, duration: 0.5, ease: "power3.out"
|
||
}, 13.6);
|
||
tl.to("#s5-line", { opacity: 1, duration: 0.2, ease: "power2.out" }, 13.8);
|
||
tl.from("#s5-footer", {
|
||
opacity: 0, y: 20, duration: 0.3, ease: "power2.out"
|
||
}, 14.0);
|
||
// Hold to end
|
||
tl.to("#s5-title, #s5-footer", { opacity: 1, duration: 0.1 }, 14.9);
|
||
|
||
window.__timelines["sovereignty"] = tl;
|
||
</script>
|
||
</body>
|
||
</html>
|