PlanetScale

<div class="planet"><header><b>PLANETSCALE · BASE</b><strong>from $5/mo</strong></header><div class="node-map"><span>POSTGRES</span><div id="nodes"></div></div><label>Nodes <output id="count">1</output><input id="size" type="range" min="1" max="3" step="1" value="1" aria-label="Number of nodes"></label><footer>No free plan · actual bill depends on configuration</footer></div>

.planet{width:min(94vw,720px);height:min(88vh,330px);padding:clamp(9px,2.5vmin,18px);background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:clamp(8px,2vmin,15px);font:600 clamp(11px,2.4vmin,15px)/1.25 system-ui,sans-serif}.planet header,.planet label{display:flex;align-items:center;justify-content:space-between;gap:8px}.planet header strong{color:var(--accent);font-size:clamp(15px,3.6vmin,24px)}.node-map{flex:1;min-height:50px;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vmin,20px)}.node-map span{color:var(--muted);font-size:clamp(10px,2vmin,13px)}.node-map div{display:flex;gap:clamp(6px,2vmin,15px)}.node-map i{width:clamp(25px,7vmin,52px);height:clamp(25px,7vmin,52px);border:2px solid var(--accent);border-radius:10px;transform:rotate(45deg);background:color-mix(in srgb,var(--accent) 20%,var(--surface))}.planet label{flex-wrap:wrap}.planet output{color:var(--accent)}.planet input{width:100%;accent-color:var(--accent)}.planet footer{color:var(--muted);font-size:clamp(10px,2.2vmin,13px)}

const input=document.getElementById('size');let timer;function draw(n){input.value=String(n);document.getElementById('count').textContent=String(n);document.getElementById('nodes').replaceChildren(...Array.from({length:n},()=>document.createElement('i')))}draw(1);let n=1;timer=setInterval(()=>{n=n%3+1;draw(n)},1200);input.addEventListener('input',()=>{clearInterval(timer);draw(Number(input.value))})