09089902e9
Тезисы — из 42_Harness_Deck и Simbiot Whitepaper; стиль кость/карбон + лайм Shkor Labs. PNG-слайды и анимированная версия — snapshot/render того же index.html. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
293 lines
18 KiB
HTML
293 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1080, height=1350" />
|
||
<title>Alex Shkor — The harness is the product</title>
|
||
<script src="./gsap.min.js"></script>
|
||
<style>
|
||
@font-face { font-family: "Fraunces"; font-weight: 400; src: url("fonts/fraunces-400-latin.woff2") format("woff2"); }
|
||
@font-face { font-family: "Fraunces"; font-weight: 700; src: url("fonts/fraunces-700-latin.woff2") format("woff2"); }
|
||
@font-face { font-family: "DM Sans"; font-weight: 400; src: url("fonts/dm-sans-400-latin.woff2") format("woff2"); }
|
||
@font-face { font-family: "DM Sans"; font-weight: 700; src: url("fonts/dm-sans-700-latin.woff2") format("woff2"); }
|
||
@font-face { font-family: "JetBrains Mono"; font-weight: 400; src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2"); }
|
||
@font-face { font-family: "JetBrains Mono"; font-weight: 700; src: url("fonts/jetbrains-mono-700-latin.woff2") format("woff2"); }
|
||
|
||
:root { --carbon: #050506; --carbon2: #111113; --bone: #ece6da; --dim: #a8a297; --lime: #c6ff4d; --line: rgba(236, 230, 218, 0.14); }
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body { width: 1080px; height: 1350px; overflow: hidden; background: var(--carbon); }
|
||
body { color: var(--bone); font-family: "DM Sans", sans-serif; }
|
||
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
|
||
.clip { position: absolute; inset: 0; }
|
||
.mono { font-family: "JetBrains Mono", monospace; }
|
||
.serif { font-family: "Fraunces", serif; }
|
||
.lime { color: var(--lime); }
|
||
em { font-style: normal; color: var(--lime); }
|
||
|
||
#bg { background: radial-gradient(900px 1100px at 70% 20%, #18181b 0%, var(--carbon) 70%); }
|
||
#bg-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 90px 90px; opacity: 0.35; }
|
||
|
||
/* общая рамка слайда */
|
||
.slide { overflow: hidden; }
|
||
.top { position: absolute; left: 64px; right: 64px; top: 56px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
|
||
.top img { display: block; width: 56px; height: 56px; }
|
||
.count { font-size: 22px; letter-spacing: 0.18em; color: #c9c3b8; background: rgba(5, 5, 6, 0.72); padding: 10px 16px; border-radius: 20px; }
|
||
.count b { color: var(--bone); font-weight: 700; }
|
||
.foot { position: absolute; left: 64px; right: 64px; bottom: 54px; display: flex; justify-content: space-between; align-items: center; font-size: 22px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; z-index: 5; }
|
||
.swipe { display: flex; align-items: center; gap: 14px; color: var(--lime); }
|
||
.swipe svg { display: block; width: 44px; height: 20px; }
|
||
.kick { font-size: 24px; letter-spacing: 0.26em; color: var(--lime); text-transform: uppercase; }
|
||
.body { position: absolute; left: 64px; right: 64px; }
|
||
.q { font-family: "Fraunces", serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }
|
||
.sub { font-size: 34px; line-height: 1.4; color: var(--dim); }
|
||
.rule { width: 120px; height: 6px; background: var(--lime); }
|
||
.photo { position: absolute; overflow: hidden; }
|
||
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||
|
||
/* S1 обложка */
|
||
#s1 .photo { right: 0; top: 0; width: 1080px; height: 1350px; }
|
||
#s1 .photo img { object-position: 60% 20%; }
|
||
#s1-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 6, 0.1) 0%, rgba(5, 5, 6, 0.15) 35%, rgba(5, 5, 6, 0.92) 64%, #050506 82%); }
|
||
#s1 .body { bottom: 150px; }
|
||
#s1 .q { font-size: 104px; margin-top: 26px; }
|
||
#s1-by { margin-top: 34px; font-size: 30px; color: var(--bone); }
|
||
#s1-by span { color: var(--dim); }
|
||
|
||
/* S2 модели дешевеют */
|
||
#s2 .body { top: 210px; }
|
||
#s2 .q { font-size: 96px; margin-top: 30px; }
|
||
#s2-chart { position: absolute; left: 64px; right: 64px; bottom: 150px; height: 360px; }
|
||
#s2 .sub { margin-top: 40px; max-width: 860px; }
|
||
|
||
/* S3 харнес вокруг модели */
|
||
#s3 .body { top: 190px; }
|
||
#s3 .q { font-size: 80px; margin-top: 26px; }
|
||
#s3-ring { position: absolute; left: 50%; top: 560px; width: 560px; height: 560px; margin-left: -280px; }
|
||
#s3-core { position: absolute; left: 180px; top: 180px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--line); background: var(--carbon2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||
#s3-core b { font-size: 28px; letter-spacing: 0.16em; }
|
||
#s3-core span { font-size: 18px; color: var(--dim); margin-top: 6px; letter-spacing: 0.1em; }
|
||
#s3-orbit { position: absolute; inset: 40px; border-radius: 50%; border: 2px dashed rgba(198, 255, 77, 0.45); }
|
||
.chip { position: absolute; width: 170px; margin-left: -85px; margin-top: -26px; height: 52px; border-radius: 26px; background: var(--lime); color: var(--carbon); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||
#s3 .sub { position: absolute; left: 64px; right: 64px; bottom: 96px; font-size: 30px; }
|
||
|
||
/* S4 ничего не принадлежит */
|
||
#s4 .photo { left: 0; top: 0; width: 1080px; height: 640px; }
|
||
#s4 .photo img { object-position: 50% 30%; }
|
||
#s4-fade { position: absolute; left: 0; right: 0; top: 380px; height: 262px; background: linear-gradient(180deg, rgba(5, 5, 6, 0), #050506); }
|
||
#s4 .body { top: 640px; }
|
||
#s4 .q { font-size: 76px; margin-top: 22px; }
|
||
#s4 .sub { margin-top: 30px; font-size: 32px; }
|
||
|
||
/* S5 ответы vs капитал */
|
||
#s5 .body { top: 230px; }
|
||
.pair { margin-top: 44px; }
|
||
.pair .q { font-size: 84px; }
|
||
.pair .q.dimq { color: var(--dim); }
|
||
#s5 .rule { margin: 54px 0; }
|
||
#s5 .sub { margin-top: 56px; font-size: 32px; }
|
||
|
||
/* S6 оргструктура */
|
||
#s6 .photo { right: 0; top: 0; width: 520px; height: 1350px; }
|
||
#s6 .photo img { object-position: 50% 20%; }
|
||
#s6-fade { position: absolute; right: 0; top: 0; width: 520px; height: 1350px; background: linear-gradient(90deg, #050506 0%, rgba(5, 5, 6, 0.25) 45%, rgba(5, 5, 6, 0) 100%); }
|
||
#s6 .body { top: 250px; right: 420px; }
|
||
#s6 .q { font-size: 84px; margin-top: 26px; }
|
||
#s6 .sub { margin-top: 36px; font-size: 30px; }
|
||
#s6-split { display: flex; gap: 8px; margin-top: 40px; }
|
||
#s6-split i { display: block; width: 46px; height: 46px; border-radius: 50%; }
|
||
.hum { background: var(--bone); }
|
||
.agt { background: transparent; border: 4px solid var(--lime); }
|
||
|
||
/* S7 агенты нанимают агентов */
|
||
#s7 .body { top: 200px; }
|
||
#s7 .q { font-size: 92px; margin-top: 26px; }
|
||
#s7-net { position: absolute; left: 64px; right: 64px; top: 560px; height: 440px; }
|
||
#s7 .sub { position: absolute; left: 64px; right: 64px; bottom: 140px; font-size: 32px; }
|
||
|
||
/* S8 финал */
|
||
#s8 .photo { left: 64px; top: 170px; width: 300px; height: 300px; border-radius: 50%; border: 6px solid var(--lime); }
|
||
#s8 .body { top: 530px; }
|
||
#s8 .q { font-size: 76px; }
|
||
#s8-cta { margin-top: 50px; display: flex; align-items: center; gap: 26px; }
|
||
#s8-btn { padding: 22px 40px; border-radius: 40px; background: var(--lime); color: var(--carbon); font-size: 34px; font-weight: 700; }
|
||
#s8-x { font-size: 32px; color: var(--bone); }
|
||
#s8-logo { position: absolute; left: 64px; bottom: 120px; width: 380px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="root" data-composition-id="main" data-start="0" data-duration="28" data-width="1080" data-height="1350">
|
||
<div id="bg" class="clip" data-start="0" data-duration="28" data-track-index="0"><div id="bg-grid"></div></div>
|
||
|
||
<!-- 1 обложка -->
|
||
<section id="s1" class="clip slide" data-start="0" data-duration="3.5" data-track-index="1">
|
||
<div class="photo" id="s1-photo"><img src="img/cover.jpg" alt="" /></div>
|
||
<div id="s1-fade"></div>
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>01</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono" id="s1-k">6 thoughts on the future of AI</div>
|
||
<div class="q" id="s1-q">The model is not the product. <em>The harness is.</em></div>
|
||
<div id="s1-by">Alex Shkor <span>· founder, Shkor Labs & Cooperative 42</span></div>
|
||
</div>
|
||
<div class="foot mono"><span>cil.by</span><span class="swipe">swipe <svg viewBox="0 0 44 20"><path d="M0 10 H40 M30 2 L40 10 L30 18" stroke="#c6ff4d" stroke-width="3" fill="none" /></svg></span></div>
|
||
</section>
|
||
|
||
<!-- 2 модели дешевеют -->
|
||
<section id="s2" class="clip slide" data-start="3.5" data-duration="3.5" data-track-index="1">
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>02</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono">01 · Models</div>
|
||
<div class="q" id="s2-q">Models are rented, interchangeable and trending to <em>free</em>.</div>
|
||
<div class="sub" id="s2-sub">Supply grows every quarter. Prices race to zero. Building on the model alone means building on sand.</div>
|
||
</div>
|
||
<svg id="s2-chart" viewBox="0 0 952 360">
|
||
<line x1="0" y1="340" x2="952" y2="340" stroke="rgba(236,230,218,0.25)" stroke-width="2" />
|
||
<path id="s2-line" d="M0 30 C 160 40, 240 110, 360 170 S 600 290, 952 326" fill="none" stroke="#c6ff4d" stroke-width="6" stroke-linecap="round" />
|
||
<text x="0" y="22" fill="#a8a297" font-family="JetBrains Mono" font-size="20">PRICE PER TOKEN</text>
|
||
<text x="952" y="310" fill="#c6ff4d" font-family="JetBrains Mono" font-size="22" text-anchor="end">→ 0</text>
|
||
</svg>
|
||
</section>
|
||
|
||
<!-- 3 харнес вокруг модели -->
|
||
<section id="s3" class="clip slide" data-start="7" data-duration="3.5" data-track-index="1">
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>03</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono">02 · The harness</div>
|
||
<div class="q" id="s3-q">The harness is everything <em>around</em> the model.</div>
|
||
</div>
|
||
<div id="s3-ring">
|
||
<div id="s3-orbit"></div>
|
||
<div id="s3-core"><b class="mono">MODEL</b><span class="mono">a commodity</span></div>
|
||
<div class="chip" style="left:280px;top:40px">principles</div>
|
||
<div class="chip" style="left:488px;top:160px">decisions</div>
|
||
<div class="chip" style="left:488px;top:400px">skills</div>
|
||
<div class="chip" style="left:280px;top:520px">memory</div>
|
||
<div class="chip" style="left:72px;top:400px">tools</div>
|
||
<div class="chip" style="left:72px;top:160px">rituals</div>
|
||
</div>
|
||
<div class="sub" id="s3-sub">The model thinks. The harness decides what it thinks about, how, and for whom.</div>
|
||
</section>
|
||
|
||
<!-- 4 ничего не принадлежит -->
|
||
<section id="s4" class="clip slide" data-start="10.5" data-duration="3.5" data-track-index="1">
|
||
<div class="photo" id="s4-photo"><img src="img/river.jpg" alt="" /></div>
|
||
<div id="s4-fade"></div>
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>04</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono">03 · The trap</div>
|
||
<div class="q" id="s4-q">A year of working with AI, and most people own <em>nothing</em> of it.</div>
|
||
<div class="sub" id="s4-sub">Every correction you type lives in a chat window. Scattered, forgotten, locked in someone else’s product.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5 ответы vs капитал -->
|
||
<section id="s5" class="clip slide" data-start="14" data-duration="3.5" data-track-index="1">
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>05</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono">04 · The shift</div>
|
||
<div class="pair">
|
||
<div class="q dimq" id="s5-a">Working with AI gives you answers.</div>
|
||
<div class="rule" id="s5-r"></div>
|
||
<div class="q" id="s5-b">Working on your harness gives you <em>equity</em>.</div>
|
||
</div>
|
||
<div class="sub" id="s5-sub">Competitors can rent the same models. They cannot copy two years of your harness.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 пол-людей пол-агентов -->
|
||
<section id="s6" class="clip slide" data-start="17.5" data-duration="3.5" data-track-index="1">
|
||
<div class="photo" id="s6-photo"><img src="img/portrait.jpg" alt="" /></div>
|
||
<div id="s6-fade"></div>
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>06</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono">05 · The org</div>
|
||
<div class="q" id="s6-q">The org chart is half human, <em>half agents</em>.</div>
|
||
<div id="s6-split"><i class="hum"></i><i class="hum"></i><i class="hum"></i><i class="agt"></i><i class="agt"></i><i class="agt"></i></div>
|
||
<div class="sub" id="s6-sub">In our studio a board decision at 10:00 is law across every agent by 10:04.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7 агенты нанимают агентов -->
|
||
<section id="s7" class="clip slide" data-start="21" data-duration="3.5" data-track-index="1">
|
||
<div class="top"><img src="img/shkor-labs-icon-lime.svg" alt="" /><div class="count mono"><b>07</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="kick mono">06 · Next</div>
|
||
<div class="q" id="s7-q">Next, agents <em>hire agents</em>.</div>
|
||
</div>
|
||
<svg id="s7-net" viewBox="0 0 952 440">
|
||
<g stroke="rgba(198,255,77,0.55)" stroke-width="3" class="s7l">
|
||
<line x1="120" y1="220" x2="360" y2="90" /><line x1="120" y1="220" x2="360" y2="350" />
|
||
<line x1="360" y1="90" x2="600" y2="220" /><line x1="360" y1="350" x2="600" y2="220" />
|
||
<line x1="600" y1="220" x2="840" y2="90" /><line x1="600" y1="220" x2="840" y2="350" /><line x1="360" y1="90" x2="840" y2="90" />
|
||
</g>
|
||
<g class="s7n">
|
||
<circle cx="120" cy="220" r="34" fill="#ece6da" /><circle cx="360" cy="90" r="30" fill="none" stroke="#c6ff4d" stroke-width="6" />
|
||
<circle cx="360" cy="350" r="30" fill="none" stroke="#c6ff4d" stroke-width="6" /><circle cx="600" cy="220" r="34" fill="#c6ff4d" />
|
||
<circle cx="840" cy="90" r="30" fill="none" stroke="#c6ff4d" stroke-width="6" /><circle cx="840" cy="350" r="30" fill="none" stroke="#c6ff4d" stroke-width="6" />
|
||
</g>
|
||
</svg>
|
||
<div class="sub" id="s7-sub">The agent mesh becomes a labor market. A tuned harness for a niche becomes a product you can sell.</div>
|
||
</section>
|
||
|
||
<!-- 8 финал -->
|
||
<section id="s8" class="clip slide" data-start="24.5" data-duration="3.5" data-track-index="1">
|
||
<div class="photo" id="s8-photo"><img src="img/smile.jpg" alt="" /></div>
|
||
<div class="top" style="justify-content:flex-end"><div class="count mono"><b>08</b> / 08</div></div>
|
||
<div class="body">
|
||
<div class="q" id="s8-q">Everyone will have a harness in five years. <em>Own yours</em>, before it owns your future.</div>
|
||
<div id="s8-cta"><div id="s8-btn">Start at cil.by</div><div id="s8-x" class="mono">@alexshkor</div></div>
|
||
</div>
|
||
<img id="s8-logo" src="img/shkor-labs-logo-dark-bg.svg" alt="" />
|
||
</section>
|
||
</div>
|
||
|
||
<script>
|
||
const tl = gsap.timeline({ paused: true });
|
||
const IN = (sel, at, from = { opacity: 0, y: 36 }, d = 0.6) =>
|
||
tl.fromTo(sel, from, { opacity: 1, x: 0, y: 0, scale: 1, duration: d, ease: "power3.out" }, at);
|
||
tl.fromTo("#bg-grid", { y: 0 }, { y: 90, duration: 28, ease: "none" }, 0);
|
||
|
||
// 1
|
||
tl.fromTo("#s1-photo", { scale: 1.12 }, { scale: 1, duration: 3.4, ease: "power2.out" }, 0);
|
||
IN("#s1-k", 0.3, { opacity: 0, y: 16 }, 0.5);
|
||
IN("#s1-q", 0.5);
|
||
IN("#s1-by", 1.1, { opacity: 0, y: 16 }, 0.5);
|
||
// 2
|
||
IN("#s2-q", 3.7);
|
||
const L = document.getElementById("s2-line").getTotalLength();
|
||
tl.fromTo("#s2-line", { strokeDasharray: L, strokeDashoffset: L }, { strokeDashoffset: 0, duration: 1.4, ease: "power2.inOut" }, 4.1);
|
||
IN("#s2-sub", 4.6, { opacity: 0, y: 16 }, 0.5);
|
||
// 3
|
||
IN("#s3-q", 7.2);
|
||
tl.fromTo("#s3-orbit", { rotation: 0 }, { rotation: 60, duration: 3.5, ease: "none" }, 7);
|
||
tl.fromTo("#s3 .chip", { opacity: 0, scale: 0.6 }, { opacity: 1, scale: 1, duration: 0.4, stagger: 0.12, ease: "back.out(2)" }, 7.6);
|
||
IN("#s3-sub", 8.6, { opacity: 0, y: 16 }, 0.5);
|
||
// 4
|
||
tl.fromTo("#s4-photo", { scale: 1.1 }, { scale: 1, duration: 3.4, ease: "power2.out" }, 10.5);
|
||
IN("#s4-q", 10.8);
|
||
IN("#s4-sub", 11.5, { opacity: 0, y: 16 }, 0.5);
|
||
// 5
|
||
IN("#s5-a", 14.2);
|
||
tl.fromTo("#s5-r", { scaleX: 0, transformOrigin: "left center" }, { scaleX: 1, duration: 0.5, ease: "power3.inOut" }, 14.8);
|
||
IN("#s5-b", 15.1);
|
||
IN("#s5-sub", 15.8, { opacity: 0, y: 16 }, 0.5);
|
||
// 6
|
||
tl.fromTo("#s6-photo", { x: 80, opacity: 0 }, { x: 0, opacity: 1, duration: 0.8, ease: "power3.out" }, 17.5);
|
||
IN("#s6-q", 17.8);
|
||
tl.fromTo("#s6-split i", { opacity: 0, scale: 0.4 }, { opacity: 1, scale: 1, duration: 0.3, stagger: 0.1, ease: "back.out(2)" }, 18.4);
|
||
IN("#s6-sub", 19.1, { opacity: 0, y: 16 }, 0.5);
|
||
// 7
|
||
IN("#s7-q", 21.2);
|
||
tl.fromTo("#s7-net .s7n circle", { opacity: 0, scale: 0.3, transformOrigin: "50% 50%" }, { opacity: 1, scale: 1, duration: 0.35, stagger: 0.1, ease: "back.out(2)" }, 21.7);
|
||
tl.fromTo("#s7-net .s7l line", { opacity: 0 }, { opacity: 1, duration: 0.3, stagger: 0.08 }, 22.1);
|
||
IN("#s7-sub", 22.7, { opacity: 0, y: 16 }, 0.5);
|
||
// 8
|
||
IN("#s8-photo", 24.6, { opacity: 0, scale: 0.8 }, 0.6);
|
||
IN("#s8-q", 24.9);
|
||
IN("#s8-cta", 25.6, { opacity: 0, y: 16 }, 0.5);
|
||
IN("#s8-logo", 26.0, { opacity: 0 }, 0.6);
|
||
|
||
window.__timelines = window.__timelines || {};
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body>
|
||
</html>
|