95b77f2839
- make.py: 8 типов слайдов (cover/quote/phototop/photoside/stat/list/formula/final), палитры carbon и bone в стиле Shkor Labs; - studio-orchestration, production-lessons — настоящие фото (ч/б); principle-zero, govern-agents — фото, сгенерированные Kling (Nano Banana Pro) по референсам; - тезисы — из 42_Harness_Deck, Shkor_Labs_Deck, Simbiot Whitepaper, COOP_CONTEXT. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
127 lines
18 KiB
HTML
127 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=1080, height=1350" />
|
|
<title>How we govern an AI workforce</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"); }
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
html, body { width:1080px; height:1350px; overflow:hidden; background:var(--bg); }
|
|
body { color:var(--ink); 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; }
|
|
em { font-style:normal; }
|
|
#bg { background:radial-gradient(900px 1100px at 70% 20%, var(--bg2) 0%, var(--bg) 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; }
|
|
.mark { width:56px; height:56px; display:block; }
|
|
.count { font-size:22px; letter-spacing:0.18em; color:var(--dim); background:rgba(var(--fade),0.75); padding:10px 16px; border-radius:20px; }
|
|
.count b { color:var(--ink); }
|
|
.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(--ink); font-weight:700; }
|
|
.kick { font-size:24px; letter-spacing:0.26em; color:var(--dim); text-transform:uppercase; margin-bottom:26px; }
|
|
.kick b { color:var(--ink); }
|
|
.body { position:absolute; left:64px; right:64px; z-index:3; }
|
|
.q { font-family:"Fraunces", serif; font-weight:700; letter-spacing:-0.02em; line-height:1.05; }
|
|
.sub { font-size:34px; line-height:1.4; color:var(--dim); margin-top:34px; }
|
|
.photo { position:absolute; overflow:hidden; }
|
|
.photo img { display:block; width:100%; height:100%; object-fit:cover; }
|
|
.fadeb { position:absolute; left:0; right:0; }
|
|
/* cover */
|
|
.cover .photo { inset:0; }
|
|
.cover .fadeb { inset:0; background:linear-gradient(180deg, rgba(var(--fade),0) 0%, rgba(var(--fade),0.1) 30%, rgba(var(--fade),0.9) 52%, rgb(var(--fade)) 66%); }
|
|
.cover .body { bottom:150px; }
|
|
.cover .q { font-size:100px; }
|
|
.byline { margin-top:30px; font-size:30px; } .byline span { color:var(--dim); }
|
|
/* quote */
|
|
.quote .body { top:210px; } .quote .q { font-size:94px; }
|
|
.vis { position:absolute; left:64px; right:64px; bottom:140px; height:420px; }
|
|
/* phototop */
|
|
.phototop .photo { left:0; top:0; width:1080px; height:640px; }
|
|
.phototop .fadeb { top:380px; height:262px; background:linear-gradient(180deg, rgba(var(--fade),0), rgb(var(--fade))); }
|
|
.phototop .body { top:650px; } .phototop .q { font-size:76px; }
|
|
/* photoside */
|
|
.photoside .photo { right:0; top:0; width:520px; height:1350px; }
|
|
.photoside .fadeb { right:0; top:0; width:520px; height:1350px; background:linear-gradient(90deg, rgb(var(--fade)) 0%, rgba(var(--fade),0.25) 45%, rgba(var(--fade),0) 100%); left:auto; }
|
|
.photoside .body { top:250px; right:480px; } .photoside .q { font-size:80px; }
|
|
.dots { display:flex; gap:8px; margin-top:40px; }
|
|
.dots i { display:block; width:46px; height:46px; border-radius:50%; }
|
|
.dots .h { background:var(--ink); } .dots .a { border:4px solid var(--acc); }
|
|
/* stat */
|
|
.stat .body { top:330px; }
|
|
.big { font-family:"Fraunces", serif; font-weight:700; font-size:300px; line-height:0.95; letter-spacing:-0.04em; white-space:nowrap; }
|
|
.big-l { font-size:44px; font-weight:700; margin-top:24px; line-height:1.25; }
|
|
/* list */
|
|
.list .body { top:210px; } .list .q { font-size:76px; }
|
|
.items { margin-top:50px; display:flex; flex-direction:column; gap:22px; }
|
|
.item { display:flex; gap:28px; align-items:baseline; padding:26px 30px; border:2px solid var(--line); border-radius:22px; background:rgba(var(--fade),0.5); }
|
|
.item b { font-family:"JetBrains Mono", monospace; font-size:30px; color:var(--dim); flex:0 0 52px; }
|
|
.item span { font-size:38px; line-height:1.3; }
|
|
/* formula */
|
|
.formula .body { top:300px; }
|
|
.parts { display:flex; flex-direction:column; gap:6px; }
|
|
.part { font-family:"Fraunces", serif; font-weight:700; font-size:120px; line-height:1.02; letter-spacing:-0.02em; }
|
|
.op { font-family:"JetBrains Mono", monospace; font-size:60px; color:var(--dim); margin-left:6px; }
|
|
/* final */
|
|
.final .photo { left:64px; top:170px; width:300px; height:300px; border-radius:50%; border:6px solid var(--acc); }
|
|
.final .body { top:530px; } .final .q { font-size:74px; }
|
|
.cta { margin-top:48px; display:flex; align-items:center; gap:26px; }
|
|
.btn { padding:22px 40px; border-radius:40px; background:var(--acc); color:var(--accink); font-size:34px; font-weight:700; }
|
|
.handle { font-size:32px; }
|
|
.logo { position:absolute; left:64px; bottom:110px; width:380px; }
|
|
|
|
:root { --bg:#ece6da;--bg2:#e2dbcd;--ink:#0b0b0c;--dim:#55504a;--acc:#0b0b0c;--accink:#c6ff4d;--line:rgba(11,11,12,0.14);--fade:236,230,218 }
|
|
em { background:#c6ff4d; color:#0b0b0c; padding:0 0.12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
|
|
</style></head><body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-duration="28.0" data-width="1080" data-height="1350">
|
|
<div id="bg" class="clip" data-start="0" data-duration="28.0" data-track-index="0"><div id="bg-grid"></div></div>
|
|
<section id="s1" class="clip slide cover" data-start="0.00" data-duration="3.5" data-track-index="1"><div class="photo" id="s1-p"><img src="img/server.jpg" alt="" style="object-position:50% 20%"/></div><div class="fadeb"></div><div class="top"><img class=mark 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">How we govern an <b>AI workforce</b></div><div class="q" id="s1-q" style="font-size:84px">Agents don't improvise the business. <em>They inherit it.</em></div><div class="byline" id="s1-b">Alex Shkor <span>· Shkor Labs & Cooperative 42</span></div></div><div class="foot mono"><span>cil.by</span><span class="swipe">swipe →</span></div></section><section id="s2" class="clip slide list" data-start="3.50" data-duration="3.5" data-track-index="1"><div class="top"><img class=mark 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" id="s2-k">01 · Constitution</div><div class="q" id="s2-q">Every product starts with <em>7 decisions</em>.</div><div class="items"><div class="item" id="s2-i0"><b>01</b><span>Mission · product · audience</span></div><div class="item" id="s2-i1"><b>02</b><span>Pricing · channels</span></div><div class="item" id="s2-i2"><b>03</b><span>Boundaries</span></div><div class="item" id="s2-i3"><b>04</b><span>Metrics</span></div></div></div></section><section id="s3" class="clip slide phototop" data-start="7.00" data-duration="3.5" data-track-index="1"><div class="photo" id="s3-p"><img src="img/meeting.jpg" alt="" style="object-position:50% 30%"/></div><div class="fadeb"></div><div class="top"><img class=mark 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" id="s3-k">02 · The board</div><div class="q" id="s3-q">Humans govern through <em>meetings</em>.</div><div class="sub" id="s3-s">Sessions are recorded, transcribed and summarized. Decisions become doctrine.</div></div></section><section id="s4" class="clip slide quote" data-start="10.50" data-duration="3.5" data-track-index="1"><div class="top"><img class=mark 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" id="s4-k">03 · Distribution</div><div class="q" id="s4-q">Doctrine changes are <em>deployments</em>, not conversations.</div><div class="sub" id="s4-s">A versioned manifest carries every principle to every agent. A new rule reached the whole fleet in about four minutes.</div></div><svg class="vis" viewBox="0 0 952 420"><line class="nl" x1="120" y1="210" x2="360" y2="80" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><line class="nl" x1="120" y1="210" x2="360" y2="340" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><line class="nl" x1="360" y1="80" x2="600" y2="210" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><line class="nl" x1="360" y1="340" x2="600" y2="210" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><line class="nl" x1="600" y1="210" x2="840" y2="80" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><line class="nl" x1="600" y1="210" x2="840" y2="340" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><line class="nl" x1="360" y1="80" x2="840" y2="80" stroke="var(--acc)" stroke-opacity="0.6" stroke-width="3"/><circle class="nc" cx="120" cy="210" r="32" fill="var(--ink)" stroke="var(--acc)" stroke-width="6"/><circle class="nc" cx="360" cy="80" r="32" fill="none" stroke="var(--acc)" stroke-width="6"/><circle class="nc" cx="360" cy="340" r="32" fill="none" stroke="var(--acc)" stroke-width="6"/><circle class="nc" cx="600" cy="210" r="32" fill="var(--acc)" stroke="var(--acc)" stroke-width="6"/><circle class="nc" cx="840" cy="80" r="32" fill="none" stroke="var(--acc)" stroke-width="6"/><circle class="nc" cx="840" cy="340" r="32" fill="none" stroke="var(--acc)" stroke-width="6"/></svg></section><section id="s5" class="clip slide photoside" data-start="14.00" data-duration="3.5" data-track-index="1"><div class="photo" id="s5-p"><img src="img/desk.jpg" alt="" style="object-position:62% 30%"/></div><div class="fadeb"></div><div class="top"><img class=mark 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" id="s5-k">04 · Security</div><div class="q" id="s5-q">UI hiding is cosmetics. <em>The server is the gate.</em></div><div class="sub" id="s5-s">Tenant isolation is enforced on every request.</div></div></section><section id="s6" class="clip slide list" data-start="17.50" data-duration="3.5" data-track-index="1"><div class="top"><img class=mark 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" id="s6-k">05 · Guardrails</div><div class="q" id="s6-q">What we never <em>hand over</em>.</div><div class="items"><div class="item" id="s6-i0"><b>01</b><span>Money stays human-gated</span></div><div class="item" id="s6-i1"><b>02</b><span>Every action is an auditable event</span></div><div class="item" id="s6-i2"><b>03</b><span>Kill-switch per agent: revoke its token</span></div><div class="item" id="s6-i3"><b>04</b><span>New features ship owner-only first</span></div></div></div></section><section id="s7" class="clip slide quote" data-start="21.00" data-duration="3.5" data-track-index="1"><div class="top"><img class=mark 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" id="s7-k">06 · The asset</div><div class="q" id="s7-q">Govern the <em>harness</em>, not the model.</div><div class="sub" id="s7-s">Models get swapped. Identity, decisions, principles, skills, memory, tools and rituals stay.</div></div><div class="vis" style="height:520px"><div style="position:absolute;left:206px;top:10px;width:540px;height:500px;border:2px dashed var(--acc);border-radius:50%;opacity:0.6"></div><div class="chip" style="position:absolute;left:381px;top:2px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">identity</div><div class="chip" style="position:absolute;left:592px;top:89px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">decisions</div><div class="chip" style="position:absolute;left:644px;top:283px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">principles</div><div class="chip" style="position:absolute;left:498px;top:439px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">skills</div><div class="chip" style="position:absolute;left:264px;top:439px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">memory</div><div class="chip" style="position:absolute;left:118px;top:283px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">tools</div><div class="chip" style="position:absolute;left:170px;top:89px;width:190px;height:56px;border-radius:28px;background:var(--acc);color:var(--accink);font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center">rituals</div></div></section><section id="s8" class="clip slide final" data-start="24.50" data-duration="3.5" data-track-index="1"><div class="photo" id="s8-p"><img src="img/workshop-face.jpg" alt="" style="object-position:50% 25%"/></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">Autonomy you can <em>audit</em>. Let's build yours.</div><div class="cta" id="s8-c"><div class="btn">Talk to us · cil.by</div><div class="handle mono">@alexshkor</div></div></div><img class="logo" id="s8-logo" src="img/shkor-labs-logo-light.svg" alt=""/></section>
|
|
</div>
|
|
<script>
|
|
const tl = gsap.timeline({ paused: true });
|
|
tl.fromTo("#bg-grid", { y: 0 }, { y: 90, duration: 28.0, ease: "none" }, 0);
|
|
tl.fromTo("#s1-p", { scale: 1.12 }, { scale: 1, duration: 3.4, ease: "power2.out" }, 0.00);
|
|
tl.fromTo("#s1-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 0.40);
|
|
tl.fromTo("#s1-b", { opacity: 0, y: 16 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.5, ease: "power3.out" }, 1.00);
|
|
tl.fromTo("#s1-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 0.10);
|
|
tl.fromTo("#s2-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 3.70);
|
|
tl.fromTo("#s2-i0", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 4.20);
|
|
tl.fromTo("#s2-i1", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 4.45);
|
|
tl.fromTo("#s2-i2", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 4.70);
|
|
tl.fromTo("#s2-i3", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 4.95);
|
|
tl.fromTo("#s2-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 3.60);
|
|
tl.fromTo("#s3-p", { scale: 1.1 }, { scale: 1, duration: 3.4, ease: "power2.out" }, 7.00);
|
|
tl.fromTo("#s3-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 7.30);
|
|
tl.fromTo("#s3-s", { opacity: 0, y: 16 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.5, ease: "power3.out" }, 8.00);
|
|
tl.fromTo("#s3-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 7.10);
|
|
tl.fromTo("#s4-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 10.70);
|
|
tl.fromTo("#s4-s", { opacity: 0, y: 16 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.5, ease: "power3.out" }, 11.40);
|
|
tl.fromTo("#s4 .nc", { opacity: 0 }, { opacity: 1, duration: 0.3, stagger: 0.1 }, 11.10);
|
|
tl.fromTo("#s4 .nl", { opacity: 0 }, { opacity: 1, duration: 0.3, stagger: 0.08 }, 11.50);
|
|
tl.fromTo("#s4-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 10.60);
|
|
tl.fromTo("#s5-p", { opacity: 0, x: 80 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.8, ease: "power3.out" }, 14.00);
|
|
tl.fromTo("#s5-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 14.30);
|
|
tl.fromTo("#s5-s", { opacity: 0, y: 16 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.5, ease: "power3.out" }, 15.00);
|
|
tl.fromTo("#s5-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 14.10);
|
|
tl.fromTo("#s6-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 17.70);
|
|
tl.fromTo("#s6-i0", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 18.20);
|
|
tl.fromTo("#s6-i1", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 18.45);
|
|
tl.fromTo("#s6-i2", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 18.70);
|
|
tl.fromTo("#s6-i3", { opacity: 0, x: -40 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.45, ease: "power3.out" }, 18.95);
|
|
tl.fromTo("#s6-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 17.60);
|
|
tl.fromTo("#s7-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 21.20);
|
|
tl.fromTo("#s7-s", { opacity: 0, y: 16 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.5, ease: "power3.out" }, 21.90);
|
|
tl.fromTo("#s7 .chip", { opacity: 0, scale: 0.6 }, { opacity: 1, scale: 1, duration: 0.4, stagger: 0.1, ease: "back.out(2)" }, 21.60);
|
|
tl.fromTo("#s7-k", { opacity: 0 }, { opacity: 1, duration: 0.4 }, 21.10);
|
|
tl.fromTo("#s8-p", { opacity: 0, scale: 0.8 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 24.60);
|
|
tl.fromTo("#s8-q", { opacity: 0, y: 36 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 24.90);
|
|
tl.fromTo("#s8-c", { opacity: 0, y: 16 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.5, ease: "power3.out" }, 25.60);
|
|
tl.fromTo("#s8-logo", { opacity: 0 }, { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, 26.00);
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["main"] = tl;
|
|
</script></body></html>
|