feat: sovereignty video — cyberpunk personal brand, 5 scenes, 15s
This commit is contained in:
1 parent
2b4d8fcc43
commit
5c3087fc02
7 files changed
+419
-214
No files matched your search
BIN
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
+417
-212
@@ -1,14 +1,11 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1080, height=1920" />
|
||||
<title>ROI24 — Лиды утекают</title>
|
||||
<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&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<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;
|
||||
@@ -20,7 +17,7 @@
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
background: #050508;
|
||||
background: #0a0a12;
|
||||
}
|
||||
body {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
@@ -31,16 +28,23 @@
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
background: #050508;
|
||||
background: #0a0a12;
|
||||
}
|
||||
|
||||
/* === Typography === */
|
||||
.hero {
|
||||
font-size: 96px;
|
||||
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;
|
||||
@@ -48,21 +52,21 @@
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.body-text {
|
||||
font-size: 42px;
|
||||
font-size: 44px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: rgba(255,255,255,0.75);
|
||||
}
|
||||
.cta-text {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
.mono {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 48px;
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.mono-large {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 52px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === Animation base states === */
|
||||
.fade-up {
|
||||
@@ -74,7 +78,11 @@
|
||||
}
|
||||
.scale-up {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.glitch-in {
|
||||
opacity: 0;
|
||||
transform: skewX(-8deg) scale(0.9);
|
||||
}
|
||||
|
||||
/* === Scene container === */
|
||||
@@ -86,167 +94,362 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 280px 80px 380px;
|
||||
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 === */
|
||||
.accent-line {
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #0F62FE, #00B8D4);
|
||||
.neon-line-h {
|
||||
width: 200px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #ff6fcc, transparent);
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.warning-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 30%, rgba(227,72,80,0.12) 0%, transparent 60%);
|
||||
.neon-line-v {
|
||||
width: 3px;
|
||||
height: 120px;
|
||||
background: linear-gradient(180deg, transparent, #e6ff6f, transparent);
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.success-bg {
|
||||
.corner-bracket {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 40%, rgba(15,98,254,0.15) 0%, transparent 55%);
|
||||
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; }
|
||||
|
||||
.brand-badge {
|
||||
/* === 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: 12px 32px;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
border-radius: 100px;
|
||||
padding: 10px 28px;
|
||||
border: 1px solid rgba(230,255,111,0.3);
|
||||
border-radius: 8px;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,0.6);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* === CTA Button === */
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
padding: 28px 60px;
|
||||
background: linear-gradient(135deg, #0F62FE 0%, #00B8D4 100%);
|
||||
border-radius: 20px;
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
color: #fff;
|
||||
color: #e6ff6f;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
/* === Metric display === */
|
||||
.metric {
|
||||
/* === Price display === */
|
||||
.price-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 120px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
.price-dollar {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
color: #e6ff6f;
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 36px;
|
||||
.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.6);
|
||||
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
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
>
|
||||
<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 — "Сколько лидов..." -->
|
||||
<!-- Time: 0–3s -->
|
||||
<!-- SCENE 1: HOOK — "$0/мес за AI" -->
|
||||
<!-- Time: 0–3s -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<div class="scene clip" data-start="0" data-duration="3" data-track-index="1">
|
||||
<div class="warning-bg"></div>
|
||||
<div class="fade-up" id="hook-emoji"
|
||||
style="font-size: 80px; margin-bottom: 20px;">📉</div>
|
||||
<div class="fade-up" id="hook-text" style="margin-bottom: 24px;">
|
||||
<span class="hero" style="color: #E34850;">Сколько лидов</span><br/>
|
||||
<span class="hero" style="color: rgba(255,255,255,0.9);">утекает?</span>
|
||||
<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 class="fade-up" id="hook-sub" style="margin-top: 16px;">
|
||||
<span class="body-text">Пока вы спите.</span>
|
||||
<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: PAIN — Проблема -->
|
||||
<!-- Time: 3–8s -->
|
||||
<!-- SCENE 2: SHIELD — "Данные не уходят" -->
|
||||
<!-- Time: 3–7s -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<div class="scene clip" data-start="3" data-duration="5" data-track-index="2">
|
||||
<div class="warning-bg" id="pain-bg"></div>
|
||||
<div class="brand-badge fade-up" id="pain-badge">Почему так?</div>
|
||||
<div class="fade-up" id="pain-stats" style="margin-top: 48px;">
|
||||
<div class="metric">
|
||||
<span class="metric-value" style="color: #E34850;">73%</span>
|
||||
<span class="metric-label">лидов не обработаны<br/>в первые 30 мин</span>
|
||||
<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 class="fade-up" id="pain-result" style="margin-top: 56px;">
|
||||
<span class="body-text">Каждый необработанный лид —<br/>это <strong style="color: #E34850;">потерянные деньги</strong></span>
|
||||
<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 3: SOLUTION — ROI24 -->
|
||||
<!-- Time: 8–12s -->
|
||||
<!-- SCENE 5: CTA — Архитектор -->
|
||||
<!-- Time: 13.5–15s -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<div class="scene clip" data-start="8" data-duration="4" data-track-index="3">
|
||||
<div class="success-bg" id="solution-bg"></div>
|
||||
<div class="fade-up" id="solution-brand" style="margin-bottom: 16px;">
|
||||
<span class="brand-badge" style="border-color: rgba(15,98,254,0.4); color: #0F62FE;">ROI24</span>
|
||||
<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 class="fade-up" id="solution-headline">
|
||||
<span class="headline" style="color: #fff;">AI-автоматизация<br/>маркетинга</span>
|
||||
</div>
|
||||
<div class="fade-up" id="solution-features" style="margin-top: 40px; text-align: left;">
|
||||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
||||
<span style="font-size: 36px;">🤖</span>
|
||||
<span class="body-text" style="color: rgba(255,255,255,0.9);">Лиды обрабатываются за 0 сек</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
||||
<span style="font-size: 36px;">📱</span>
|
||||
<span class="body-text" style="color: rgba(255,255,255,0.9);">7 площадок, один инструмент</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 20px;">
|
||||
<span style="font-size: 36px;">📊</span>
|
||||
<span class="body-text" style="color: rgba(255,255,255,0.9);">Сквозная аналитика</span>
|
||||
</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>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SCENE 4: CTA — Призыв к действию -->
|
||||
<!-- Time: 12–15s -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<div class="scene clip" data-start="12" data-duration="3" data-track-index="4">
|
||||
<div class="success-bg" id="cta-bg"></div>
|
||||
<div class="fade-up" id="cta-pre" style="margin-bottom: 20px;">
|
||||
<span class="body-text">Хватит терять клиентов</span>
|
||||
</div>
|
||||
<div class="scale-up" id="cta-button">
|
||||
<span style="color: #fff;">Попробуй бесплатно →</span>
|
||||
</div>
|
||||
<div class="fade-in" id="cta-note" style="margin-top: 24px;">
|
||||
<span class="mono" style="color: rgba(255,255,255,0.4);">ROI24 — Автоматизация без рутины</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scanlines overlay (persistent) -->
|
||||
<div data-hf-id="hf-8pzc" class="scanlines"></div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -255,95 +458,97 @@
|
||||
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// ═══════════ SCENE 1: HOOK (0–3s) ═══════════
|
||||
tl.to("#hook-emoji", {
|
||||
opacity: 1, y: 0, duration: 0.6, ease: "power3.out"
|
||||
// ═══════════ 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.to("#hook-text", {
|
||||
opacity: 1, y: 0, duration: 0.7, ease: "power3.out"
|
||||
}, 0.4);
|
||||
tl.to("#hook-sub", {
|
||||
opacity: 1, y: 0, duration: 0.5, ease: "power2.out"
|
||||
}, 1.0);
|
||||
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("#hook-emoji, #hook-text, #hook-sub", {
|
||||
opacity: 0, y: -50, duration: 0.25, ease: "power2.in"
|
||||
}, 2.5);
|
||||
tl.set("#hook-emoji, #hook-text, #hook-sub", { opacity: 0, y: -50 }, 3.0);
|
||||
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: PAIN (3–8s) ═══════════
|
||||
tl.to("#pain-bg", {
|
||||
opacity: 1, duration: 0.5, ease: "power1.out"
|
||||
}, 3.0);
|
||||
tl.from("#pain-badge", {
|
||||
opacity: 0, y: 40, duration: 0.5, ease: "power3.out"
|
||||
// ═══════════ 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("#pain-stats", {
|
||||
opacity: 0, y: 50, duration: 0.7, ease: "power3.out"
|
||||
tl.from("#s2-text", {
|
||||
opacity: 0, skewX: -8, y: 40, duration: 0.5, ease: "power3.out"
|
||||
}, 3.6);
|
||||
tl.from("#pain-result", {
|
||||
opacity: 0, y: 40, duration: 0.5, ease: "power2.out"
|
||||
}, 4.8);
|
||||
tl.to("#s2-line", { opacity: 1, duration: 0.3, ease: "power2.out" }, 4.0);
|
||||
// Exit
|
||||
tl.to("#pain-bg", {
|
||||
opacity: 0, duration: 0.2, ease: "power2.in"
|
||||
}, 7.5);
|
||||
tl.to("#pain-badge, #pain-stats, #pain-result", {
|
||||
opacity: 0, y: -40, duration: 0.25, ease: "power2.in"
|
||||
}, 7.5);
|
||||
tl.set("#pain-badge, #pain-stats, #pain-result, #pain-bg", { opacity: 0 }, 8.0);
|
||||
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: SOLUTION (8–12s) ═══════════
|
||||
tl.to("#solution-bg", {
|
||||
opacity: 1, duration: 0.6, ease: "power1.out"
|
||||
}, 8.0);
|
||||
tl.from("#solution-brand", {
|
||||
opacity: 0, scale: 0.8, duration: 0.5, ease: "back.out(1.7)"
|
||||
}, 8.2);
|
||||
tl.from("#solution-headline", {
|
||||
opacity: 0, y: 50, duration: 0.7, ease: "power3.out"
|
||||
}, 8.4);
|
||||
tl.from("#solution-features > div:nth-child(1)", {
|
||||
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||||
}, 9.0);
|
||||
tl.from("#solution-features > div:nth-child(2)", {
|
||||
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||||
}, 9.3);
|
||||
tl.from("#solution-features > div:nth-child(3)", {
|
||||
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||||
}, 9.6);
|
||||
// ═══════════ 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("#solution-bg", {
|
||||
opacity: 0, duration: 0.2, ease: "power2.in"
|
||||
}, 11.7);
|
||||
tl.to("#solution-brand, #solution-headline, #solution-features > div", {
|
||||
opacity: 0, y: -30, duration: 0.2, ease: "power2.in"
|
||||
}, 11.7);
|
||||
tl.set("#solution-brand, #solution-headline, #solution-features, #solution-bg", { opacity: 0 }, 12.0);
|
||||
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: CTA (12–15s) ═══════════
|
||||
tl.to("#cta-bg", {
|
||||
opacity: 1, duration: 0.5, ease: "power1.out"
|
||||
}, 12.0);
|
||||
tl.from("#cta-pre", {
|
||||
opacity: 0, y: 30, duration: 0.5, ease: "power3.out"
|
||||
}, 12.2);
|
||||
tl.from("#cta-button", {
|
||||
opacity: 0, scale: 0.85, duration: 0.6, ease: "back.out(1.7)"
|
||||
}, 12.6);
|
||||
tl.from("#cta-note", {
|
||||
opacity: 0, duration: 0.4, ease: "power2.out"
|
||||
// ═══════════ 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);
|
||||
// Subtle pulse on CTA button
|
||||
tl.to("#cta-button", {
|
||||
scale: 1.04, duration: 0.7, ease: "sine.inOut", yoyo: true, repeat: 1
|
||||
}, 13.4);
|
||||
// Final hold
|
||||
tl.to("#cta-bg, #cta-pre, #cta-button, #cta-note", {
|
||||
opacity: 1, duration: 0.1
|
||||
}, 14.8);
|
||||
tl.set("#s4-cloud-cross, #s4-text", { opacity: 0 }, 13.5);
|
||||
|
||||
window.__timelines["main"] = tl;
|
||||
// ═══════════ 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>
|
||||
Reference in new issue
Block a user