git / moonbite-network / templates/cinema.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 — Go and find one</title><meta name="description" content="Proof of work is a search. Almost every guess is wrong. MoonBite is what happens when one is right — a fair-launch coin nobody was given."><link rel="icon" type="image/svg+xml" href="/static/moonbite-logo.svg"><link rel="stylesheet" href="/static/fonts/moonbite-fonts.css"><link rel="preload" as="image" href="/static/img/hero-moon.webp" imagesrcset="/static/img/hero-moon-sm.webp 1200w, /static/img/hero-moon.webp 2200w" imagesizes="100vw"><style nonce="{{ csp_nonce }}">:root{ --void:#0B0D12; --bone:#F5F2EA; --ash:#8A8580; --gold:#D9A441; --gold-2:#EBCB86; --display:'Archivo Black','Helvetica Neue','Arial Black',sans-serif; --ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --ease:cubic-bezier(0.22,1,0.36,1); --d1:120ms; --d2:240ms; --d3:600ms;}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--void);color:var(--bone);font-family:var(--ui); overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--gold);color:var(--void)}a{color:inherit}img{display:block}:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--void); padding:12px 18px;z-index:200;font-weight:700}.skip:focus{left:0;top:0}/* ── the film ─────────────────────────────────────────────────────────── */#film{position:relative;height:700vh}#stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--void)}#stars{position:absolute;inset:0;width:100%;height:100%}/* the plate drifts; only transform is animated */#plate{position:absolute;inset:-6% -4%;will-change:transform}#plate img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}/* warm bloom that swells when a guess lands */.bloom{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen; background:radial-gradient(58% 26% at 46% 74%,rgba(217,164,65,.42),rgba(217,164,65,0) 72%)}.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:#FFF3DA; mix-blend-mode:screen}.vig{position:absolute;inset:0;pointer-events:none; background:radial-gradient(125% 92% at 50% 46%,transparent 42%,rgba(6,7,10,.80) 100%)}.sky{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,13,18,.86) 0%,rgba(11,13,18,.30) 38%,rgba(11,13,18,0) 62%)}/* ── masthead ─────────────────────────────────────────────────────────── */.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:14px; padding:16px clamp(18px,4vw,40px); background:linear-gradient(180deg,rgba(11,13,18,.7),transparent)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px; font-family:var(--display);font-size:1rem;text-transform:uppercase;letter-spacing:-.02em}.brand svg{width:24px;height:24px;flex:none}.beat{margin-left:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ash);display:flex;align-items:center;gap:8px;min-height:44px}.beat i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}/* ── acts ─────────────────────────────────────────────────────────────── */.act{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; padding:0 clamp(20px,7vw,96px);pointer-events:none;will-change:opacity,transform}.act::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,rgba(11,13,18,.88) 0%,rgba(11,13,18,.60) 40%, rgba(11,13,18,.10) 66%,rgba(11,13,18,0) 80%)}.act .in{max-width:min(880px,92vw);width:100%;position:relative}.act h1,.act h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em; line-height:.98;font-size:clamp(2.1rem,7vw,5.2rem);max-width:14ch}.act .sm{font-family:var(--ui);font-weight:600;color:rgba(245,242,234,.72); font-size:clamp(.98rem,1.9vw,1.16rem);margin-top:20px;max-width:38ch;line-height:1.55}.act .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase; color:var(--gold);margin-bottom:18px}.gold{color:var(--gold)}.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;pointer-events:auto}.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 28px;border-radius:5px; font-weight:700;font-size:.99rem;text-decoration:none;border:1px solid transparent; transition:transform var(--d1) var(--ease),background var(--d2) var(--ease), border-color var(--d2) var(--ease)}.btn-a{background:var(--gold);color:var(--void)}.btn-a:hover{transform:translateY(-2px);background:var(--gold-2)}.btn-b{border-color:rgba(245,242,234,.28);color:var(--bone)}.btn-b:hover{border-color:var(--gold);background:rgba(217,164,65,.08)}.fine{font-family:var(--ui);font-size:.83rem;color:var(--ash);margin-top:22px; max-width:46ch;line-height:1.6}.facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px; font-family:var(--mono);font-size:.7rem;color:rgba(245,242,234,.6)}.facts span{border:1px solid rgba(245,242,234,.16);border-radius:100px;padding:7px 13px}/* the guesses */.ticker{position:absolute;left:0;right:0;bottom:7vh;text-align:center;pointer-events:none; font-family:var(--mono);font-size:clamp(.58rem,1.4vw,.76rem); color:rgba(245,242,234,.30);letter-spacing:.06em;white-space:nowrap;overflow:hidden}.ticker b{color:var(--gold);font-weight:400}.cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%); font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase; color:rgba(245,242,234,.4);display:flex;flex-direction:column;align-items:center;gap:8px}.cue i{width:1px;height:26px;background:linear-gradient(180deg,var(--gold),transparent); animation:dr 2.2s ease-in-out infinite}@keyframes dr{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}#rail{position:fixed;right:14px;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(245,242,234,.22); transition:background var(--d2) var(--ease),transform var(--d2) var(--ease)}#rail span.on{background:var(--gold);transform:scale(1.6)}@media(max-width:700px){ #rail{right:8px} }/* ── footer ───────────────────────────────────────────────────────────── */footer{position:relative;z-index:2;background:var(--void); border-top:1px solid rgba(245,242,234,.12);padding:48px 0 40px}.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,28px)}.fg{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:32px}@media(max-width:820px){.fg{grid-template-columns:1fr 1fr;gap:26px}}.fg p{color:var(--ash);font-size:.88rem;margin-top:12px;max-width:32ch;line-height:1.6}.fcol h3{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ash);margin-bottom:12px}.fcol a{display:block;color:var(--ash);font-size:.9rem;padding:7px 0;text-decoration:none; min-height:34px;transition:color var(--d2) var(--ease)}.fcol a:hover{color:var(--gold)}.credit{margin-top:40px;padding-top:20px;border-top:1px solid rgba(245,242,234,.06); font-family:var(--mono);font-size:.68rem;color:var(--ash);line-height:1.9}.credit a{color:var(--ash)}/* ── fallback: reduced motion / no images ─────────────────────────────── */.flat #film{height:auto}.flat #stage{position:static;height:auto;overflow:visible}.flat #stars,.flat .cue,.flat #rail,.flat .ticker,.flat .bloom,.flat .flash{display:none}.flat #plate{position:relative;inset:auto;height:52vh;transform:none!important}.flat .act::before{display:none}.flat .act{position:static;opacity:1!important;transform:none!important; padding-top:11vh;padding-bottom:11vh}.flat .act+.act{border-top:1px solid rgba(245,242,234,.07)}@media(prefers-reduced-motion:reduce){ .cue i{animation:none} }</style></head><body><a class="skip" href="#end">Skip to the point</a><header class="top"> <a class="brand" href="/"> <svg viewBox="-150 -150 300 300" aria-hidden="true"> <mask id="nb"><rect x="-150" y="-150" width="300" height="300" fill="#fff"/> <circle id="biteHole" cx="67.18" cy="-67.18" r="62" fill="#000"/></mask> <circle cx="0" cy="0" r="100" fill="#F5F2EA" mask="url(#nb)"/> </svg> <span>MoonBite</span> </a> <div class="beat"><i aria-hidden="true"></i>Block <span id="beatH">—</span></div></header><div id="rail" aria-hidden="true"> <span class="on"></span><span></span><span></span><span></span><span></span></div><section id="film"> <div id="stage"> <canvas id="stars" aria-hidden="true"></canvas> <div id="plate"> <img src="/static/img/hero-moon.webp" srcset="/static/img/hero-moon-sm.webp 1200w, /static/img/hero-moon.webp 2200w" sizes="100vw" width="2200" height="1776" fetchpriority="high" alt="The lunar surface photographed from orbit by Apollo 17, the craters Eratosthenes and Copernicus below a black sky."> </div> <div class="sky" aria-hidden="true"></div> <div class="bloom" id="bloom" aria-hidden="true"></div> <div class="flash" id="flash" aria-hidden="true"></div> <div class="vig" aria-hidden="true"></div> <div class="act" data-a="0"> <div class="in"> <div class="tag">Proof of work</div> <h1>Somewhere a machine is guessing.</h1> <p class="sm">Right now, without stopping, and without being told what to look for.</p> </div> <div class="cue">Scroll<i></i></div> </div> <div class="act" data-a="1"> <div class="in"> <h2>Almost every guess is <span class="gold">wrong</span>.</h2> <p class="sm">Billions of them, thrown away. That is not a flaw in the design — it is the design.</p> </div> </div> <div class="act" data-a="2"> <div class="in"> <h2>This one wasn't.</h2> <p class="sm">A number small enough, found by nobody in particular, and worth ten MBITE to whoever's machine found it.</p> </div> </div> <div class="act" data-a="3"> <div class="in"> <h2>Nobody was <span class="gold">given</span> one.</h2> <p class="sm">The supply began at nothing. Every unit of it since has arrived exactly this way, in public, one block at a time.</p> <div class="facts"> <span>No premine</span><span>No presale</span><span>No allocation</span> <span id="fBlocks">— blocks</span> </div> </div> </div> <div class="act" data-a="4" id="end"> <div class="in"> <div class="tag">Fair launch</div> <h2>Go and find one.</h2> <div class="btns"> <a class="btn btn-a" href="/start">Start mining</a> <a class="btn btn-b" href="/a">Read how it works</a> </div> <p class="fine">MBITE is on no exchange and has no price. Nobody can sell you one, and anyone offering to is lying. Mining costs electricity, and it may never be worth anything.</p> </div> </div> <div class="ticker" id="ticker" aria-hidden="true"></div> </div></section><footer> <div class="wrap"> <div class="fg"> <div> <a class="brand" href="/"> <svg viewBox="-150 -150 300 300" aria-hidden="true"> <mask id="fb"><rect x="-150" y="-150" width="300" height="300" fill="#fff"/> <circle cx="67.18" cy="-67.18" r="62" fill="#000"/></mask> <circle cx="0" cy="0" r="100" fill="#F5F2EA" mask="url(#fb)"/> </svg><span>MoonBite</span> </a> <p>Ten MBITE every two minutes, to whoever does the work.</p> </div> <div class="fcol"><h3>Start</h3> <a href="/start">Mine</a><a href="/get-wallet">Wallet</a><a href="/a">How it works</a></div> <div class="fcol"><h3>Verify</h3> <a href="/explorer">Explorer</a><a href="/api/consensus">Consensus</a><a href="/full-node">Run a node</a></div> <div class="fcol"><h3>Read</h3> <a href="/the-case">The case</a><a href="/governance">Decisions</a><a href="/scams">Avoid scams</a></div> </div> <p class="credit"> Photograph: NASA / Apollo 17 (AS17-145-22285), the craters Eratosthenes and Copernicus from lunar orbit, 13 December 1972. Colour-graded by MoonBite. NASA does not endorse MoonBite.<br> Chain tip <span id="fTip">—</span> </p> </div></footer><script nonce="{{ csp_nonce }}">(function(){var $=function(i){return document.getElementById(i)};var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches && !/[?&]motion=1/.test(location.search);var film=$('film'), stage=$('stage'), plate=$('plate'), body=document.body;var acts=[].slice.call(document.querySelectorAll('.act'));var dots=[].slice.call(document.querySelectorAll('#rail span'));/* a scroll-driven film must always start at frame one */if('scrollRestoration' in history) history.scrollRestoration='manual';function clamp(v,a,b){return v<a?a:(v>b?b:v)}function smooth(a,b,x){if(b===a)return x<a?0:1;var t=clamp((x-a)/(b-a),0,1);return t*t*(3-2*t)}function lerp(a,b,t){return a+(b-a)*t}function fmt(n){return (n||0).toLocaleString('en-US')}/* ── live chain ───────────────────────────────────────────────────────── */var height=0, pulseUntil=0;function poll(){ fetch('/api/blockchain/info').then(function(r){return r.json()}).then(function(j){ var h=j.height||j.blocks||0; if(height>0 && h>height){ pulseUntil=performance.now()+900; biteDeepen(); } height=h; $('beatH').textContent=fmt(h); $('fBlocks').textContent=fmt(h)+' blocks'; if(j.tip_hash) $('fTip').textContent=j.tip_hash; }).catch(function(){});}poll(); setInterval(poll,15000);/* signature: the bite deepens one increment when a block is found */var hole=$('biteHole'), bstep=0;function biteDeepen(){ if(!hole||reduce) return; bstep=(bstep+1)%3; hole.setAttribute('r',62+6+bstep*1.4); setTimeout(function(){ hole.setAttribute('r',62+bstep*1.4) },600);}/* ── acts ─────────────────────────────────────────────────────────────── */var SEQ=[[0.00,0.00,0.13,0.20],[0.22,0.28,0.38,0.45],[0.47,0.52,0.60,0.66], [0.68,0.73,0.82,0.88],[0.90,0.95,1.00,1.01]];function paintActs(p){ for(var i=0;i<acts.length;i++){ var q=SEQ[i], o=smooth(q[0],q[1],p)*(1-smooth(q[2],q[3],p)); acts[i].style.opacity=o; acts[i].style.transform='translate3d(0,'+ ((1-smooth(q[0],q[1],p))*30-smooth(q[2],q[3],p)*30)+'px,0)'; acts[i].style.pointerEvents=o>0.6?'auto':'none'; if(dots[i]) dots[i].classList.toggle('on',o>0.5); }}/* ── the drift: we descend toward the surface, then pull back out ─────── */var bloom=$('bloom'), flash=$('flash');function paintScene(p){ /* plate: sinks and grows as we come down, eases back out for the finale */ var descend=smooth(0.00,0.62,p); var pull=smooth(0.72,1.00,p); var scale=lerp(1.00,1.20,descend)-0.10*pull; var y=lerp(0,7.5,descend)-4.0*pull; /* percent of stage height */ plate.style.transform='translate3d(0,'+y+'%,0) scale('+scale.toFixed(4)+')'; /* the winning guess: a bloom along the limb and a short flash */ var hit=smooth(0.455,0.50,p)*(1-smooth(0.53,0.63,p)); var live=pulseUntil>performance.now()?0.40:0; bloom.style.opacity=Math.max(hit*0.62,live).toFixed(3); flash.style.opacity=(hit*0.10).toFixed(3);}/* ── the guesses, as text ─────────────────────────────────────────────── */var tick=$('ticker'), HEX='0123456789abcdef', tk=0;function hash(lead){ var s=''; for(var i=0;i<lead;i++) s+='0'; for(var j=lead;j<40;j++) s+=HEX[(Math.random()*16)|0]; return s;}/* ── stars ────────────────────────────────────────────────────────────── */var cv=$('stars'), sx=cv.getContext('2d'), SW,SH,DPR,st=[];function sizeStars(){ DPR=Math.min(devicePixelRatio||1,2); SW=cv.width=Math.floor(innerWidth*DPR); SH=cv.height=Math.floor(innerHeight*DPR); cv.style.width=innerWidth+'px'; cv.style.height=innerHeight+'px'; st=[]; var n=Math.round(clamp(innerWidth*innerHeight/16000,40,120)); for(var i=0;i<n;i++) st.push({x:Math.random()*SW,y:Math.random()*SH*0.62, r:(Math.random()*1.1+0.2)*DPR,z:Math.random()*0.8+0.2,t:Math.random()*6.28});}function drawStars(){ sx.clearRect(0,0,SW,SH); for(var i=0;i<st.length;i++){ var s=st[i]; s.t+=0.011; sx.beginPath(); sx.arc(s.x,s.y,s.r,0,6.283); sx.fillStyle='rgba(236,230,214,'+((0.22+0.30*Math.sin(s.t))*s.z)+')'; sx.fill(); }}/* ── run ──────────────────────────────────────────────────────────────── */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);}function frame(){ cur+=(target-cur)*0.085; paintScene(cur); paintActs(cur); drawStars(); tk++; if(tk%3===0 && cur>0.20 && cur<0.66){ var win=cur>0.455&&cur<0.53; tick.innerHTML = win ? '<b>0000000'+hash(0).slice(7)+' ← found</b>' : hash(0); } else if(cur<=0.20||cur>=0.66){ tick.innerHTML=''; } requestAnimationFrame(frame);}addEventListener('scroll',measure,{passive:true});addEventListener('resize',function(){ sizeStars(); measure() });if(reduce){ body.classList.add('flat'); paintActs(0); }else { scrollTo(0,0); sizeStars(); measure(); cur=target=0; paintScene(0); paintActs(0); requestAnimationFrame(frame);}window.__p=function(v){ target=cur=v; paintScene(v); paintActs(v); return v };})();</script></body></html>