<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Novaspace — Micrographics Spec Plate</title> <meta name="description" content="A micrographics spec plate for Novaspace, a space-exploration company — striped monogram, flowing arrows, an equalizer glyph and interactive badges." /> <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin /> <style> @font-face{ font-family:'Geist Pixel Circle'; src:url('https://cdn.jsdelivr.net/npm/geist@1.7.0/dist/fonts/geist-pixel/GeistPixel-Circle.woff2') format('woff2'); font-weight:100 900; font-display:swap; } *{margin:0;padding:0;box-sizing:border-box} :root{ --red:#f5310f; --paper:#ecebe8; --ink:var(--red); } /* light (default) */ body.dark{ --red:#ff4a2b; --paper:#0d0d0f; } /* dark */ html,body{height:100%} body{ background:var(--paper); color:var(--ink); font-family:'Geist Pixel Circle',ui-monospace,monospace; display:flex; align-items:center; justify-content:center; min-height:100vh; overflow:hidden; position:relative; -webkit-font-smoothing:antialiased; } /* film grain */ .grain{position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} body.dark .grain{mix-blend-mode:screen; opacity:.08} /* theme toggle */ .theme{position:fixed; top:16px; right:16px; z-index:6; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; color:var(--red); background:transparent; border:2px solid var(--red); border-radius:6px; transition:transform .15s, background .2s, color .2s} .theme:hover{background:var(--red); color:var(--paper)} .theme:active{transform:scale(.9)} .theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .plate{position:relative; width:min(88vw,376px); z-index:2; will-change:transform} /* striped monogram */ .mark{display:block; width:56%; margin:0 auto 10px; cursor:pointer; transition:transform .3s cubic-bezier(.22,1,.36,1)} .mark:active{transform:scale(.97)} .mark .scan{opacity:0} .mark:hover .scan{animation:scan .7s ease} @keyframes scan{0%{opacity:.9;transform:translateY(-100%)}100%{opacity:0;transform:translateY(160%)}} .dept{text-align:center; font-weight:700; font-size:clamp(12px,3.5vw,17px); letter-spacing:.01em; margin-bottom:11px; white-space:nowrap} .dept .cur{opacity:0; animation:blink 1s steps(1) infinite; animation-delay:1.4s} @keyframes blink{50%{opacity:1}} hr{border:0; height:2px; background:var(--red); margin:10px 0; transform:scaleX(0); transform-origin:left; animation:draw .6s cubic-bezier(.22,1,.36,1) forwards} hr.b{animation-delay:.12s} /* meta grid */ .meta{position:relative; display:grid; grid-template-columns:1fr auto; gap:1px 14px; font-size:clamp(11px,3vw,14px); font-weight:700; letter-spacing:.01em; line-height:1.4} .meta .l div,.meta .r div{white-space:nowrap} .meta .r{text-align:right} /* left column rolls like a terminal feed: top line slides out, next rises in */ .meta .l{height:4.2em; overflow:hidden} .meta .feed{animation:roll 3s linear infinite} .meta .feed>div{height:1.4em; line-height:1.4em} @keyframes roll{ 0% {transform:translateY(0)} 8.33% {transform:translateY(-1.4em)} 33.33% {transform:translateY(-1.4em)} 41.66% {transform:translateY(-2.8em)} 66.66% {transform:translateY(-2.8em)} 75% {transform:translateY(-4.2em)} 100% {transform:translateY(-4.2em)} } .cc{display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; border:2px solid var(--red); border-radius:3px; font-size:.62em; vertical-align:.12em; margin-right:.35em} .chev{letter-spacing:.05em; margin-left:.4em} .chev i{font-style:normal; animation:chev 1.1s ease-in-out infinite} .chev i:nth-child(2){animation-delay:.14s} .chev i:nth-child(3){animation-delay:.28s} @keyframes chev{0%,100%{opacity:.3}50%{opacity:1}} /* equalizer glyph */ .eq{position:absolute; top:0; right:0; display:flex; align-items:flex-end; gap:2px; height:1.5em; cursor:pointer} .eq b{width:4px; background:var(--red); transform-origin:bottom; transform:scaleY(.15); animation:grow .5s cubic-bezier(.22,1,.36,1) forwards} .eq b:nth-child(1){--h:.45; animation-delay:.2s} .eq b:nth-child(2){--h:.7; animation-delay:.3s} .eq b:nth-child(3){--h:1; animation-delay:.4s} .eq b:nth-child(4){--h:.6; animation-delay:.5s} @keyframes grow{to{transform:scaleY(var(--h))}} .eq.live b{animation:bounce .9s ease-in-out infinite} .eq.live b:nth-child(2){animation-delay:.1s} .eq.live b:nth-child(3){animation-delay:.2s} .eq.live b:nth-child(4){animation-delay:.3s} @keyframes bounce{0%,100%{transform:scaleY(var(--h))}50%{transform:scaleY(1)}} /* badges */ .badges{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px} .checker{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:0; width:66px; aspect-ratio:6/3; cursor:pointer} .checker i{background:transparent} .checker i.on{background:var(--red)} .code{display:block; height:1.7em; cursor:pointer} .code:hover{animation:jitter .3s steps(2) 2} @keyframes jitter{50%{transform:translate(1px,-1px)}} @keyframes draw{to{transform:scaleX(1)}} @keyframes cellIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} /* invert the whole board every other second (the hover look, on a loop) */ @keyframes flipOn{ 0%,50%{background:var(--red)} 50.01%,100%{background:transparent} } @keyframes flipOff{ 0%,50%{background:transparent} 50.01%,100%{background:var(--red)} } /* scanline sweep over the whole plate */ .sweep{position:absolute; left:-4%; right:-4%; height:2px; background:var(--red); opacity:0; z-index:4; pointer-events:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important} .plate,.mark{transform:none!important} .eq b{transform:scaleY(var(--h,.6))} hr{transform:none} .dept .cur{opacity:1} } </style> </head> <body> <div class="grain"></div> <button class="theme" id="theme" type="button" aria-label="Toggle theme"></button> <div class="plate" id="plate"> <div class="sweep" id="sweep"></div>  <svg class="mark" viewBox="0 0 320 150" id="mark" aria-label="Novaspace"> <defs> <linearGradient id="scanG" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="var(--red)" stop-opacity="0"/> <stop offset="1" stop-color="var(--red)" stop-opacity=".55"/> </linearGradient> </defs> <text x="160" y="122" text-anchor="middle" font-family="'Geist Pixel Circle',monospace" font-weight="700" font-size="138" letter-spacing="6" fill="var(--red)">NS</text> <rect class="scan" x="0" y="0" width="320" height="36" fill="url(#scanG)"/> </svg> <div class="dept">NOVASPACE FLIGHT DIVISION<span class="cur">_</span></div> <hr /> <div class="meta"> <div class="l"> <div class="feed"> <div>ADVANCED</div> <div>PROPULSION</div> <div>SYSTEMS <span class="chev"><i>></i><i>></i><i>></i></span></div> <div aria-hidden="true">ADVANCED</div> <div aria-hidden="true">PROPULSION</div> <div aria-hidden="true">SYSTEMS <span class="chev"><i>></i><i>></i><i>></i></span></div> </div> </div> <div class="r"> <div><span class="cc">C</span>2025</div> <div>/</div> <div>DIV. 9</div> </div> <div class="eq" id="eq" title="systems nominal"><b></b><b></b><b></b><b></b></div> </div> <hr class="b" /> <div class="badges"> <div class="checker" aria-hidden="true"></div> <svg class="code" id="code" viewBox="0 0 150 40" aria-label="N-01"> <text x="75" y="31" text-anchor="middle" font-family="'Geist Pixel Circle',monospace" font-weight="700" font-size="34" letter-spacing="1" fill="var(--red)">N-01</text> </svg> <div class="checker" aria-hidden="true"></div> </div> </div> <script> (function(){ var RM = matchMedia('(prefers-reduced-motion: reduce)').matches; // checkerboards: 6x3, classic alternating. Staggered fade-in, then the whole // board inverts every second and back the next — a marching-pixel loop. Array.prototype.forEach.call(document.querySelectorAll('.checker'), function(checker){ for (var r=0;r<3;r++) for (var c=0;c<6;c++){ var cell = document.createElement('i'); var on = (r+c)%2===0; if (on) cell.className='on'; cell.style.animation = 'cellIn .5s ease both '+(0.3+(r+c)*0.05)+'s, '+(on?'flipOn':'flipOff')+' 2s linear infinite'; checker.appendChild(cell); } }); // equalizer: hover makes the bars dance var eq = document.getElementById('eq'); eq.addEventListener('pointerenter', function(){ eq.classList.add('live'); }); eq.addEventListener('pointerleave', function(){ eq.classList.remove('live'); }); // subtle pointer parallax on the plate var plate = document.getElementById('plate'); if (!RM) window.addEventListener('pointermove', function(e){ var dx = (e.clientX/innerWidth - .5), dy = (e.clientY/innerHeight - .5); plate.style.transform = 'translate('+(dx*10).toFixed(1)+'px,'+(dy*10).toFixed(1)+'px)'; }); // periodic scanline sweep down the plate var sweep = document.getElementById('sweep'); function doSweep(){ if (RM) return; var h = plate.offsetHeight, start = performance.now(), dur = 900; (function step(now){ var t = Math.min(1,(now-start)/dur); sweep.style.top = (t*h)+'px'; sweep.style.opacity = (t<0.5? t*2 : (1-t)*2)*0.5; if (t<1) requestAnimationFrame(step); else sweep.style.opacity=0; })(start); } if (!RM) setInterval(doSweep, 4200); // theme toggle var SUN='<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg>'; var MOON='<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>'; var themeBtn = document.getElementById('theme'); function paintTheme(){ themeBtn.innerHTML = document.body.classList.contains('dark') ? SUN : MOON; } themeBtn.addEventListener('click', function(){ document.body.classList.toggle('dark'); paintTheme(); }); paintTheme(); })(); </script> </body> </html>

Code & assets

Design System