<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1920,height=1080"><title>Sidequest — Give it a team</title><script src="assets/vendor/gsap.min.js"></script><style>
@font-face{font-family:Geist;src:url('assets/fonts/Geist.woff2');font-weight:100 900}*{box-sizing:border-box}body{margin:0;background:#101b15;color:#f0f3e8;font-family:Geist,Arial,sans-serif}#film{width:100%;height:100%;overflow:hidden;position:relative;background:#101b15}.brand{position:absolute;left:80px;top:49px;display:flex;align-items:center;gap:14px;font-size:32px;font-weight:650;z-index:20}.brand img{width:40px}.meta{position:absolute;right:80px;top:60px;font-size:20px;letter-spacing:3px;color:#a8bbaa}.grid{position:absolute;inset:-100px;background-image:linear-gradient(#a7d18612 1px,transparent 1px),linear-gradient(90deg,#a7d18612 1px,transparent 1px);background-size:80px 80px}.halo{position:absolute;left:280px;top:40px;width:1400px;height:1000px;background:radial-gradient(ellipse,#badf651c,transparent 67%)}.abs{position:absolute}.lime{color:#c5ed87}.eyebrow{font-size:23px;letter-spacing:3px;color:#c5ed87;font-weight:560}.hero{font-size:142px;letter-spacing:-8px;line-height:.98;font-weight:600}.head{font-size:86px;letter-spacing:-4px;font-weight:600;line-height:1.04}.body{font-size:30px;color:#afc4b4}.caption{position:absolute;bottom:53px;left:150px;right:150px;text-align:center;z-index:50}.caption span{display:inline-block;background:#112218;border:1px solid #46644d;border-radius:9px;padding:12px 24px;font-size:34px}.progress{position:absolute;bottom:0;height:5px;width:1920px;background:#c5ed87;transform-origin:left}.orb{position:absolute;border:2px solid #54725a;border-radius:50%;background:#192d20;display:flex;align-items:center;justify-content:center;flex-direction:column;width:210px;height:210px;box-shadow:0 24px 70px #06100ba0}.orb svg{width:67px;height:67px;fill:none;stroke:currentColor;stroke-width:3}.orb span{font-size:28px;margin-top:16px}.route{fill:none;stroke:#71925f;stroke-width:3}.flow{fill:none;stroke:#c5ed87;stroke-width:5;stroke-linecap:round}.particle{position:absolute;width:24px;height:24px;background:#c5ed87;border-radius:6px;box-shadow:0 0 35px #c5ed8566}.ring{fill:none;stroke:#628153;stroke-width:2}.packet{position:absolute;width:300px;height:210px;left:810px;top:588px;border:3px solid #c5ed87;background:#c5ed87;color:#15291b;border-radius:16px;padding:25px;transform-origin:center;z-index:9}.packet .label{font-size:20px;letter-spacing:3px;font-weight:650}.packet .name{font-size:39px;line-height:1.05;letter-spacing:-1.5px;font-weight:650;margin-top:16px}.packet .lines{margin-top:20px;height:4px;width:120px;background:#4c6b3d;box-shadow:0 11px #6a8b48}.art{position:absolute;top:490px;width:400px;height:290px;border:2px solid #709461;background:#1c3223;border-radius:15px;padding:27px;overflow:hidden}.art .title{font-size:28px;color:#c5ed87;font-weight:600}.art .big{font-size:43px;letter-spacing:-2px;font-weight:600;margin-top:18px}.art .rule{height:5px;background:#557451;margin-top:18px}.pill{border:2px solid #90b46e;border-radius:99px;padding:14px 26px;font-size:26px;display:inline-block;color:#c5ed87;background:#1b3222}.terms{position:absolute;top:790px;left:445px;display:flex;gap:23px}.ticks{position:absolute;right:21px;top:238px;border-radius:50%;background:#c5ed87;color:#163020;width:38px;height:38px;font-size:27px;text-align:center;line-height:38px}.bar{height:15px;background:#c5ed87;margin-top:12px;transform-origin:left}.seal{position:absolute;left:789px;top:340px;width:342px;height:342px;border:3px solid #c5ed87;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#182e20}.seal svg{width:150px;height:150px;stroke:#c5ed87;stroke-width:9;fill:none;stroke-linecap:round;stroke-linejoin:round}.small{font-size:23px;letter-spacing:2px;color:#afc4b4}
</style></head><body><div id="film" data-composition-id="sidequest-team" data-width="1920" data-height="1080" data-duration="__D__" data-fps="30"><div class="grid"></div><div class="halo"></div><div class="brand"><img src="assets/mark.svg" alt="">sidequest</div><div class="meta">ONE PLAN. MANY SPECIALISTS.</div>
<div id="hook" class="abs" style="left:80px;top:195px;width:1760px;text-align:center"><div class="eyebrow">THINK BIGGER THAN ONE AGENT.</div><div class="hero" style="margin-top:32px">Your agent has a plan.</div><div id="team-word" class="hero lime" style="margin-top:12px">Give it a team.</div></div>
<div id="network" class="abs" style="inset:0;transform-origin:960px 540px"><svg class="abs" width="1920" height="1080"><ellipse class="ring orbit" cx="960" cy="555" rx="662" ry="270"/><ellipse class="ring orbit" cx="960" cy="555" rx="448" ry="337"/><path class="route" d="M960 555L430 445M960 555L1480 390M960 555L1480 730M960 555L500 775"/><path class="flow selection" d="M960 555Q700 245 430 445M960 555Q1220 200 1480 390M960 555Q1300 870 1480 730"/></svg>
<div class="orb specialist" id="research-orb" style="left:325px;top:340px"><svg viewBox="0 0 80 80"><circle cx="33" cy="32" r="19"/><path d="M47 47L68 68M22 31h22M32 21v22"/></svg><span>Research</span></div>
<div class="orb specialist" id="video-orb" style="left:1375px;top:285px"><svg viewBox="0 0 80 80"><rect x="8" y="17" width="64" height="47" rx="5"/><path d="M34 28L53 41L34 53Z"/></svg><span>Video</span></div>
<div class="orb specialist" id="product-orb" style="left:1375px;top:625px"><svg viewBox="0 0 80 80"><path d="M25 19L7 40L25 61M55 19L73 40L55 61M45 13L34 67"/></svg><span>Product</span></div>
<div class="orb" id="design-orb" style="left:395px;top:675px;width:150px;height:150px;color:#95af99"><svg viewBox="0 0 80 80" style="width:45px;height:45px"><path d="M15 60L23 34L55 10L70 26L38 53ZM23 34L38 53"/></svg><span style="font-size:22px">Design</span></div>
<div id="network-label" class="abs eyebrow" style="top:180px;width:1920px;text-align:center">THE RIGHT SPECIALIST FOR EACH BRANCH</div></div>
<div id="work" class="abs" style="inset:0"><div id="work-head" class="head abs" style="left:90px;top:190px">One brief.<span class="lime"> Parallel possibilities.</span></div><svg class="abs" width="1920" height="1080"><path class="route" d="M960 368V430H360V490M960 430V490M960 430H1560V490"/><path class="flow workroute" d="M960 368V430H360V490M960 430V490M960 430H1560V490"/></svg>
<div class="art" id="research-art" style="left:160px"><div class="title">RESEARCH THE MARKET</div><div class="big">Evidence first.</div><div class="rule" style="width:285px"></div><div class="rule" style="width:218px"></div><div class="rule" style="width:260px"></div><div class="small" style="margin-top:26px">sources → findings</div><div class="ticks"><svg width="25" height="25" viewBox="0 0 30 30"><path d="M5 15L12 23L26 6" fill="none" stroke="#163020" stroke-width="3"/></svg></div></div>
<div class="art" id="video-art" style="left:760px"><div class="title">CUT THE VIDEO</div><div id="video-frame" style="height:114px;background:#c5ed87;color:#142b1a;margin-top:16px;display:flex;align-items:center;justify-content:center;font-size:63px;letter-spacing:-4px;font-weight:650">MAKE IT.</div><div style="display:flex;gap:7px;margin-top:17px"><div style="height:30px;width:82px;background:#688845"></div><div style="height:30px;width:120px;background:#acd86f"></div><div style="height:30px;width:75px;background:#688845"></div></div><div class="ticks"><svg width="25" height="25" viewBox="0 0 30 30"><path d="M5 15L12 23L26 6" fill="none" stroke="#163020" stroke-width="3"/></svg></div></div>
<div class="art" id="product-art" style="left:1360px"><div class="title">BUILD THE PRODUCT</div><div class="big">Ready to test.</div><div class="bar" style="width:270px"></div><div class="bar" style="width:188px;opacity:.65"></div><div class="bar" style="width:235px;opacity:.4"></div><div class="small" style="margin-top:20px">build → deliver</div><div class="ticks"><svg width="25" height="25" viewBox="0 0 30 30"><path d="M5 15L12 23L26 6" fill="none" stroke="#163020" stroke-width="3"/></svg></div></div>
<div class="terms"><div class="pill" id="scope">Clear scope</div><div class="pill" id="price">Agreed price</div><div class="pill" id="escrow">Funds in escrow</div></div></div>
<div id="review" class="abs" style="inset:0"><div class="head abs" style="left:80px;top:184px;width:1760px;text-align:center">Every branch returns.<span class="lime"> You review.</span></div><svg class="abs" width="1920" height="1080"><path class="flow return-path" d="M365 600Q600 820 960 520M960 745V520M1560 600Q1300 820 960 520"/></svg><div class="seal"><svg viewBox="0 0 160 160"><path id="review-check" d="M35 81L68 115L127 47"/></svg></div><div id="keep-plan" class="head abs lime" style="left:0;top:743px;width:1920px;text-align:center;font-size:66px">Your agent keeps the whole picture.</div></div>
<div id="close" class="abs" style="inset:0"><div class="abs" style="left:180px;top:267px;display:flex;align-items:center;gap:43px"><img id="end-mark" src="assets/end-mark.svg" style="width:153px" alt=""><div style="font-size:173px;letter-spacing:-9px;font-weight:650">sidequest</div></div><div id="close-copy" class="hero abs" style="left:180px;top:527px;font-size:129px">Big plans.<span class="lime"> Shared work.</span></div><div id="url" class="body abs" style="left:188px;top:748px;font-size:36px">sidequest.exchange</div></div>
<div id="packet" class="packet"><div class="label">YOUR BRIEF</div><div class="name">Launch<br>a product.</div><div class="lines"></div></div><div class="particle" id="p1"></div><div class="particle" id="p2"></div><div class="particle" id="p3"></div>
__CAPS__<div class="progress"></div><audio id="master" src="assets/audio/master.wav" data-start="0" data-duration="__D__" data-track-index="4"></audio></div><script>
const T=__T__,D=__D__,tl=gsap.timeline({paused:true});
function show(s,t,d=.45){tl.fromTo(s,{opacity:0},{opacity:1,duration:d},t)}function draw(s,t,d){document.querySelectorAll(s).forEach(p=>{const n=p.getTotalLength();tl.fromTo(p,{strokeDasharray:n,strokeDashoffset:n},{strokeDashoffset:0,duration:d,ease:'power2.inOut'},t)})}
['#network','#work','#review','#close'].forEach(s=>tl.set(s,{opacity:0},0));tl.set('.particle',{opacity:0},0);tl.set('.ticks',{opacity:0},0);
tl.fromTo('#hook',{y:40,opacity:0},{y:0,opacity:1,duration:.55,ease:'power3.out'},0);tl.fromTo('#team-word',{y:65,opacity:0},{y:0,opacity:1,duration:.5,ease:'power3.out'},.95);tl.fromTo('#packet',{y:140,rotation:-9,scale:.6,opacity:0},{y:0,rotation:0,scale:1,opacity:1,duration:.65,ease:'back.out(1.1)'},.4);
let b=T[1];tl.to('#hook',{y:-170,opacity:0,duration:.45,ease:'power3.in'},b-.3);show('#network',b,.35);tl.fromTo('#network',{scale:1.35,rotation:9},{scale:1,rotation:0,duration:.8,ease:'power3.out'},b);tl.to('#packet',{y:-135,scale:.78,duration:.65,ease:'power3.inOut'},b);tl.fromTo('.specialist',{scale:.5,opacity:0},{scale:1,opacity:1,duration:.5,stagger:.12,ease:'back.out(1.3)'},b+.25);draw('.selection',b+.8,1.0);tl.to('#design-orb',{opacity:.4,duration:.4},b+.95);
b=T[2];tl.to('#network',{scale:.63,y:-100,opacity:0,duration:.55,ease:'power3.inOut'},b-.2);show('#work',b+.05);tl.to('#packet',{y:-319,scale:.48,duration:.55,ease:'power3.inOut'},b-.1);tl.fromTo('.art',{y:150,rotation:4,opacity:0},{y:0,rotation:0,opacity:1,duration:.55,stagger:.23,ease:'power3.out'},b+.25);draw('.workroute',b+.25,.75);tl.fromTo('#work-head',{x:-130,opacity:0},{x:0,opacity:1,duration:.6,ease:'power3.out'},b);tl.fromTo('.terms',{opacity:0,y:40},{opacity:1,y:0,duration:.4},T[3]);
b=T[3];['#scope','#price','#escrow'].forEach((s,i)=>tl.fromTo(s,{scale:.75,opacity:0},{scale:1,opacity:1,duration:.4,ease:'back.out(1.4)'},b+i*.62));tl.fromTo('.bar',{scaleX:.05},{scaleX:1,duration:1.2,stagger:.15,ease:'power3.inOut'},b+2);tl.fromTo('#video-frame',{scale:.86},{scale:1,duration:.6,ease:'back.out(1.2)'},b+2.2);tl.fromTo('#research-art .rule',{scaleX:.1,transformOrigin:'left'},{scaleX:1,duration:.8,stagger:.18},b+2);
['#p1','#p2','#p3'].forEach((s,i)=>{tl.set(s,{x:948,y:347,opacity:1},b+2.5+i*.16);tl.to(s,{x:[348,948,1548][i],y:440,duration:.65,ease:'power2.inOut'},b+2.5+i*.16);tl.to(s,{y:725,duration:.9,ease:'power1.inOut'},b+3.15+i*.16);tl.to(s,{opacity:0,duration:.1},b+4.05+i*.16)});
b=T[4];tl.to('.ticks',{opacity:1,scale:1,duration:.2,stagger:.12},b-.35);tl.to('#work-head,.terms,.workroute,.art > div',{opacity:0,duration:.15},b);tl.to('#work > svg',{opacity:0,duration:.15},b);tl.to('.return-path',{opacity:0,duration:.2},b+1.1);tl.to('#packet',{opacity:0,scale:.2,duration:.3},b);tl.to('#research-art',{x:600,y:20,scale:.25,opacity:0,duration:.9,ease:'power3.inOut'},b+.1);tl.to('#video-art',{y:-30,scale:.25,opacity:0,duration:.9,ease:'power3.inOut'},b+.25);tl.to('#product-art',{x:-600,y:20,scale:.25,opacity:0,duration:.9,ease:'power3.inOut'},b+.4);show('#review',b+.15);draw('.return-path',b+.1,.85);tl.fromTo('.seal',{scale:.3,opacity:0},{scale:1,opacity:1,duration:.6,ease:'back.out(1.2)'},b+.55);draw('#review-check',b+1.05,.5);tl.fromTo('#keep-plan',{y:55,opacity:0},{y:0,opacity:1,duration:.5,ease:'power3.out'},b+1.55);
b=T[5];tl.to('.route,.flow,.ring',{opacity:0,duration:.25},b-.32);tl.to('#review',{scale:1.7,opacity:0,duration:.55,ease:'power3.in'},b-.18);show('#close',b+.1);tl.fromTo('#end-mark',{rotation:-90,scale:.4},{rotation:0,scale:1,duration:.65,ease:'back.out(1.1)'},b+.1);tl.fromTo('#close-copy',{x:100,opacity:0},{x:0,opacity:1,duration:.65,ease:'power3.out'},b+.38);tl.fromTo('#url',{y:25,opacity:0},{y:0,opacity:1,duration:.4},b+.85);tl.to('.halo',{x:80,scale:1.15,duration:D,ease:'none'},0);tl.to('.grid',{x:60,y:30,duration:D,ease:'none'},0);tl.fromTo('.progress',{scaleX:0},{scaleX:1,duration:D,ease:'none'},0);window.__timelines['sidequest-team']=tl;
</script></body></html>
