<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Sidequest — Research capacity</title><script src="assets/vendor/gsap.min.js"></script><style>
@font-face{font-family:Geist;src:url('assets/fonts/Geist.woff2')}*{box-sizing:border-box}html,body{margin:0;background:#101e17;color:#f4f4e9;font-family:Geist,Arial,sans-serif;width:1920px;height:1080px;overflow:hidden}#film{position:relative;width:100%;height:100%;overflow:hidden;background:#101e17}canvas{position:absolute;inset:0;width:1920px;height:1080px}.brand{position:absolute;left:78px;top:50px;display:flex;align-items:center;gap:14px;font-size:31px;font-weight:650}.brand img{width:38px;height:38px}.eyebrow{position:absolute;right:80px;top:61px;font-size:19px;letter-spacing:3px;color:#c4ed8b}.scene{position:absolute;inset:0}.copy{position:absolute;left:85px;top:215px;width:830px}.kicker{font-size:22px;letter-spacing:3px;color:#c4ed8b;margin-bottom:25px}h1,h2{font-size:107px;line-height:.98;letter-spacing:-5px;font-weight:600;margin:0}p{font-size:30px;line-height:1.3;color:#bdcabe;max-width:700px}.accent{color:#c4ed8b}.caption{position:absolute;left:100px;right:100px;bottom:46px;text-align:center}.caption span{display:inline-block;background:#1c3425;border:1px solid #63856a;padding:10px 24px;border-radius:8px;font-size:33px}.url{font-size:28px;color:#bdcabe;margin-top:55px}.progress{position:absolute;left:0;bottom:0;height:4px;width:1920px;background:#c4ed8b;transform-origin:left}
</style></head><body><div id="film" data-composition-id="research" data-width="1920" data-height="1080" data-duration="__DURATION__" data-fps="30"><canvas id="field" width="1920" height="1080"></canvas><div class="brand"><img src="assets/mark.svg" alt="">sidequest</div><div class="eyebrow">RESEARCH + ANALYSIS</div>
<section id="scene-0" class="scene clip" data-start="__R01_START__" data-duration="__R01_DUR__" data-track-index="1"><div class="copy" id="copy0"><div class="kicker">ONE BIG QUESTION</div><h1>Where should</h1><h1>we launch</h1><h1 class="accent">next?</h1></div></section>
<section id="scene-1" class="scene clip" data-start="__R02_START__" data-duration="__R02_DUR__" data-track-index="1"><div class="copy" id="copy1"><div class="kicker">YOU SET THE DIRECTION</div><h2>The question.</h2><h2>The scope.</h2><h2 class="accent">Your brief.</h2><p>What matters. What to explore.</p></div></section>
<section id="scene-2" class="scene clip" data-start="__R03_START__" data-duration="__R03_DUR__" data-track-index="1"><div class="copy" id="copy2" style="top:165px;width:1750px"><div class="kicker">YOUR AGENT + SPECIALISTS</div><h2 style="font-size:91px">Research in <span class="accent">parallel.</span></h2></div></section>
<section id="scene-3" class="scene clip" data-start="__R04_START__" data-duration="__R04_DUR__" data-track-index="1"><div class="copy" id="copy3" style="top:165px;width:1750px"><div class="kicker">MORE WAYS INTO THE QUESTION</div><h2 style="font-size:91px">Sources. Alternatives. <span class="accent">Patterns.</span></h2></div></section>
<section id="scene-4" class="scene clip" data-start="__R05_START__" data-duration="__R05_DUR__" data-track-index="1"><div class="copy" id="copy4"><div class="kicker">EVIDENCE COMES TOGETHER</div><h2>Cross-check.</h2><h2>Connect.</h2><h2 class="accent">Make it clear.</h2><p>A sourced brief, ready for your review.</p></div></section>
<section id="scene-5" class="scene clip" data-start="__R06_START__" data-duration="__R06_DUR__" data-track-index="1"><div class="copy" id="copy5"><div class="kicker">MORE GROUND COVERED</div><h2>You review.</h2><h2 class="accent">You decide.</h2><div style="font-size:69px;font-weight:600;margin-top:45px;letter-spacing:-3px">sidequest</div><div class="url">sidequest.exchange</div></div></section>
__CAPTIONS__<audio id="master" src="assets/audio/master.wav" data-start="0" data-duration="__DURATION__" data-track-index="3" preload="auto"></audio><div class="progress"></div></div><script>
const T=__TIMING__,D=__DURATION__;const rows=Object.values(T);const clock={t:0};const tl=gsap.timeline({paused:true});rows.forEach((r,i)=>{tl.fromTo('#copy'+i,{opacity:0,y:55},{opacity:1,y:0,duration:.42,ease:'power3.out'},r.scene+.06);if(i<5)tl.to('#copy'+i,{opacity:0,y:-30,duration:.18},rows[i+1].scene-.18)});tl.to(clock,{t:D,duration:D,ease:'none',onUpdate:()=>draw(clock.t)},0);tl.fromTo('.progress',{scaleX:0},{scaleX:1,duration:D,ease:'none'},0);window.__timelines['research']=tl;
const ctx=document.getElementById('field').getContext('2d');const C={bg:'#101e17',lime:'#c4ed8b',white:'#f4f4e9',line:'#4a7155',muted:'#afc5b6',coral:'#f4a57d',lilac:'#c3b8ff'};const clamp=x=>Math.max(0,Math.min(1,x));const ease=x=>1-Math.pow(1-clamp(x),3);const lerp=(a,b,t)=>a+(b-a)*t;
function line(x,y,X,Y,color=C.line,w=2){ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(X,Y);ctx.strokeStyle=color;ctx.lineWidth=w;ctx.stroke()}
function circle(x,y,r,color){ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.fillStyle=color;ctx.fill()}
function text(s,x,y,size=25,color=C.white){ctx.font=`${size>=40?600:500} ${size}px Geist`;ctx.fillStyle=color;ctx.fillText(s,x,y)}
function doc(x,y,w,h,rot,label,color=C.lime,p=1){ctx.save();ctx.translate(x,y);ctx.rotate(rot);ctx.globalAlpha=p;ctx.shadowColor='#0005';ctx.shadowBlur=30;ctx.shadowOffsetY=16;ctx.fillStyle='#203c2a';ctx.strokeStyle=color;ctx.lineWidth=2;ctx.beginPath();ctx.roundRect(-w/2,-h/2,w,h,10);ctx.fill();ctx.shadowBlur=0;ctx.shadowOffsetY=0;ctx.stroke();ctx.fillStyle=color;ctx.fillRect(-w/2+22,-h/2+23,25,6);if(label)text(label,-w/2+22,-h/2+67,Math.min(24,w*.09),color);for(let k=0;k<4;k++)line(-w/2+22,-h/2+95+k*20,w/2-25-(k%2)*25,-h/2+95+k*20,'#85a78c',3);ctx.restore()}
function brief(x,y,s=1,angle=0,phase=0){ctx.save();ctx.translate(x,y);ctx.rotate(angle);ctx.scale(s,s);ctx.shadowColor='#0008';ctx.shadowBlur=45;ctx.shadowOffsetY=26;ctx.fillStyle=C.white;ctx.beginPath();ctx.roundRect(-230,-285,460,570,16);ctx.fill();ctx.shadowBlur=0;ctx.shadowOffsetY=0;text('LAUNCH BRIEF',-186,-226,21,'#47614c');text(phase?'The evidence.':'The question.',-186,-153,37,'#163322');line(-186,-118,184,-118,'#94ad92',2);let labels=phase?['Sources','Alternatives','Key patterns','Open questions']:['Audience','Markets to explore','Questions to answer','Scope'];labels.forEach((a,i)=>{circle(-170,-65+i*77,7,i===3?C.coral:'#60813f');text(a,-147,-55+i*77,25,'#23492e');line(-147,-35+i*77,170,-35+i*77,'#b3c5ab',3)});ctx.restore()}
const nodes=Array.from({length:24},(_,i)=>({x:1020+(i%6)*133+Math.sin(i*9)*24,y:300+Math.floor(i/6)*140+Math.cos(i*5)*25,angle:Math.sin(i*3)*.17}));
function draw(t){ctx.clearRect(0,0,1920,1080);ctx.fillStyle=C.bg;ctx.fillRect(0,0,1920,1080);for(let x=35;x<1920;x+=65)for(let y=25;y<1080;y+=65)circle(x,y,1.2,'#36533f');let i=rows.findLastIndex(r=>t>=r.scene);i=Math.max(i,0);let u=t-rows[i].scene;let span=rows[i].span;
if(i===0){ctx.save();ctx.translate(1370,540);ctx.rotate(-.09+t*.013);for(let k=0;k<3;k++){ctx.beginPath();ctx.ellipse(0,0,230+k*90,150+k*65,.4,0,Math.PI*2);ctx.strokeStyle='#43634b';ctx.lineWidth=2;ctx.stroke()}ctx.restore();nodes.slice(0,12).forEach((n,k)=>{let a=k*Math.PI/6+t*.1;let x=1390+Math.cos(a)*(230+(k%2)*90),y=545+Math.sin(a)*(180+(k%2)*110);doc(x,y,95,130,Math.sin(a)*.14,'',k%3===0?C.lilac:C.lime,ease(t-.08*k))});text('?',1320,630,250,C.lime)}
if(i===1){let p=ease(u/.8);nodes.slice(0,8).forEach((n,k)=>{let a=k*Math.PI/4;let x=lerp(1390+Math.cos(a)*380,1390,p),y=lerp(550+Math.sin(a)*290,550,p);doc(x,y,100,140,.1,'',C.lime,1-p)});brief(1390,550,.65+p*.35,-.11*(1-p));}
if(i===2||i===3){let v=i===2?ease(u/.75):1;const xs=[400,965,1530],labels=['FIND SOURCES','EXPLORE ALTERNATIVES','ANALYZE DATA'],colors=[C.lime,C.coral,C.lilac];xs.forEach((x,k)=>{let xx=lerp(960,x,v);line(960,360,xx,445,colors[k],3);circle(xx,445,9,colors[k]);text(labels[k],xx-155,492,23,colors[k]);if(k===0){for(let n=0;n<5;n++)doc(xx+(n-2)*67,665+Math.sin(n*2+u*.4)*45,150,195,(n-2)*.085,['Reports','Interviews','Public data','Notes','Sources'][n],C.lime,ease(u-n*.12));}if(k===1){for(let n=0;n<3;n++){let y=583+n*85;circle(xx-130,y,11,C.coral);line(xx-105,y,xx+150,y,'#687e64',3);line(xx-105,y,xx-105+(120+n*32)*(i===3?ease(u+.5):ease(u-1)),y,C.coral,9);text(['Audience','Market','Approach'][n],xx-130,y+39,22,C.muted)}}if(k===2){for(let n=0;n<32;n++){let ax=xx-175+(n%8)*48,ay=560+Math.floor(n/8)*70;let p=i===3?ease(u/1.1):0;let yy=lerp(ay+Math.sin(n*13)*45,740-(n%8)*19-Math.floor(n/8)*12,p);circle(ax,yy,6+(n%3),n%4?C.lilac:C.lime)}if(i===3){for(let n=0;n<7;n++)line(xx-175+n*48,734-n*19,xx-127+n*48,715-n*19,C.lilac,3)}}});if(i===2){let p=ease((u-1)/.5);ctx.globalAlpha=p;text('One question. Multiple lines of inquiry.',645,875,30,C.muted);ctx.globalAlpha=1}else{text('Illustrative research workflow',86,886,20,C.muted)}}
if(i===4){let p=ease(u/1.3);nodes.slice(0,10).forEach((n,k)=>{let a=k*Math.PI/5;let x=lerp(1380+Math.cos(a)*440,1380,p),y=lerp(530+Math.sin(a)*330,530,p);line(x,y,1380,530,k%3===0?C.coral:C.line,2);doc(x,y,105,145,a*.08,'',k%3===0?C.coral:C.lime,1-p*.85)});brief(1380,550,.77+p*.23,.08*(1-p),1);if(u>1.2){let q=ease((u-1.2)/.7);ctx.globalAlpha=q;circle(1630,325,40,C.lime);text('✓',1604,342,47,'#18351f');ctx.globalAlpha=1}}
if(i===5){brief(1380,530,1.04,-.04+Math.sin(u*.4)*.012,1);let p=ease(u/.7);ctx.save();ctx.globalAlpha=p;ctx.fillStyle=C.lime;ctx.beginPath();ctx.roundRect(1135,835,490,66,12);ctx.fill();text('READY FOR YOUR REVIEW',1170,879,26,'#193723');ctx.restore();for(let k=0;k<4;k++){let a=k*Math.PI/2+.4;circle(1380+Math.cos(a)*370,540+Math.sin(a)*310,6,C.lime)}}}
draw(0);
</script></body></html>
