Files
ads-stories/index.html
T

555 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>