git / moonbite-network / templates/film.html · raw
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><title>MoonBite — We have nothing to sell you.</title><meta name="description" content="MoonBite can't be bought, at any price, from anyone. You make it yourself with the computer you already have. No company, no presale, no premine."><link rel="icon" type="image/svg+xml" href="/static/moonbite-logo.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,400&family=Inter:wght@400;500;600;700&display=swap"><style nonce="{{ csp_nonce }}">:root{ --ink:#06070A; --gold:#D9A441; --gold-2:#EBCB86; --bone:#F4F1E9; --mist:#CFCABF; --ash:#8E8981; --faint:#5E5A53; --rule:rgba(244,241,233,.14); --rule-2:rgba(244,241,233,.07); --serif:'Newsreader',Georgia,serif; --display:'Instrument Serif',Georgia,serif; --ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--ink);color:var(--bone);font-family:var(--serif); line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--gold);color:var(--ink)}a{color:inherit}img{display:block;max-width:100%}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}/* ---------- masthead ---------- */header.mast{position:fixed;top:0;left:0;right:0;z-index:40; padding:16px clamp(20px,4vw,40px);display:flex;align-items:center;gap:16px; background:linear-gradient(180deg,rgba(6,7,10,.8),rgba(6,7,10,0))}.mark{display:flex;align-items:center;gap:10px;font-family:var(--display); font-size:1.22rem;letter-spacing:.02em;text-decoration:none}.mark img{width:23px;height:23px}.dateline{margin-left:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ash);display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;animation:pulse 2.4s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,164,65,.5)}70%{box-shadow:0 0 0 7px rgba(217,164,65,0)}100%{box-shadow:0 0 0 0 rgba(217,164,65,0)}}@media(max-width:560px){.dateline .hide{display:none}}/* ---------- the film ---------- */#film{position:relative;height:760vh}#stage{position:sticky;top:0;height:100svh;overflow:hidden}#scene{position:absolute;inset:0;width:100%;height:100%}.vig{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 50%,rgba(6,7,10,0) 42%,rgba(6,7,10,.86) 100%)}.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}/* acts */.act{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; padding:0 clamp(22px,6vw,90px);pointer-events:none;will-change:opacity,transform}.act .in{max-width:min(1000px,92vw);margin:0 auto;width:100%}.act.mid .in{text-align:center}.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}h1{font-family:var(--display);font-weight:400;font-size:clamp(3rem,10.5vw,7.6rem); line-height:.94;letter-spacing:-.02em;margin-top:20px;max-width:14ch}h1 em{font-style:italic;color:var(--gold)}.deck{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,4.4vw,2.6rem); line-height:1.36;color:var(--mist);max-width:22ch;margin:0 auto}.deck b{color:var(--bone);font-weight:400}.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%); font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase; color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:10px}.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--gold),transparent); animation:drop 2.2s ease-in-out infinite}@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}/* three facts */.facts{display:grid;gap:clamp(18px,3vw,34px)}@media(min-width:880px){.facts{grid-template-columns:repeat(3,1fr)}}.f .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--gold)}.f h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.6vw,2.15rem); line-height:1.1;margin:12px 0 9px}.f p{color:var(--mist);font-size:clamp(.95rem,1.7vw,1.05rem);line-height:1.55}.f p b{color:var(--bone);font-weight:500}/* quote */.quote{font-family:var(--display);font-weight:400;font-style:italic; font-size:clamp(1.9rem,6.2vw,4rem);line-height:1.12;letter-spacing:-.015em; max-width:16ch;margin:0 auto}.attr{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:var(--ash);margin-top:26px}/* steps */.slug{font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}.act h3.big{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,5.2vw,3rem); line-height:1.08;margin-top:14px;max-width:20ch}.steps{display:grid;gap:clamp(16px,2.6vw,30px);margin-top:clamp(26px,4vh,44px)}@media(min-width:880px){.steps{grid-template-columns:repeat(3,1fr)}}.st{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}.st .sn{font-family:var(--mono);font-size:.68rem;color:var(--gold)}.st h4{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.14}.st p{color:var(--mist);font-size:clamp(.9rem,1.6vw,1rem);line-height:1.5;margin-top:6px}/* final */.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px;justify-content:center}.btn{font-family:var(--ui);font-size:.97rem;font-weight:600;padding:15px 30px;border-radius:4px; text-decoration:none;border:1px solid transparent; transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}.btn-gold{color:var(--ink);background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px rgba(217,164,65,.28)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 44px rgba(217,164,65,.4)}.btn-line{color:var(--bone);border-color:var(--rule)}.btn-line:hover{border-color:rgba(217,164,65,.6);background:rgba(217,164,65,.06)}.proof{margin-top:26px;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em; text-transform:uppercase;color:var(--ash)}.proof b{color:var(--mist);font-weight:400}.fine{font-family:var(--ui);font-size:.84rem;color:var(--ash);margin:22px auto 0;max-width:52ch;line-height:1.6}.more{display:inline-block;margin-top:20px;font-family:var(--ui);font-size:.92rem;font-weight:600; color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.4);padding-bottom:3px}/* progress rail */#rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:35; display:flex;flex-direction:column;gap:9px}#rail span{width:5px;height:5px;border-radius:50%;background:rgba(244,241,233,.2);transition:background .3s,transform .3s}#rail span.on{background:var(--gold);transform:scale(1.5)}@media(max-width:720px){ #rail{right:9px} }/* footer after the film */footer{border-top:1px solid var(--rule);padding:52px 0 40px;position:relative;z-index:2;background:var(--ink)}.page{max-width:1080px;margin:0 auto;padding:0 clamp(22px,4vw,30px)}.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr;gap:26px}}.fgrid p{font-family:var(--ui);font-size:.86rem;color:var(--ash);max-width:32ch;margin-top:12px;line-height:1.56}.fcol h5{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:12px}.fcol a{display:block;font-family:var(--ui);font-size:.89rem;color:var(--mist);padding:6px 0;text-decoration:none}.fcol a:hover{color:var(--gold)}.fbase{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule-2);display:flex; justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.66rem;color:var(--faint)}/* ---------- flat fallback (reduced motion / no JS) ---------- */.flat #film{height:auto}.flat #stage{position:static;height:auto;overflow:visible}.flat #scene,.flat .vig,.flat .scrollcue,.flat #rail{display:none}.flat .act{position:static;inset:auto;opacity:1!important;transform:none!important; padding-top:12vh;padding-bottom:12vh;min-height:0}.flat .act+.act{border-top:1px solid var(--rule-2)}noscript .act{opacity:1}</style></head><body><header class="mast"> <a class="mark" href="/"><img src="/static/moonbite-logo.svg" alt=""><span>MoonBite</span></a> <div class="dateline"><span class="dot"></span><span class="hide">Block</span> <span class="mono" id="dBlock">—</span><span class="hide">· mining now</span></div></header><div id="rail" aria-hidden="true"> <span class="on"></span><span></span><span></span><span></span><span></span><span></span></div><section id="film"> <div id="stage"> <canvas id="scene"></canvas> <div class="vig"></div> <div class="grain"></div> <!-- ACT 1 --> <div class="act" data-a="0"> <div class="in"> <div class="kicker">A new kind of money · Est. {{ consensus.launch_year }}</div> <h1>We have <em>nothing</em> to sell you.</h1> </div> <div class="scrollcue">Scroll<i></i></div> </div> <!-- ACT 2 --> <div class="act mid" data-a="1"> <div class="in"> <p class="deck">MoonBite can't be bought — at any price, from anyone. <b>You make it yourself</b>, with the computer you already have.</p> </div> </div> <!-- ACT 3 --> <div class="act" data-a="2"> <div class="in facts"> <div class="f"><div class="n">01</div><h2>Nobody owns it.</h2> <p>No company, no investors, no founder's stack. If we vanished tonight it would keep running.</p></div> <div class="f"><div class="n">02</div><h2>{{ consensus.initial_subsidy_coins }} coins, every {{ consensus.block_time_min }} minutes.</h2> <p>Paid to whoever's computer did the work. <b>We take nothing</b> — not a fee, not a cut.</p></div> <div class="f"><div class="n">03</div><h2>It has no price.</h2> <p>Not listed anywhere, and it may never be worth a penny. <b>Anyone selling you MBITE is lying.</b></p></div> </div> </div> <!-- ACT 4 --> <div class="act mid" data-a="3"> <div class="in"> <p class="quote">The loudest thing about this new money is the fan on your laptop.</p> <div class="attr">So far, the only cost of entry</div> </div> </div> <!-- ACT 5 --> <div class="act" data-a="4"> <div class="in"> <div class="slug">How to begin</div> <h3 class="big">Four minutes, and it costs nothing.</h3> <div class="steps"> <div class="st"><div class="sn">01</div><div><h4>Make a wallet</h4> <p>Write your twelve words on paper. Don't rush this part.</p></div></div> <div class="st"><div class="sn">02</div><div><h4>Point the miner at it</h4> <p>Paste your address, press start. Your computer joins the network.</p></div></div> <div class="st"><div class="sn">03</div><div><h4>Leave it running</h4> <p>Win a block and {{ consensus.initial_subsidy_coins }} MBITE are yours. Nobody can take them.</p></div></div> </div> </div> </div> <!-- ACT 6 --> <div class="act mid" data-a="5"> <div class="in"> <h3 class="big" style="margin:0 auto;max-width:17ch">Half of every MoonBite that will ever exist is being mined right now.</h3> <div class="btns"> <a class="btn btn-gold" href="/start">Mine your first block</a> <a class="btn btn-line" href="/the-case">Why it works</a> </div> <div class="proof">No company · No presale · No premine · <b class="mono" id="pBlocks">—</b> blocks mined so far</div> <p class="fine">A word of caution, since nobody else in this industry offers one: mining uses electricity, which is a real cost, and MoonBite may never be worth anything. Treat it as an experiment you find interesting, not as a plan for your money.</p> <a class="more" href="/the-case">Read the full case, in eleven facts →</a> </div> </div> </div></section><footer> <div class="page"> <div class="fgrid"> <div> <a class="mark" href="/"><img src="/static/moonbite-logo.svg" alt=""><span>MoonBite</span></a> <p>Made, not sold. {{ consensus.initial_subsidy_coins }} MBITE every {{ consensus.block_time_min }} minutes, to whoever does the work.</p> </div> <div class="fcol"><h5>Begin</h5> <a href="/start">Mine</a><a href="/get-wallet">Wallet</a><a href="/how-it-works">How it works</a></div> <div class="fcol"><h5>Verify</h5> <a href="/explorer">Explorer</a><a href="/whitepaper">Whitepaper</a><a href="/full-node">Run a node</a></div> <div class="fcol"><h5>Understand</h5> <a href="/the-case">The case</a><a href="/scams">Avoid scams</a><a href="/support">Support</a></div> </div> <div class="fbase"> <span>© {{ consensus.launch_year }} MoonBite · no company, no owner</span> <span>You mine it, or it isn't yours.</span> </div> </div></footer><script nonce="{{ csp_nonce }}">(function(){ var $=function(i){return document.getElementById(i)}; /* honour the OS setting, but allow ?motion=1 to force the film on for review */ var force=/[?&]motion=1/.test(location.search); var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches && !force; var acts=[].slice.call(document.querySelectorAll('.act')); var dots=[].slice.call(document.querySelectorAll('#rail span')); var film=$('film'), stage=$('stage'), cv=$('scene'); /* ---- live chain (works in both modes) ---- */ function fmt(n){return (n||0).toLocaleString('en-US')} function poll(){ fetch('/api/blockchain/info').then(function(r){return r.json()}).then(function(j){ var h=j.height||j.blocks||0; $('dBlock').textContent=fmt(h); var pb=$('pBlocks'); if(pb) pb.textContent=fmt(h); }).catch(function(){}); } poll(); setInterval(poll,15000); if(reduce){ document.body.classList.add('flat'); return; } /* ---- easing helpers ---- */ function clamp(v,a,b){return v<a?a:(v>b?b:v)} function smooth(e0,e1,x){if(e1===e0)return x<e0?0:1;var t=clamp((x-e0)/(e1-e0),0,1);return t*t*(3-2*t)} function lerp(a,b,t){return a+(b-a)*t} /* ---- scroll progress, smoothed ---- */ var target=0, cur=0; function measure(){ var r=film.getBoundingClientRect(); var total=film.offsetHeight-stage.offsetHeight; target=clamp(-r.top/(total||1),0,1); } addEventListener('scroll',measure,{passive:true}); addEventListener('resize',function(){measure();resize()}); measure(); /* ---- act choreography: [fadeInStart, fullFrom, fullTo, fadeOutEnd] ---- */ var SEQ=[ [0.00,0.00,0.10,0.16], [0.17,0.22,0.30,0.36], [0.37,0.43,0.52,0.58], [0.59,0.64,0.71,0.76], [0.77,0.82,0.88,0.92], [0.93,0.97,1.00,1.01] ]; /* how much dark scrim each act needs behind it to stay readable */ var SCRIM=[0.16,0.34,0.60,0.58,0.62,0.66]; var ops=[0,0,0,0,0,0]; function computeOps(p){ for(var i=0;i<SEQ.length;i++){ var s=SEQ[i]; ops[i]=smooth(s[0],s[1],p)*(1-smooth(s[2],s[3],p)); } } function paintActs(p){ for(var i=0;i<acts.length;i++){ var s=SEQ[i], o=ops[i], el=acts[i]; el.style.opacity=o; el.style.transform='translateY('+((1-smooth(s[0],s[1],p))*38 - smooth(s[2],s[3],p)*38) +'px) scale('+lerp(.985,1,smooth(s[0],s[1],p))+')'; el.style.pointerEvents=(o>0.6?'auto':'none'); if(dots[i]) dots[i].classList.toggle('on', o>0.5); } } /* ---- the scene ---- */ var x=cv.getContext('2d'), W=0,H=0,DPR=1, stars=[], dust=[]; function resize(){ DPR=Math.min(devicePixelRatio||1,2); W=cv.width=Math.floor(innerWidth*DPR); H=cv.height=Math.floor(innerHeight*DPR); cv.style.width=innerWidth+'px'; cv.style.height=innerHeight+'px'; var n=Math.round(clamp(innerWidth*innerHeight/9000,90,260)); stars=[]; for(var i=0;i<n;i++) stars.push({ x:Math.random(), y:Math.random(), z:Math.random()*0.9+0.1, r:Math.random()*1.25+0.25, t:Math.random()*6.283 }); dust=[]; for(var j=0;j<44;j++) dust.push({a:Math.random()*6.283, d:Math.random()*0.55+0.45, s:Math.random()*0.5+0.5, r:Math.random()*1.5+0.6}); } resize(); /* keyframed camera: the moon is placed so it never sits under dense copy. [progress, centreX (0-1 of W), centreY (0-1 of H), radius (fraction of min side)] */ var CAM=[ [0.00, 0.78, 0.28, 0.030], [0.12, 0.75, 0.32, 0.062], [0.24, 0.68, 0.44, 0.150], [0.36, 0.82, 0.56, 0.300], [0.47, 0.94, 0.66, 0.430], [0.58, 0.55, 0.50, 0.800], [0.68, 0.50, 0.50, 0.960], [0.80, 0.06, 0.88, 0.260], [0.88, 0.10, 0.92, 0.240], [0.94, 0.50, 0.54, 0.260], [1.00, 0.50, 0.50, 0.300] ]; function camAt(p){ var i=0; while(i<CAM.length-2 && p>CAM[i+1][0]) i++; var a=CAM[i], b=CAM[i+1]; var t=smooth(a[0],b[0],p); var m=Math.min(W,H); return {x:W*lerp(a[1],b[1],t), y:H*lerp(a[2],b[2],t), r:m*lerp(a[3],b[3],t)}; } function drawMoon(cx,cy,R,rot,dim){ var g=x.createRadialGradient(cx-R*0.36,cy-R*0.42,R*0.05,cx,cy,R*1.06); g.addColorStop(0,'#F6E3B4'); g.addColorStop(.42,'#D9A441'); g.addColorStop(.84,'#8A6524'); g.addColorStop(1,'#2E220C'); x.beginPath(); x.arc(cx,cy,R,0,6.283); x.fillStyle=g; x.fill(); var cr=[[.30,-.26,.15],[-.30,.16,.20],[.12,.36,.11],[-.13,-.36,.09], [.40,.13,.08],[-.44,-.08,.07],[.02,-.10,.13],[.22,.08,.06]]; for(var i=0;i<cr.length;i++){ var a=rot*(0.35+i*0.03), ox=cr[i][0], oy=cr[i][1]; var rx=ox*Math.cos(a)-oy*Math.sin(a), ry=ox*Math.sin(a)+oy*Math.cos(a); x.beginPath(); x.arc(cx+rx*R, cy+ry*R, cr[i][2]*R, 0, 6.283); x.fillStyle='rgba(46,34,12,0.26)'; x.fill(); } var t=x.createLinearGradient(cx-R,cy-R,cx+R,cy+R); t.addColorStop(0,'rgba(255,255,255,0.10)'); t.addColorStop(.5,'rgba(0,0,0,0)'); t.addColorStop(1,'rgba(4,4,6,0.55)'); x.beginPath(); x.arc(cx,cy,R,0,6.283); x.fillStyle=t; x.fill(); x.beginPath(); x.arc(cx,cy,R,0,6.283); x.strokeStyle='rgba(244,241,233,0.16)'; x.lineWidth=Math.max(1,R*0.006); x.stroke(); var hg=x.createRadialGradient(cx,cy,R*0.96,cx,cy,R*1.9); hg.addColorStop(0,'rgba(217,164,65,'+(0.16*(1-dim*0.6))+')'); hg.addColorStop(1,'rgba(217,164,65,0)'); x.beginPath(); x.arc(cx,cy,R*1.9,0,6.283); x.fillStyle=hg; x.fill(); } var rot=0, last=performance.now(); function render(p){ x.clearRect(0,0,W,H); var neb=x.createRadialGradient(W*0.5,H*0.46,0,W*0.5,H*0.46,Math.max(W,H)*0.72); var warm=smooth(0.15,0.55,p)*(1-smooth(0.80,1,p)); neb.addColorStop(0,'rgba('+Math.round(28+40*warm)+','+Math.round(24+26*warm)+','+Math.round(38+8*warm)+',0.55)'); neb.addColorStop(1,'rgba(6,7,10,0)'); x.fillStyle=neb; x.fillRect(0,0,W,H); var warp=smooth(0.10,0.30,p)*(1-smooth(0.34,0.46,p)); for(var i=0;i<stars.length;i++){ var s=stars[i]; s.t+=0.012; var sx=s.x*W, sy=((s.y - p*0.55*s.z)%1+1)%1*H; var tw=0.30+0.34*Math.sin(s.t); var al=tw*s.z; if(warp>0.02){ var len=warp*s.z*150*DPR; var dx=(sx-W/2)/(W/2), dy=(sy-H/2)/(H/2); x.beginPath(); x.moveTo(sx,sy); x.lineTo(sx+dx*len, sy+dy*len); x.strokeStyle='rgba(236,230,214,'+al*0.85+')'; x.lineWidth=s.r*DPR*0.8; x.stroke(); } else { x.beginPath(); x.arc(sx,sy,s.r*DPR,0,6.283); x.fillStyle='rgba(236,230,214,'+al+')'; x.fill(); } } /* how dark the frame needs to be for this act's copy */ var dim=0; for(var q=0;q<ops.length;q++) dim=Math.max(dim, ops[q]*SCRIM[q]); var M=camAt(p); drawMoon(M.x,M.y,M.r,rot,dim); var motes=smooth(0.74,0.86,p); if(motes>0.01){ for(var k=0;k<dust.length;k++){ var d=dust[k], ang=d.a + rot*d.s*2.2; var rr=M.r*(1.35+d.d*0.9); var mx=M.x+Math.cos(ang)*rr, my=M.y+Math.sin(ang)*rr*0.42; x.beginPath(); x.arc(mx,my,d.r*DPR*0.8,0,6.283); x.fillStyle='rgba(217,164,65,'+(motes*0.5*d.s)+')'; x.fill(); } } /* scrim: flat wash + a soft pool behind the copy, so type always reads */ if(dim>0.01){ x.fillStyle='rgba(6,7,10,'+(dim*0.72)+')'; x.fillRect(0,0,W,H); var pool=x.createRadialGradient(W*0.5,H*0.5,0,W*0.5,H*0.5,Math.max(W,H)*0.55); pool.addColorStop(0,'rgba(6,7,10,'+(dim*0.42)+')'); pool.addColorStop(1,'rgba(6,7,10,0)'); x.fillStyle=pool; x.fillRect(0,0,W,H); } } function frame(now){ var dt=Math.min(64,now-last); last=now; cur += (target-cur)*0.085; rot += dt*0.00018; computeOps(cur); render(cur); paintActs(cur); requestAnimationFrame(frame); } requestAnimationFrame(frame); computeOps(0); paintActs(0); if(force){ window.__p=function(v){ target=cur=v; computeOps(v); render(v); paintActs(v); return v; }; }})();</script><noscript><style>.act{position:static!important;opacity:1!important;padding:10vh 0}#film{height:auto}#stage{position:static;height:auto}#scene,.vig{display:none}</style></noscript></body></html>