Elements

<div class="fm"><label>Email<span class="f"><i>✉</i><input placeholder="you@example.com"></span></label><label>Password<span class="f"><i>•</i><input type="password" value="secret12" class="pw"><u class="ey">◉</u></span></label><label>Search<span class="f"><i>⌕</i><input class="sv" value="Ada"><em class="ok">✓</em></span></label></div>

<style>
.fm{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.fm label{width:260px;font-size:11px;font-weight:600}.f{display:flex;align-items:center;gap:8px;margin-top:6px;height:38px;box-sizing:border-box;padding:0 12px;border-radius:99px;background:#1a1a1a;border:1px solid #2a2a2a;font-weight:400;transition:border-color .25s,box-shadow .25s}.f:focus-within{border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.2)}.f i{font-style:normal;color:#777;font-size:13px}.f input{flex:1;min-width:0;background:none;border:0;outline:0;color:#eee;font:13px system-ui}.f input::placeholder{color:#555}.ey{text-decoration:none;color:#777;cursor:pointer;font-size:12px;transition:color .2s}.ey.on{color:#0a84ff}.ok{font-style:normal;color:#22c55e;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}.ok.on{transform:scale(1)}
</style>

<script>
(function(){var R=document.querySelector(".fm"),pw=R.querySelector(".pw"),ey=R.querySelector(".ey"),sv=R.querySelector(".sv"),ok=R.querySelector(".ok");ey.onclick=function(){var s=pw.type==="password";pw.type=s?"text":"password";ey.classList.toggle("on",s)};function v(){ok.classList.toggle("on",sv.value.trim().length>2)}sv.oninput=v;v()})();
</script>

<div class="fb"><div class="cv"><canvas width="160" height="90"></canvas></div><div class="ct"><div class="pl"></div><label>Speed <input type="range" min="1" max="30" value="10"></label></div></div>

<style>
.fb{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.cv{width:340px;height:190px;border-radius:16px;overflow:hidden}.cv canvas{width:100%;height:100%;display:block;filter:blur(6px) saturate(1.2);transform:scale(1.1)}.ct{display:flex;align-items:center;gap:16px;font-size:11px;color:#999}.pl{display:flex;gap:6px}.pl i{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}.pl i.on{border-color:#fff;transform:scale(1.15)}.ct input{vertical-align:middle;accent-color:#0a84ff;width:90px}
</style>

<script>
(function(){var R=document.querySelector(".fb"),cv=R.querySelector("canvas"),x=cv.getContext("2d"),sp=R.querySelector("input"),pl=R.querySelector(".pl"),P=[["#a855c8","#f0529c","#dcdcfb","#4a39b5"],["#0ea5e9","#22d3ee","#e0f2fe","#1e3a8a"],["#f97316","#fbbf24","#fff7ed","#9a3412"],["#10b981","#a3e635","#ecfccb","#065f46"]],cur=0,t=0;P.forEach(function(p,i){var d=document.createElement("i");d.style.background="linear-gradient(135deg,"+p[0]+","+p[1]+")";d.onclick=function(){cur=i;mk()};pl.appendChild(d)});function mk(){[].forEach.call(pl.children,function(e,i){e.classList.toggle("on",i===cur)})}function frame(){t+=sp.value/1000;var p=P[cur],w=160,h=90;x.globalCompositeOperation="source-over";x.fillStyle=p[0];x.fillRect(0,0,w,h);var B=[[.3,.3,p[1],70],[.7,.7,p[2],80],[.8,.2,p[1],55],[.2,.8,p[3],60]];B.forEach(function(b,i){var cx=(b[0]+Math.sin(t*(1+i*.3)+i)*.28)*w,cy=(b[1]+Math.cos(t*(.8+i*.25)+i*2)*.28)*h,g=x.createRadialGradient(cx,cy,0,cx,cy,b[3]);g.addColorStop(0,b[2]);g.addColorStop(1,"rgba(0,0,0,0)");x.fillStyle=g;x.fillRect(0,0,w,h)});requestAnimationFrame(frame)}mk();frame()})();
</script>

<div class="tb"><small class="cn"></small><div class="sh"><table><thead></thead><tbody></tbody></table></div></div>

<style>
.tb{width:100%;height:100%;min-height:380px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.cn{width:100%;max-width:520px;font-size:11px;color:#777;margin-bottom:6px}.sh{width:100%;max-width:520px;max-height:290px;overflow:auto;border:1px solid #2a2a2a;border-radius:14px;background:#161616}table{border-collapse:collapse;width:100%;min-width:480px;font-size:12px}th{position:sticky;top:0;background:#1d1d1d;text-align:left;font-weight:600;color:#999;padding:10px 12px;cursor:pointer;user-select:none;white-space:nowrap;z-index:1}th:hover{color:#fff}td{padding:11px 12px;border-top:1px solid #222;white-space:nowrap}tr.sl td{background:rgba(10,132,255,.1)}.ck{width:15px;height:15px;border-radius:4px;border:1.5px solid #444;display:inline-grid;place-items:center;font-size:10px;color:#fff;cursor:pointer;vertical-align:middle}.ck.on{background:#0a84ff;border-color:#0a84ff}.bd{padding:3px 8px;border-radius:99px;font-size:10px;font-weight:600}.Active{background:rgba(34,197,94,.15);color:#34d399}.Invited{background:rgba(245,158,11,.15);color:#fbbf24}.Suspended{background:rgba(239,68,68,.15);color:#f87171}.ar{margin-left:4px;font-size:9px}
</style>

<script>
(function(){var R=document.querySelector(".tb"),th=R.querySelector("thead"),tb=R.querySelector("tbody"),cn=R.querySelector(".cn"),F=["Leo","Jude","Ren","Eli","Mia","Noa","Sam","Zoe","Ari","Kai"],L=["Marsh","Reyes","Quinn","Sato","Ortiz","Khan","Berg","Lopez","Ford","Cole"],RO=["Admin","Editor","Viewer","Owner"],ST=["Suspended","Active","Invited"],D=[];for(var i=0;i<30;i++){var f=F[i%10],l=L[(i*3)%10];D.push({id:i,name:f+" "+l,email:(f+"."+l+(100+i*7)).toLowerCase()+"@example.dev",role:RO[i%4],status:ST[(i*2)%3],mrr:[49,99,199,499][(i*5)%4]})}var key=null,dir=1,sel={};var C=[["name","Name"],["email","Email"],["role","Role"],["status","Status"],["mrr","MRR"]];function draw(){var rows=D.slice();if(key)rows.sort(function(a,b){var x=a[key],y=b[key];return(x>y?1:x<y?-1:0)*dir});var n=Object.keys(sel).length;cn.textContent=n?n+" selected":D.length+" rows";th.innerHTML="";var tr=document.createElement("tr"),h=document.createElement("th");h.innerHTML="<span class=\"ck"+(n===D.length?" on":"")+"\">"+(n===D.length?"✓":n?"–":"")+"</span>";h.onclick=function(){if(n===D.length)sel={};else D.forEach(function(d){sel[d.id]=1});draw()};tr.appendChild(h);C.forEach(function(c){var t=document.createElement("th");t.innerHTML=c[1]+"<span class=\"ar\">"+(key===c[0]?(dir>0?"▲":"▼"):"")+"</span>";t.onclick=function(){if(key===c[0])dir=-dir;else{key=c[0];dir=1}draw()};tr.appendChild(t)});th.appendChild(tr);tb.innerHTML="";rows.forEach(function(d){var r=document.createElement("tr");if(sel[d.id])r.className="sl";r.innerHTML="<td><span class=\"ck"+(sel[d.id]?" on":"")+"\">"+(sel[d.id]?"✓":"")+"</span></td><td><b>"+d.name+"</b></td><td>"+d.email+"</td><td>"+d.role+"</td><td><span class=\"bd "+d.status+"\">"+d.status+"</span></td><td>$"+d.mrr+"</td>";r.firstChild.onclick=function(){if(sel[d.id])delete sel[d.id];else sel[d.id]=1;draw()};tb.appendChild(r)})}draw()})();
</script>

<div class="sr"><div class="pn"><div class="pg"><i></i></div><div class="sc"></div><button class="up" type="button">↑</button></div></div>

<style>
.sr{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.pn{position:relative;width:340px;height:260px;border-radius:18px;background:#1b1b1b;border:1px solid #2a2a2a;overflow:hidden}.pg{position:absolute;top:0;left:0;right:0;height:2px;z-index:2}.pg i{display:block;height:100%;width:100%;background:#0a84ff;transform:scaleX(0);transform-origin:0 50%}.sc{height:100%;overflow-y:auto;padding:20px;box-sizing:border-box;scrollbar-width:none}.sc::-webkit-scrollbar{display:none}.sec{padding:34px 0;border-bottom:1px solid #222;color:#999;font-size:13px;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s cubic-bezier(.3,1.2,.5,1)}.sec.in{opacity:1;transform:none}.sec b{display:block;color:#fff;font-size:15px;margin-bottom:4px}.up{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;border:0;background:#2a2a2a;color:#fff;cursor:pointer;opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}.up.on{opacity:1;transform:none;pointer-events:auto}
</style>

<script>
(function(){var R=document.querySelector(".pn"),sc=R.querySelector(".sc"),up=R.querySelector(".up"),pg=R.querySelector(".pg i");for(var i=1;i<=6;i++){var s=document.createElement("div");s.className="sec";s.innerHTML="<b>Section "+i+"</b>Content reveals as it scrolls into view.";sc.appendChild(s)}function upd(){var r=sc.getBoundingClientRect();[].forEach.call(sc.children,function(s){var q=s.getBoundingClientRect();if(q.top<r.bottom-30&&q.bottom>r.top)s.classList.add("in")});var m=sc.scrollHeight-sc.clientHeight;pg.style.transform="scaleX("+(m>0?sc.scrollTop/m:0)+")";up.classList.toggle("on",sc.scrollTop>60)}sc.onscroll=upd;up.onclick=function(){sc.scrollTo({top:0,behavior:"smooth"})};upd();setTimeout(upd,100);setTimeout(upd,500)})();
</script>

<div class="as"><button class="bt" type="button"><span class="vw"><span class="st a"><i>❐</i>Copy link</span><span class="st b"><i>✓</i>Copied</span></span></button></div>

<style>
.as{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.bt{border:0;border-radius:99px;background:#0a84ff;color:#fff;padding:0 18px;height:38px;font:600 13px system-ui;cursor:pointer;transition:width .4s cubic-bezier(.3,1.3,.5,1),transform .2s,background .3s;width:124px;overflow:hidden}.bt:active{transform:scale(.95)}.bt.ok{width:112px;background:#22a45d}.vw{position:relative;display:block;height:38px}.st{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .4s cubic-bezier(.3,1.3,.5,1),opacity .25s,filter .3s;white-space:nowrap}.st i{font-style:normal}.st.b{transform:translateY(120%);opacity:0;filter:blur(3px)}.bt.ok .a{transform:translateY(-120%);opacity:0;filter:blur(3px)}.bt.ok .b{transform:none;opacity:1;filter:none}
</style>

<script>
(function(){var b=document.querySelector(".bt"),t=0;b.onclick=function(){b.classList.add("ok");clearTimeout(t);t=setTimeout(function(){b.classList.remove("ok")},1600)}})();
</script>

<div class="rn"><small>Card number</small><div class="nm"><span>•••• •••• ••••</span><span class="dg"></span></div><button type="button">Animate</button></div>

<style>
.rn{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.rn small{font-size:11px;color:#777;align-self:center}.nm{display:flex;gap:10px;align-items:center;font:600 20px ui-monospace,monospace;color:#999}.dg{display:flex;color:#fff}.c{height:1.3em;overflow:hidden;width:.62em}.c>div{transition:transform 1s cubic-bezier(.2,.9,.3,1)}.c b{display:block;height:1.3em;line-height:1.3em;font-weight:600;text-align:center}.rn button{margin-top:14px;background:#1b1b1b;border:1px solid #2a2a2a;color:#eee;border-radius:10px;padding:9px 16px;font:600 12px system-ui;cursor:pointer}
</style>

<script>
(function(){var R=document.querySelector(".rn"),dg=R.querySelector(".dg"),cols=[],v=[0,8,0,6];for(var i=0;i<4;i++){var c=document.createElement("span");c.className="c";var inn=document.createElement("div");for(var d=0;d<10;d++){var b=document.createElement("b");b.textContent=d;inn.appendChild(b)}c.appendChild(inn);dg.appendChild(c);cols.push(inn)}function set(n,anim){cols.forEach(function(inn,i){inn.style.transitionDelay=anim?i*90+"ms":"0ms";inn.style.transform="translateY(-"+n[i]*1.3+"em)"})}set(v,false);R.querySelector("button").onclick=function(){var n=v.map(function(o){var x;do{x=Math.floor(Math.random()*10)}while(x===o);return x});v=n;set(n,true)}})();
</script>

<div class="tx"><div class="ph"></div><button type="button">Next phrase</button></div>

<style>
.tx{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.ph{font:500 18px ui-monospace,SFMono-Regular,monospace;height:28px;white-space:pre}.ph span{display:inline-block;animation:ci .5s cubic-bezier(.3,1.2,.5,1) both}.ph.o span{animation:co .3s ease both}@keyframes ci{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}@keyframes co{to{opacity:0;filter:blur(6px);transform:translateY(-8px)}}.tx button{background:#1b1b1b;border:1px solid #2a2a2a;color:#eee;border-radius:99px;padding:8px 16px;font:600 12px system-ui;cursor:pointer;transition:transform .2s}.tx button:active{transform:scale(.95)}
</style>

<script>
(function(){var R=document.querySelector(".tx"),ph=R.querySelector(".ph"),P=["Inspecting the repository","Planning the changes","Writing the component","Running the tests","Shipping the fix"],i=0,busy=false;function put(t){ph.className="ph";ph.innerHTML="";t.split("").forEach(function(c,k){var s=document.createElement("span");s.textContent=c;s.style.animationDelay=k*22+"ms";ph.appendChild(s)})}R.querySelector("button").onclick=function(){if(busy)return;busy=true;[].forEach.call(ph.children,function(s,k){s.style.animationDelay=k*10+"ms"});ph.className="ph o";setTimeout(function(){i=(i+1)%P.length;put(P[i]);busy=false},420)};put(P[0])})();
</script>

<div class="bw"><button class="sb" type="button">Continue <i>↗</i></button><button class="sb s" type="button"><i>✦</i> Generate</button><button class="sb r" type="button"><i>✦</i></button></div>

<style>
.bw{width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.sb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:11px 22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.35);color:#fff;font:600 13px system-ui;cursor:pointer;box-shadow:inset 0 0 12px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.06);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,border-color .3s}.sb.s{padding:8px 14px;font-size:11px}.sb.r{width:34px;height:34px;padding:0;justify-content:center}.sb:before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}.sb:hover{transform:scale(1.05);border-color:#fff;box-shadow:inset 0 0 16px rgba(255,255,255,.18),0 0 22px rgba(255,255,255,.18)}.sb:hover:before{left:130%}.sb:active{transform:scale(.96)}.sb i{font-style:normal;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.sb:hover i{transform:translate(2px,-2px) rotate(8deg)}
</style>

<div class="cy"><div class="sw"><button class="on" data-m="cc" type="button">Concave</button><button data-m="cv" type="button">Convex</button></div><div class="st"></div></div>

<style>
.cy{position:relative;width:100%;height:100%;min-height:380px;overflow:hidden;touch-action:pan-y;cursor:grab;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.sw{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:#161616;border:1px solid #2a2a2a;border-radius:10px;padding:3px;z-index:30}.sw button{border:0;background:none;color:#888;font:600 11px system-ui;padding:6px 12px;border-radius:8px;cursor:pointer}.sw .on{background:#0a84ff;color:#fff}.st{position:absolute;left:50%;top:56%}.ob{position:absolute;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;will-change:transform}
</style>

<script>
(function(){var R=document.querySelector(".cy"),st=R.querySelector(".st"),mode="cc",pos=4,tgt=4,BG=["conic-gradient(from 20deg,#f97316,#fbbf24,#ef4444,#fbbf24,#f97316)","radial-gradient(circle at 40% 35%,#7dd3fc,#1e40af 70%,#0b1b3a)","radial-gradient(circle,#c4b5fd 20%,#4c1d95 21% 40%,#c4b5fd 41% 55%,#1e1b4b 56%)","radial-gradient(circle at 30% 30%,#fff,#9ca3af 40%,#1f2937 80%)","linear-gradient(135deg,#84cc16,#bef264 50%,#3f6212)","conic-gradient(#a855f7,#ec4899,#f9a8d4,#a855f7)","linear-gradient(160deg,#1e3a8a,#3b82f6 50%,#1e1b4b)","radial-gradient(circle at 60% 40%,#fde68a,#f59e0b 55%,#78350f)","conic-gradient(from 90deg,#14b8a6,#0f766e,#99f6e4,#14b8a6)"],N=BG.length,els=BG.map(function(b){var e=document.createElement("div");e.className="ob";e.style.background=b;st.appendChild(e);return e}),raf=0;function lay(){els.forEach(function(e,i){var k=i-pos,ak=Math.abs(k);if(ak>4.6){e.style.opacity=0;return}var c=Math.cos(k*.3),x=k*104,sc,y;if(mode==="cc"){sc=.6+.08*ak;y=(1-c)*-90}else{sc=Math.max(.4,1.05-.14*ak);y=(1-c)*90}e.style.opacity=1;e.style.zIndex=Math.round(sc*10);e.style.transform="translate("+x+"px,"+y+"px) scale("+sc+")"})}function tick(){pos+=(tgt-pos)*.14;lay();if(Math.abs(tgt-pos)>.002)raf=requestAnimationFrame(tick);else{pos=tgt;lay()}}function go(t){tgt=Math.max(0,Math.min(N-1,t));cancelAnimationFrame(raf);tick()}[].forEach.call(R.querySelectorAll(".sw button"),function(b){b.onclick=function(){mode=b.getAttribute("data-m");[].forEach.call(R.querySelectorAll(".sw button"),function(x){x.classList.toggle("on",x===b)});lay()}});var sx=null,sp=0;R.onpointerdown=function(e){if(e.target.closest(".sw"))return;sx=e.clientX;sp=tgt;R.setPointerCapture(e.pointerId)};R.onpointermove=function(e){if(sx===null)return;tgt=Math.max(0,Math.min(N-1,sp-(e.clientX-sx)/100));cancelAnimationFrame(raf);tick()};R.onpointerup=function(){if(sx===null)return;sx=null;go(Math.round(tgt))};var t=0;R.onwheel=function(e){e.preventDefault();if(Date.now()-t<120)return;t=Date.now();go(Math.round(tgt)+(e.deltaY>0||e.deltaX>0?1:-1))};lay()})();
</script>

<div class="pr"><div class="rl"></div><div class="pc"><small></small><b></b></div></div>

<style>
.pr{position:relative;width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.rl{position:relative;width:60px;height:280px;cursor:pointer}.tk{position:absolute;left:0;height:2px;border-radius:2px;background:#555;transition:width .12s,background .2s}.tk.on{background:#0a84ff}.pc{position:absolute;left:50%;margin-left:10px;top:50%;width:150px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:10px 12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.3,.5,1)}.pc.on{opacity:1}.pc small{display:block;font-size:10px;color:#777}.pc b{font-size:13px}
</style>

<script>
(function(){var R=document.querySelector(".pr"),rl=R.querySelector(".rl"),pc=R.querySelector(".pc"),N=["Intro","Install","Usage","Props","Theming","Motion","Accessibility","Examples","Recipes","Forms","Tables","Charts","FAQ","Changelog"],P=20,sel=2,T=N.map(function(n,i){var t=document.createElement("i");t.className="tk";t.style.top=i*P+6+"px";t.style.width="10px";rl.appendChild(t);return t});function mk(){T.forEach(function(t,i){t.classList.toggle("on",i===sel)})}rl.onpointermove=function(e){var r=rl.getBoundingClientRect(),y=e.clientY-r.top,h=Math.max(0,Math.min(N.length-1,Math.round((y-6)/P)));T.forEach(function(t,i){var d=Math.abs(i*P+6-y)/P;t.style.width=(10+26*Math.exp(-d*d/2.2))+"px"});pc.querySelector("small").textContent=(h+1)+" / "+N.length;pc.querySelector("b").textContent=N[h];pc.style.transform="translateY("+(h*P+6-140+0)+"px) translateY(-50%) translateY(140px)";pc.style.top="calc(50% - 140px)";pc.style.transform="translateY("+(h*P+6)+"px) translateY(-50%)";pc.classList.add("on");rl.setAttribute("data-h",h)};rl.onpointerleave=function(){T.forEach(function(t){t.style.width="10px"});pc.classList.remove("on")};rl.onclick=function(){sel=+rl.getAttribute("data-h")||0;mk()};mk()})();
</script>

<div class="sh"><div class="ls"><i class="hv"></i></div></div>

<style>
.sh{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.ls{position:relative;width:320px}.hv{position:absolute;left:-10px;right:-10px;top:0;height:50px;border-radius:12px;background:#1f1f1f;opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.3,.5,1),height .3s,opacity .2s}.rw{position:relative;display:flex;justify-content:space-between;align-items:center;padding:10px 0;cursor:pointer}.rw b{display:block;font-size:13px}.rw small{font-size:12px;color:#888}.rw span{color:#777;font-size:13px}
</style>

<script>
(function(){var L=document.querySelector(".ls"),hv=L.querySelector(".hv"),D=[["Inbox","12 unread threads, 3 mentions today."],["Drafts","4 posts waiting for a final pass."],["Releases","Last shipped 2 days ago, v0.4.1."],["Billing","Plan renews on the 1st of next month."]];D.forEach(function(d){var r=document.createElement("div");r.className="rw";r.innerHTML="<div><b>"+d[0]+"</b><small>"+d[1]+"</small></div><span>↗</span>";r.onmouseenter=function(){hv.style.height=r.offsetHeight+"px";hv.style.transform="translateY("+r.offsetTop+"px)";hv.style.opacity=1};L.appendChild(r)});L.onmouseleave=function(){hv.style.opacity=0}})();
</script>

<div class="ft"><div class="tr"></div></div>

<style>
.ft{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.tr{width:260px;font-size:12px}.rw{display:flex;align-items:center;gap:7px;height:30px;padding:0 8px;border-radius:8px;cursor:pointer;color:#bbb;white-space:nowrap}.rw:hover{background:#1c1c1c}.rw.sel{background:#222;color:#fff;font-weight:600}.cv{width:10px;color:#777;font-size:9px;transition:transform .25s}.op>.rw .cv{transform:rotate(90deg)}.ic{font-size:11px;font-weight:700;width:14px;text-align:center}.ch{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,1.1,.4,1)}.op>.ch{grid-template-rows:1fr}.ch>div{overflow:hidden;padding-left:14px}
</style>

<script>
(function(){var T=[{n:"app",o:1,c:[{n:"components",o:1,c:[{n:"file-tree.tsx"},{n:"button.tsx"}]},{n:"page.tsx"},{n:"globals.css"}]},{n:"public",c:[{n:"logo.svg"}]},{n:"package.json"},{n:"README.md"}],sel="file-tree.tsx",root=document.querySelector(".tr");function icon(n){var e=n.split(".").pop();return e==="tsx"?["{}","#4aa3ff"]:e==="css"?["#","#a78bfa"]:e==="json"?["{}","#f5a524"]:e==="svg"?["◇","#34d399"]:["≡","#999"]}function build(list,par){list.forEach(function(d){var w=document.createElement("div");if(d.o)w.className="op";var r=document.createElement("div");r.className="rw";if(d.c){r.innerHTML="<span class=\"cv\">▶</span><span class=\"ic\" style=\"color:#aaa\">▣</span>"+d.n;var ch=document.createElement("div");ch.className="ch";var inn=document.createElement("div");ch.appendChild(inn);build(d.c,inn);r.onclick=function(){w.classList.toggle("op")};w.appendChild(r);w.appendChild(ch)}else{var ic=icon(d.n);r.innerHTML="<span class=\"cv\"></span><span class=\"ic\" style=\"color:"+ic[1]+"\">"+ic[0]+"</span>"+d.n;if(d.n===sel)r.classList.add("sel");r.onclick=function(){[].forEach.call(root.querySelectorAll(".rw"),function(x){x.classList.remove("sel")});r.classList.add("sel")};w.appendChild(r)}par.appendChild(w)})}build(T,root)})();
</script>

<div class="as"><aside class="sb"><div class="ws"><span class="lg">⌘</span><b class="tx">Acme Inc</b></div><a class="ni"><i>⌕</i><span class="tx">Search</span></a><a class="ni"><i>✦</i><span class="tx">AI Assistant</span></a><a class="ni"><i>✉</i><span class="tx">Inbox</span><u class="tx">4</u></a><small class="tx">WORKSPACES</small><a class="ni on"><i>◉</i><span class="tx">People</span></a><a class="ni"><i>▣</i><span class="tx">Companies</span></a><a class="ni"><i>◎</i><span class="tx">Opportunities</span></a></aside><main><div class="tb"><button class="tg" type="button">▤</button><b>People</b></div><div class="bd"><small>Wednesday, July 29</small><h3>Good morning, Ava.</h3><p>Your workspace stays in place while the navigation folds down to a focused icon rail.</p></div></main></div>

<style>
.as{display:flex;width:100%;height:100%;min-height:380px;font-family:system-ui,-apple-system,sans-serif;color:#eee;overflow:hidden}.sb{width:190px;flex:none;background:#141414;border-right:1px solid #222;padding:12px 10px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;transition:width .45s cubic-bezier(.3,1.1,.4,1);overflow:hidden}.as.c .sb{width:60px}.ws{display:flex;align-items:center;gap:10px;margin-bottom:12px;white-space:nowrap}.lg{width:28px;height:28px;border-radius:8px;background:#f2f2f2;color:#111;display:grid;place-items:center;flex:none}.ni{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:12px;color:#aaa;cursor:pointer;white-space:nowrap}.ni:hover{background:#1c1c1c}.ni.on{background:#222;color:#fff}.ni i{width:16px;text-align:center;font-style:normal;flex:none}.ni u{margin-left:auto;text-decoration:none;font-size:10px;color:#888}.tx{transition:opacity .25s}.as.c .tx{opacity:0}.sb small{font-size:9px;letter-spacing:.12em;color:#666;margin:14px 8px 4px;white-space:nowrap}main{flex:1;min-width:0}.tb{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #222;font-size:12px}.tg{background:none;border:0;color:#aaa;font-size:15px;cursor:pointer}.bd{padding:22px 20px}.bd small{font-size:10px;color:#777}.bd h3{margin:6px 0;font-size:20px}.bd p{margin:0;font-size:12px;color:#888;line-height:1.6;max-width:280px}
</style>

<script>
(function(){var R=document.querySelector(".as");R.querySelector(".tg").onclick=function(){R.classList.toggle("c")};[].forEach.call(R.querySelectorAll(".ni"),function(n){n.onclick=function(){[].forEach.call(R.querySelectorAll(".ni"),function(x){x.classList.remove("on")});n.classList.add("on");R.querySelector(".tb b").textContent=n.querySelector("span").textContent}})})();
</script>

<div class="bn"><nav class="nv"><i class="dm"></i></nav></div>

<style>
.bn{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.nv{position:relative;padding-left:24px}.nv a{display:block;height:34px;line-height:34px;font-size:14px;color:#888;cursor:pointer;transition:color .2s}.nv a.on{color:#fff;font-weight:600}.nv a:hover{color:#ddd}.dm{position:absolute;left:6px;top:0;width:7px;height:7px;background:#0a84ff;transform:translateY(13px) rotate(45deg);transition:transform .55s cubic-bezier(.3,1.9,.5,1)}
</style>

<script>
(function(){var nv=document.querySelector(".nv"),dm=nv.querySelector(".dm"),I=["Overview","Components","Motion","Templates","Changelog"],a=1,els=I.map(function(t,i){var e=document.createElement("a");e.textContent=t;e.onclick=function(){a=i;mv(i);mark()};e.onmouseenter=function(){mv(i)};nv.appendChild(e);return e});function mv(i){dm.style.transform="translateY("+(i*34+13)+"px) rotate(45deg)"}function mark(){els.forEach(function(e,i){e.classList.toggle("on",i===a)})}nv.onmouseleave=function(){mv(a)};mark();mv(a)})();
</script>

<div class="pf"><div class="cd"><div class="hd"><div><b>Activity</b><small>Pull down to check for updates</small></div><span class="lv">live</span></div><div class="vp"><div class="ind"><i></i></div><div class="ls"></div></div></div></div>

<style>
.pf{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.cd{width:340px;background:#161616;border:1px solid #2a2a2a;border-radius:20px;overflow:hidden}.hd{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #222}.hd b{display:block;font-size:14px}.hd small{font-size:11px;color:#777}.lv{font:10px ui-monospace,monospace;color:#888;background:#222;padding:3px 7px;border-radius:99px}.vp{position:relative;height:250px;overflow:hidden;touch-action:none;cursor:grab}.ind{position:absolute;top:0;left:0;right:0;height:44px;display:grid;place-items:center;opacity:0}.ind i{width:20px;height:20px;border-radius:50%;border:2px solid #444;border-top-color:#0a84ff;box-sizing:border-box}.ind.sp i{animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}.ls{position:relative;transition:transform .4s cubic-bezier(.3,1.3,.5,1)}.ls.d{transition:none}.it{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid #1f1f1f}.it.n{animation:in .5s cubic-bezier(.3,1.3,.5,1)}@keyframes in{from{opacity:0;transform:translateY(-16px)}}.ic{width:30px;height:30px;border-radius:9px;background:#222;display:grid;place-items:center;font-size:12px;color:#aaa;flex:none}.it b{display:block;font-size:12px}.it small{font-size:11px;color:#777}.tm{margin-left:auto;font-size:10px;color:#666}
</style>

<script>
(function(){var R=document.querySelector(".pf"),vp=R.querySelector(".vp"),ls=R.querySelector(".ls"),ind=R.querySelector(".ind"),L=[["⇅","Motion review approved","The pull request is ready to merge.","4m"],["✎","New component feedback","The spring feels much closer to native now.","18m"],["✓","Registry checks passed","All component files resolved successfully.","31m"],["▲","Preview deployed","Your preview is live and shareable.","1h"],["◔","Weekly summary ready","Open it to see the highlights.","2h"]],N=["Build finished","New comment on launch plan","Release notes drafted","Review requested"],k=0,busy=false;function add(a,n){var e=document.createElement("div");e.className="it"+(n?" n":"");e.innerHTML="<span class=\"ic\">"+a[0]+"</span><span><b>"+a[1]+"</b><small>"+a[2]+"</small></span><span class=\"tm\">"+a[3]+"</span>";if(n)ls.insertBefore(e,ls.firstChild);else ls.appendChild(e)}L.forEach(function(a){add(a)});var sy=null,p=0;vp.onpointerdown=function(e){if(busy)return;sy=e.clientY;vp.setPointerCapture(e.pointerId);ls.classList.add("d")};vp.onpointermove=function(e){if(sy===null)return;var dy=e.clientY-sy;if(dy<=0){p=0}else p=Math.min(110,dy*.5);ls.style.transform="translateY("+p+"px)";ind.style.opacity=Math.min(1,p/50);ind.firstChild.style.transform="rotate("+p*4+"deg)"};vp.onpointerup=function(){if(sy===null)return;sy=null;ls.classList.remove("d");if(p>=55){busy=true;ls.style.transform="translateY(44px)";ind.style.opacity=1;ind.classList.add("sp");setTimeout(function(){add([ "★",N[k%N.length],"Just now","now"],true);k++;ind.classList.remove("sp");ind.style.opacity=0;ls.style.transform="";busy=false},1100)}else{ls.style.transform="";ind.style.opacity=0}p=0}})();
</script>

<div class="cm"><button class="op" type="button">Open modal</button><div class="ov"></div><div class="md"><div class="in"><h3>Delete this project?</h3><p>This removes all files and cannot be undone.</p><div class="bt"><button class="g" type="button">Cancel</button><button class="ok" type="button">Delete</button></div></div></div></div>

<style>
.cm{position:relative;width:100%;height:100%;min-height:380px;display:grid;place-items:center;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.op{background:#f2f2f2;color:#111;border:0;border-radius:99px;padding:10px 18px;font:600 13px system-ui;cursor:pointer;transition:opacity .2s}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}.ov.on{opacity:1;pointer-events:auto}.md{position:absolute;visibility:hidden;overflow:hidden;background:#f2f2f2;border:1px solid #2a2a2a;box-sizing:border-box;transition:left .5s cubic-bezier(.3,1.1,.4,1),top .5s cubic-bezier(.3,1.1,.4,1),width .5s cubic-bezier(.3,1.1,.4,1),height .5s cubic-bezier(.3,1.1,.4,1),border-radius .5s,background .4s}.md.on{background:#1b1b1b}.in{padding:22px;opacity:0;transition:opacity .15s;width:300px;box-sizing:border-box}.md.on .in{opacity:1;transition:opacity .3s .25s}.in h3{margin:0 0 6px;font-size:16px}.in p{margin:0 0 18px;font-size:13px;color:#999;line-height:1.5}.bt{display:flex;gap:8px;justify-content:flex-end}.bt button{border:0;border-radius:10px;padding:9px 14px;font:600 12px system-ui;cursor:pointer;background:#e5484d;color:#fff}.bt .g{background:#2a2a2a;color:#ddd}
</style>

<script>
(function(){var R=document.querySelector(".cm"),op=R.querySelector(".op"),ov=R.querySelector(".ov"),md=R.querySelector(".md"),W=300,Hh=170,tm=0;function rect(){var a=op.getBoundingClientRect(),f=R.getBoundingClientRect();return{l:a.left-f.left,t:a.top-f.top,w:a.width,h:a.height}}function put(o,r){md.style.left=o.l+"px";md.style.top=o.t+"px";md.style.width=o.w+"px";md.style.height=o.h+"px";md.style.borderRadius=r+"px"}function open(){clearTimeout(tm);var f=R.getBoundingClientRect(),b=rect();md.style.transition="none";put(b,99);md.style.visibility="visible";void md.offsetWidth;md.style.transition="";op.style.opacity=0;ov.classList.add("on");md.classList.add("on");put({l:(f.width-W)/2,t:(f.height-Hh)/2,w:W,h:Hh},20)}function close(){var b=rect();md.classList.remove("on");ov.classList.remove("on");put(b,99);tm=setTimeout(function(){md.style.visibility="hidden";op.style.opacity=1},480)}op.onclick=open;ov.onclick=close;[].forEach.call(R.querySelectorAll(".bt button"),function(x){x.onclick=close})})();
</script>

<div class="wp"><p class="bn">Born <b></b></p><div class="bx"><div class="hl"></div><div class="cl"><div class="ls"></div></div><div class="cl"><div class="ls"></div></div><div class="cl"><div class="ls"></div></div></div><label class="tk"><input type="checkbox"><i></i><span>Tick sound</span></label></div>

<style>
.wp{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.bn{margin:0;font-size:12px;color:#888}.bn b{color:#fff}.bx{position:relative;display:flex;gap:4px;background:#161616;border:1px solid #2a2a2a;border-radius:18px;padding:0 6px;width:280px;box-sizing:border-box}.hl{position:absolute;left:6px;right:6px;top:68px;height:34px;background:#222;border-radius:10px}.cl{position:relative;height:170px;overflow:hidden;touch-action:none;cursor:grab;flex:1}.cl:first-of-type{flex:1.4}.ls{position:absolute;left:0;right:0;top:68px;transition:transform .35s cubic-bezier(.2,.9,.3,1)}.ls.d{transition:none}.ls div{height:34px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#888;transition:color .2s,opacity .2s}.ls div.c{color:#fff;font-weight:700}.tk{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.tk input{display:none}.tk i{width:36px;height:20px;border-radius:99px;background:#333;position:relative;transition:background .25s}.tk i:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.tk input:checked+i{background:#0a84ff}.tk input:checked+i:after{transform:translateX(16px)}
</style>

<script>
(function(){var R=document.querySelector(".wp"),H=34,M=["January","February","March","April","May","June","July","August","September","October","November","December"],D=[],Y=[];for(var i=1;i<=31;i++)D.push(i);for(i=1990;i<=2030;i++)Y.push(i);var L=[M,D,Y],ix=[5,8,14],cols=[].slice.call(R.querySelectorAll(".cl")),ctx=null,snd=R.querySelector(".tk input");function tick(){if(!snd.checked)return;try{ctx=ctx||new(window.AudioContext||window.webkitAudioContext)();var o=ctx.createOscillator(),g=ctx.createGain();o.frequency.value=1400;g.gain.value=.04;o.connect(g);g.connect(ctx.destination);o.start();o.stop(ctx.currentTime+.02)}catch(e){}}function head(){R.querySelector(".bn b").textContent=M[ix[0]]+" "+D[ix[1]]+", "+Y[ix[2]]}function paint(c,f,snap){var ls=cols[c].querySelector(".ls");ls.classList.toggle("d",!snap);ls.style.transform="translateY("+(-f*H)+"px)";var r=Math.round(f);[].forEach.call(ls.children,function(e,k){e.className=k===r?"c":"";e.style.opacity=Math.max(.15,1-Math.abs(k-f)*.28)})}function set(c,v){v=Math.max(0,Math.min(L[c].length-1,v));if(v!==ix[c])tick();ix[c]=v;paint(c,v,true);head()}cols.forEach(function(el,c){var ls=el.querySelector(".ls");L[c].forEach(function(t,k){var d=document.createElement("div");d.textContent=t;d.onclick=function(){set(c,k)};ls.appendChild(d)});var sy=0,sf=0,dr=false;el.onpointerdown=function(e){dr=true;sy=e.clientY;sf=ix[c];el.setPointerCapture(e.pointerId)};el.onpointermove=function(e){if(!dr)return;var f=Math.max(0,Math.min(L[c].length-1,sf-(e.clientY-sy)/H));paint(c,f,false);var r=Math.round(f);if(r!==ix[c]){ix[c]=r;tick();head()}};el.onpointerup=function(){dr=false;set(c,ix[c])};el.onwheel=function(e){e.preventDefault();set(c,ix[c]+(e.deltaY>0?1:-1))};paint(c,ix[c],true)});head()})();
</script>

<div class="ms"><div class="fd"><span class="ch"></span><input class="ip" placeholder="Search…"><i class="ar">⇅</i></div><div class="dd"></div></div>

<style>
.ms{position:relative;width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;padding-top:70px;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.fd{width:320px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:6px 32px 6px 8px;position:relative;cursor:text;transition:border-color .2s}.fd.f{border-color:#0a84ff}.ch{display:contents}.cp{display:flex;align-items:center;gap:6px;background:#262626;border-radius:8px;padding:5px 8px;font-size:12px;animation:pop .3s cubic-bezier(.3,1.5,.5,1)}.cp u{text-decoration:none;color:#888;cursor:pointer;font-size:13px}.cp u:hover{color:#fff}@keyframes pop{from{transform:scale(.6);opacity:0}}.ip{flex:1;min-width:60px;background:none;border:0;outline:0;color:#eee;font:12px system-ui}.ar{position:absolute;right:10px;color:#777;font-style:normal;font-size:12px}.dd{width:320px;margin-top:6px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:4px;box-sizing:border-box;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}.dd.on{opacity:1;transform:none;pointer-events:auto}.op{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;font-size:12px;cursor:pointer}.op:hover{background:#262626}.op i{color:#0a84ff;font-style:normal}
</style>

<script>
(function(){var R=document.querySelector(".ms"),fd=R.querySelector(".fd"),ch=R.querySelector(".ch"),ip=R.querySelector(".ip"),dd=R.querySelector(".dd"),O=["Design","Engineering","Product","Marketing","Sales","Support"],S=["Design","Engineering"];function draw(){ch.innerHTML="";S.forEach(function(s){var c=document.createElement("span");c.className="cp";c.innerHTML=s+" <u>×</u>";c.querySelector("u").onclick=function(e){e.stopPropagation();S.splice(S.indexOf(s),1);draw()};ch.appendChild(c)});dd.innerHTML="";var q=ip.value.toLowerCase();O.filter(function(o){return o.toLowerCase().indexOf(q)>-1}).forEach(function(o){var r=document.createElement("div");r.className="op";r.innerHTML="<span>"+o+"</span><i>"+(S.indexOf(o)>-1?"✓":"")+"</i>";r.onclick=function(e){e.stopPropagation();var i=S.indexOf(o);if(i>-1)S.splice(i,1);else S.push(o);ip.value="";draw();ip.focus()};dd.appendChild(r)})}fd.onclick=function(){dd.classList.add("on");fd.classList.add("f");ip.focus()};ip.oninput=draw;ip.onkeydown=function(e){if(e.key==="Backspace"&&!ip.value&&S.length){S.pop();draw()}};document.addEventListener("click",function(e){if(!R.contains(e.target)){dd.classList.remove("on");fd.classList.remove("f")}});draw()})();
</script>