Upstash Redis

<div class="price-scene requests"><header><b>UPSTASH · COMMANDS</b><span id="bill">$0</span></header><div class="metric"><span>Commands/month</span><strong id="amount"></strong></div><div class="art" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div><div class="track"><div id="used"></div><em id="free-mark"></em></div><input id="usage" type="range" min="0" max="50" step="1" value="5" aria-label="Commands/month"><footer><span id="tier">Free</span><small>Free 500k → PAYG all commands $0.20/100k</small></footer></div>

.price-scene{width:min(94vw,740px);height:min(88vh,330px);border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:clamp(9px,2.4vmin,18px);display:flex;flex-direction:column;gap:clamp(3px,1.2vmin,8px);font:600 clamp(11px,2.4vmin,15px)/1.2 system-ui,sans-serif;overflow:hidden}.price-scene header,.metric,.price-scene footer{display:flex;align-items:center;justify-content:space-between;gap:7px}.price-scene header b{font-size:clamp(13px,3vmin,19px)}.price-scene header span{font-size:clamp(15px,3.6vmin,25px);color:var(--accent)}.metric span,.price-scene footer small{color:var(--muted)}.metric strong{font-size:clamp(12px,2.8vmin,18px)}.art{flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,13px);position:relative}.art i{display:block;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 24%,var(--surface));transition:transform .4s,background .4s}.track{height:clamp(5px,1.4vmin,9px);border-radius:9px;background:var(--line);position:relative;overflow:hidden}.track div{height:100%;width:0;background:var(--accent);transition:width .4s}.track em{position:absolute;left:0;top:0;height:100%;border-right:2px solid var(--fg);pointer-events:none}.price-scene input{width:100%;height:clamp(14px,2.5vmin,22px);margin:0;accent-color:var(--accent)}.price-scene footer{font-size:clamp(10px,2.2vmin,13px)}.price-scene footer span{white-space:nowrap}.price-scene footer small{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.storage .art i{width:clamp(35px,10vmin,75px);height:clamp(20px,5vmin,36px);border-radius:50%;box-shadow:0 5px 0 var(--surface),0 8px 0 var(--accent)}.storage .art i:nth-child(2){transform:translateY(-8px)}.compute .art i{width:clamp(9px,2.4vmin,18px);height:var(--fill);min-height:16%;max-height:80%;border-radius:4px}.compute .art i:nth-child(even){transform:translateY(8px)}.documents .art i{width:clamp(25px,7vmin,50px);height:72%;border-radius:4px;box-shadow:4px 4px 0 var(--line)}.documents .art i:nth-child(even){transform:rotate(7deg)}.rows .art i{width:clamp(12px,3vmin,23px);height:clamp(12px,3vmin,23px);border-radius:4px;transform:rotate(45deg)}.cluster .art i{height:68%;width:clamp(30px,8vmin,60px);border-radius:9px;background:repeating-linear-gradient(to bottom,var(--surface) 0 18%,var(--accent) 19% 25%)}.requests .art i{width:clamp(8px,2vmin,14px);height:65%;border-radius:9px;transform:skew(-16deg)}.matrix .art{display:grid;grid-template-columns:repeat(3,clamp(16px,4vmin,30px));grid-template-rows:repeat(3,clamp(12px,3vmin,24px));align-content:center}.matrix .art i{width:100%;height:100%;border-radius:3px}.functions .art i{width:clamp(25px,7vmin,50px);height:clamp(25px,7vmin,50px);border-radius:50%}.functions .art i+ i:before{content:'→';position:absolute;transform:translate(-1.8em,.2em);color:var(--muted)}.branches .art i{width:clamp(25px,7vmin,50px);height:clamp(25px,7vmin,50px);border-radius:4px;transform:rotate(45deg)}.branches .art i:nth-child(2){transform:translateY(-13px) rotate(45deg)}.price-scene.over .art i{background:color-mix(in srgb,var(--accent-3) 32%,var(--surface));border-color:var(--accent-3)}

const cfg={"title":"UPSTASH · COMMANDS","metric":"Commands/month","unit":"×100k","free":5,"paidBase":0,"paidIncluded":0,"rate":0.2,"rateBlock":1,"max":50,"step":1,"start":5,"motif":"requests","foot":"Free 500k → PAYG all commands $0.20/100k"};const input=document.getElementById('usage'),scene=document.querySelector('.price-scene');let timer;function money(n){return n===0?'$0':n<0.01?'$'+n.toFixed(4):'$'+n.toFixed(2)}function draw(v){const value=Number(v);const over=value>cfg.free;const paidUnits=Math.max(0,value-cfg.paidIncluded);const cost=over?cfg.paidBase+paidUnits/cfg.rateBlock*cfg.rate:0;scene.classList.toggle('over',over);scene.style.setProperty('--fill',Math.min(100,value/cfg.max*100)+'%');document.getElementById('amount').textContent=value.toLocaleString()+' '+cfg.unit;document.getElementById('bill').textContent=money(cost);document.getElementById('tier').textContent=over?'Paid estimate':'Free tier';document.getElementById('used').style.width=Math.min(100,value/cfg.max*100)+'%';document.getElementById('free-mark').style.left=Math.max(0,cfg.free/cfg.max*100)+'%';input.value=String(value)}draw(cfg.start);let sequence=[cfg.start,Math.min(cfg.max,cfg.free+cfg.step*3),cfg.max,0],cursor=0;timer=setInterval(()=>{cursor=(cursor+1)%sequence.length;draw(sequence[cursor])},1250);input.addEventListener('input',()=>{clearInterval(timer);draw(input.value)})