Air-quote pop

1<!doctype html>
2<html lang="en" data-composition-variables='[{"id":"variant","label":"Variant","type":"enum","default":"0","options":[{"value":"0","label":"Quoted word"},{"value":"1","label":"Strikethrough relabel"},{"value":"2","label":"Allegedly"}]},{"id":"theme","label":"Theme","type":"enum","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]'>
3<head><meta charset="UTF-8"><meta name="viewport" content="width=1920, height=1080"><link rel="stylesheet" href="assets/fonts/fonts.css"><script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script><script src="assets/kit/motion/motion.js"></script>
4<style>*{box-sizing:border-box;margin:0;padding:0}html,body{width:1920px;height:1080px;overflow:hidden;background:transparent}#root{position:relative;width:100%;height:100%;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}.aroll{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#overlay{position:absolute;inset:0;--surface:#fff;--ink:#0a0a0a;--muted:#626262;--line:rgba(0,0,0,.1);--shadow:0 1px 2px rgba(0,0,0,.1),0 10px 26px -12px rgba(0,0,0,.35)}#overlay[data-theme=dark]{--surface:#18181a;--ink:#fafafa;--muted:#b9b9bb;--line:rgba(255,255,255,.1);--shadow:0 1px 2px rgba(0,0,0,.25),0 8px 20px rgba(0,0,0,.22)}
5#quote{position:absolute;right:110px;top:470px;width:max-content;max-width:620px;padding:28px 32px;border-radius:22px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);opacity:0}.headline{position:relative;display:flex;align-items:center;gap:10px;white-space:nowrap}.qmark{display:block;font-size:64px;line-height:64px;font-weight:500;letter-spacing:-.05em;color:var(--muted)}#claim{position:relative;display:block;font-size:48px;line-height:64px;font-weight:600;letter-spacing:-.025em}#quote.single #claim{font-size:64px;line-height:72px}#quote.single{padding:22px 32px}#remark{display:block;font-size:30px;line-height:40px;font-weight:500;letter-spacing:-.02em;margin-top:10px;text-align:center;opacity:0}.strike{display:block;position:absolute;left:-3px;right:-3px;top:51%;height:3px;border-radius:2px;background:var(--ink);transform-origin:left center}#quote.allegedly #remark{font-style:italic;color:var(--muted)}
6#quote.replace #claim{font-size:40px}#quote.replace .qmark{font-size:46px}#quote.replace #remark{font-size:40px;line-height:48px;margin-top:6px}#remark-slot{height:0;overflow:hidden}#quote.allegedly .qmark{font-size:58px}#quote.allegedly #remark{font-size:33px;line-height:42px}
7</style></head>
8<body><div id="root" data-composition-id="main" data-start="0" data-duration="8" data-width="1920" data-height="1080"><video id="aroll" class="clip aroll" src="assets/still/aroll-left.mp4" muted playsinline data-start="0" data-duration="8" data-track-index="0"></video><div id="overlay" class="clip" data-start="0" data-duration="8" data-track-index="1"><div id="quote"><div class="headline"><span class="qmark" id="openquote">“</span><span id="claim"></span><span class="qmark" id="closequote">”</span></div><span id="remark"></span></div></div></div>
9<script>
10const CONFIG={duration:8,aroll:true,timing:{enter:.5,payoff:1.8,exit:7.25},variants:{'0':{kind:'single',claim:'AGI',remark:''},'1':{kind:'replace',claim:'up to 10× faster',remark:'on one benchmark'},'2':{kind:'allegedly',claim:'PhD-level',remark:'allegedly'}}};
11const vars=window.__hyperframes?.getVariables?.()||{},vi=['0','1','2'].includes(String(vars.variant))?String(vars.variant):'0',theme=vars.theme==='dark'?'dark':'light',V=CONFIG.variants[vi],$=s=>document.querySelector(s);$('#overlay').dataset.theme=theme;$('#quote').className=V.kind;$('#claim').textContent=V.claim;$('#remark').textContent=V.remark;if(!V.remark)$('#remark').remove();if(!CONFIG.aroll)$('#aroll').remove();
12if(vi==='1'){const strike=document.createElement('i');strike.className='strike';$('#claim').appendChild(strike);const slot=document.createElement('div');slot.id='remark-slot';$('#remark').before(slot);slot.appendChild($('#remark'));}
13document.fonts.ready.then(()=>{const K=KitMotion,tl=gsap.timeline({paused:true}),T=CONFIG.timing;K.fadeUp(tl,'#quote',T.enter,{distance:12,blur:0,duration:.32,ease:'inOut'});tl.fromTo('#quote',{scale:.97},{scale:1,duration:.32,ease:'power3.out',immediateRender:false},T.enter);
14tl.fromTo('#openquote',{x:-4,opacity:0},{x:0,opacity:1,duration:.18,ease:'power3.out',immediateRender:false},T.enter+.06);tl.fromTo('#closequote',{x:4,opacity:0},{x:0,opacity:1,duration:.18,ease:'power3.out',immediateRender:false},T.enter+.06);
15if(vi==='1'){// Adapted registry strikethrough-replace primitive: monochrome line, isolated old phrase, separate replacement row.
16tl.fromTo('.strike',{scaleX:0},{scaleX:1,duration:.28,ease:'power2.out',immediateRender:false},T.payoff);tl.to('#claim',{color:theme==='dark'?'#b9b9bb':'#626262',duration:.2},T.payoff+.28);// Expand only when correction begins: 122px claim-only plate to 176px payoff plate.
17K.cardResize(tl,'#remark-slot',T.payoff+.28,{height:54,duration:.22,ease:'inOut'});K.fadeUp(tl,'#remark',T.payoff+.28,{distance:0,blur:0,duration:.2});gsap.set('#remark-slot',{height:0});K.drive(tl,0,CONFIG.duration,p=>{const slot=$('#remark-slot');if(p*CONFIG.duration<T.payoff+.5)slot.setAttribute('data-layout-ignore','');else slot.removeAttribute('data-layout-ignore');});gsap.set('.strike',{scaleX:0});}
18if(vi==='2')K.fadeUp(tl,'#remark',T.payoff,{distance:10,blur:0,duration:.3});
19K.fadeOut(tl,'#quote',T.exit,{duration:.3});gsap.set('#quote',{opacity:0,y:12,scale:.97});gsap.set('#openquote',{x:-4,opacity:0});gsap.set('#closequote',{x:4,opacity:0});if($('#remark'))gsap.set('#remark',{opacity:0,y:vi==='1'?0:10});tl.set({}, {},CONFIG.duration);window.__timelines.main=tl;tl.seek(0);});
20</script></body></html>