<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pinwheel — Hero Banner</title> <meta name="description" content="A product hero banner with an interactive dithered pixel-pinwheel that spins, reacts to your cursor, and ripples on click." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet" /> <style> *{margin:0;padding:0;box-sizing:border-box} :root{ /* dark (default) */ --bg:#141220; --card:#1b1826; --line:rgba(255,255,255,.09); --ink:#f2f0f7; --muted:#a29fb2; --acc:#b5f23f; --acc-ink:#14160a; --pixel:#b5f23f; --btn2:rgba(255,255,255,.06); --btn2-line:rgba(255,255,255,.14); } body.light{ --bg:#eeecf3; --card:#ffffff; --line:rgba(20,16,40,.10); --ink:#1a1726; --muted:#6a6780; --acc:#5aad12; --acc-ink:#ffffff; --pixel:#67bd16; --btn2:rgba(20,16,40,.04); --btn2-line:rgba(20,16,40,.14); } html,body{height:100%} body{background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; overflow:hidden; transition:background .35s ease, color .35s ease;} .theme{position:fixed; top:16px; right:16px; z-index:6; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--muted); background:var(--card); border:1px solid var(--line); transition:color .2s, transform .15s, border-color .2s} .theme:hover{color:var(--ink); border-color:var(--acc)} .theme:active{transform:scale(.9)} .theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .card{position:relative; width:min(92vw,860px); border:1px solid var(--line); border-radius:18px; background:var(--card); overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; container-type:inline-size; box-shadow:0 32px 72px -48px rgba(0,0,0,.6); transition:background .35s ease, border-color .35s ease;} .left{position:relative; display:flex; flex-direction:column; padding:clamp(20px,3.8cqi,34px); z-index:2} h1{font-size:clamp(24px,5.2cqi,40px); font-weight:800; line-height:1.03; letter-spacing:-.02em} h1 .ln{display:block; overflow:hidden} h1 .ln span{display:block; transform:translateY(110%); animation:rise .7s cubic-bezier(.22,1,.36,1) both} h1 .ln:nth-child(2) span{animation-delay:.09s} p.body{margin-top:11px; max-width:36ch; color:var(--muted); font-size:clamp(12px,2.4cqi,13.5px); line-height:1.55; opacity:0; animation:fade .7s ease .25s both} .actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; opacity:0; animation:fade .6s ease .38s both} .btn{display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:999px; transition:transform .18s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.97)} .btn.primary{background:var(--acc); color:var(--acc-ink)} .btn.ghost{background:var(--btn2); color:var(--ink); border-color:var(--btn2-line)} .btn.ghost:hover{border-color:var(--acc); color:var(--acc)} /* pinwheel logo mark (static) */ .brand{display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:22px; opacity:0; animation:fade .6s ease .5s both} .mark{width:32px; height:32px} .mark rect{fill:var(--acc)} .brandname{font-weight:700; font-size:14px; letter-spacing:-.01em} .right{position:relative; min-height:250px} canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair} @keyframes rise{to{transform:none}} @keyframes fade{to{opacity:1}} @container (max-width:560px){ .card{grid-template-columns:1fr} .right{min-height:200px; order:-1} } @media (prefers-reduced-motion:reduce){ *{animation:none!important} h1 .ln span{transform:none} p.body,.actions,.brand{opacity:1} } </style> </head> <body> <button class="theme" id="theme" type="button" aria-label="Toggle theme"></button> <div class="card"> <div class="left"> <h1> <span class="ln"><span>Momentum,</span></span> <span class="ln"><span>by design</span></span> </h1> <p class="body"> Ship in small, reversible steps. Every change gets its own preview, a run of tests, and a one-click rollback — so you move fast and keep what already works. </p> <div class="actions"> <button class="btn primary">Start free</button> <button class="btn ghost">Watch demo</button> </div> <div class="brand"> <svg class="mark" viewBox="0 0 40 40" aria-label="Pinwheel"> <g> <rect x="21" y="3" width="12" height="12" rx="2"/> <rect x="21" y="21" width="12" height="12" rx="2" opacity=".82"/> <rect x="3" y="21" width="12" height="12" rx="2" opacity=".64"/> <rect x="3" y="3" width="12" height="12" rx="2" opacity=".82"/> </g> </svg> <span class="brandname">Pinwheel</span> </div> </div> <div class="right"> <canvas id="pw" aria-hidden="true"></canvas> </div> </div> <script> (function(){ var RM = matchMedia('(prefers-reduced-motion: reduce)').matches; var cvs = document.getElementById('pw'); var ctx = cvs.getContext('2d'); var W=0,H=0,cell=14,cols=0,rows=0,dpr=1; var t = 0, spin = 0.5, targetSpin = 0.5; var mouse = {x:-999,y:-999,on:false}; var ripples = []; var pixel = '#b5f23f'; function readColors(){ pixel = getComputedStyle(document.body).getPropertyValue('--pixel').trim() || pixel; } function resize(){ dpr = Math.min(2, window.devicePixelRatio||1); var r = cvs.getBoundingClientRect(); W = r.width; H = r.height; cvs.width = Math.round(W*dpr); cvs.height = Math.round(H*dpr); ctx.setTransform(dpr,0,0,dpr,0,0); cell = Math.max(6, Math.min(11, W/40)); cols = Math.ceil(W/cell); rows = Math.ceil(H/cell); } var ro = new ResizeObserver(resize); ro.observe(cvs.parentNode); resize(); readColors(); cvs.addEventListener('pointermove', function(e){ var r=cvs.getBoundingClientRect(); mouse.x=e.clientX-r.left; mouse.y=e.clientY-r.top; mouse.on=true; targetSpin=1.7; }); cvs.addEventListener('pointerleave', function(){ mouse.on=false; mouse.x=mouse.y=-999; targetSpin=0.5; }); cvs.addEventListener('pointerdown', function(e){ var r=cvs.getBoundingClientRect(); ripples.push({x:e.clientX-r.left,y:e.clientY-r.top,t:performance.now()}); if(ripples.length>5) ripples.shift(); }); var B = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]].map(function(row){return row.map(function(v){return (v+0.5)/16;});}); function smooth(a,b,x){ x=Math.max(0,Math.min(1,(x-a)/(b-a))); return x*x*(3-2*x); } var ARMS=5, SWIRL=13; function field(nx,ny){ var dx=nx-0.54, dy=(ny-0.5)*1.12; var rr=Math.hypot(dx,dy), ang=Math.atan2(dy,dx); var v=0.5+0.5*Math.sin(ARMS*ang - rr*SWIRL*6.283 + t); v=Math.pow(v,1.25); var env=1-smooth(0.16,0.66,rr); return v*(0.22+0.78*env); } function frame(now){ spin += (targetSpin-spin)*0.05; if(!RM) t += spin*0.02; ctx.clearRect(0,0,W,H); for(var k=ripples.length-1;k>=0;k--) if((now-ripples[k].t)/1000>1.3) ripples.splice(k,1); var sq = cell*0.66, off=(cell-sq)/2; ctx.fillStyle = pixel; for(var j=0;j<rows;j++){ var y=j*cell, ny=(y+cell/2)/H; for(var i=0;i<cols;i++){ var x=i*cell, nx=(x+cell/2)/W; var v=field(nx,ny); if(mouse.on){ var md=Math.hypot(x+cell/2-mouse.x, y+cell/2-mouse.y); var mb=1-md/150; if(mb>0) v+=mb*mb*0.9; } for(var m=0;m<ripples.length;m++){ var a=(now-ripples[m].t)/1000; var rd=Math.hypot(x+cell/2-ripples[m].x, y+cell/2-ripples[m].y); var ring=a*260; var rb=(1-Math.abs(rd-ring)/40)*(1-a/1.3); if(rb>0) v+=rb*0.85; } var thr=B[j&3][i&3]; if(v + (thr-0.5)*0.28 > 0.62){ ctx.globalAlpha = Math.min(1, 0.45 + v*0.6); ctx.fillRect(x+off, y+off, sq, sq); } } } ctx.globalAlpha=1; requestAnimationFrame(frame); } requestAnimationFrame(frame); // 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 paint(){ themeBtn.innerHTML = document.body.classList.contains('light') ? MOON : SUN; } themeBtn.addEventListener('click', function(){ document.body.classList.toggle('light'); readColors(); paint(); }); paint(); })(); </script> </body> </html>

Code & assets

Design System