Elements

<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="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="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="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="so"><div class="hd"><span>IN THE STUDIO</span><b>Make room for what matters.</b></div><div class="sl"></div></div>

<style>
.so{width:100%;height:100%;min-height:380px;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.hd{width:340px;margin-bottom:14px}.hd span{display:block;font-size:10px;letter-spacing:.14em;color:#777}.hd b{font-size:16px}.sl{position:relative;width:340px;height:264px}.it{position:absolute;left:0;right:0;height:58px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 12px;box-sizing:border-box;cursor:grab;touch-action:none;user-select:none;transition:transform .3s cubic-bezier(.3,1.3,.5,1),box-shadow .2s}.it.dr{transition:box-shadow .2s;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:3;cursor:grabbing;border-color:#0a84ff}.ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;color:#fff}.tx b{display:block;font-size:13px}.tx small{font-size:11px;color:#777}.ck{margin-left:auto;width:16px;height:16px;border-radius:50%;border:1.5px solid #444;display:grid;place-items:center;font-size:10px;cursor:pointer}.ck.on{background:#0a84ff;border-color:#0a84ff}
</style>

<script>
(function(){var L=document.querySelector(".sl"),H=66;var I=[["Collect references","Find the right direction","#b7791f","1"],["Explore the visual system","Type, color, and composition","#b83280","2"],["Build the first prototype","Make the interaction tangible","#2b6cb0","3"],["Ship something useful","Polish the details and release","#2f855a","4"]];var els=I.map(function(d){var e=document.createElement("div");e.className="it";e.innerHTML="<span class=\"ic\" style=\"background:"+d[2]+"\">"+d[3]+"</span><span class=\"tx\"><b>"+d[0]+"</b><small>"+d[1]+"</small></span><span class=\"ck\"></span>";L.appendChild(e);return e});var order=els.slice();function pos(skip){order.forEach(function(e,i){if(e!==skip)e.style.transform="translateY("+i*H+"px)"})}pos();els.forEach(function(e){e.querySelector(".ck").onclick=function(ev){ev.stopPropagation();this.classList.toggle("on");this.textContent=this.classList.contains("on")?"✓":""};e.querySelector(".ck").onpointerdown=function(ev){ev.stopPropagation()};e.onpointerdown=function(ev){var idx=order.indexOf(e),sy=ev.clientY;e.setPointerCapture(ev.pointerId);e.classList.add("dr");function mv(m){var y=Math.max(0,Math.min(3*H,idx*H+m.clientY-sy));e.style.transform="translateY("+y+"px) scale(1.02)";var t=Math.round(y/H);var rest=order.filter(function(x){return x!==e});rest.splice(t,0,e);order=rest;pos(e)}function up(){e.removeEventListener("pointermove",mv);e.removeEventListener("pointerup",up);e.classList.remove("dr");pos()}e.addEventListener("pointermove",mv);e.addEventListener("pointerup",up)}})})();
</script>

<div class="tl"><div class="tr"></div><div class="ctl"><button class="pv" type="button">‹</button><span class="ct"></span><button class="nx" type="button">›</button></div></div>

<style>
.tl{position:relative;width:100%;height:100%;min-height:380px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.tr{position:absolute;left:50%;top:0;height:340px;transition:transform .6s cubic-bezier(.3,1.1,.4,1)}.yr{position:absolute;top:70px;font:700 64px system-ui;color:#262626}.cd{position:absolute;top:150px;width:150px;height:180px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:14px;padding:12px;box-sizing:border-box;cursor:pointer;opacity:.5;transform:scale(.86);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.3,.5,1),opacity .4s}.cd.on{opacity:1;transform:scale(1.08)}.cd small{display:block;font-size:10px;color:#777}.cd b{display:block;font-size:13px;margin-top:2px}.cd svg{position:absolute;left:10px;right:10px;bottom:10px;width:130px;height:80px}.fl{position:absolute;left:0;top:0;height:1px;background:rgba(150,150,170,.5);transform-origin:0 0;pointer-events:none}.ctl{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;color:#888}.ctl button{width:30px;height:30px;border-radius:50%;border:1px solid #2a2a2a;background:#1b1b1b;color:#eee;cursor:pointer;font-size:16px}
</style>

<script>
(function(){var R=document.querySelector(".tl"),tr=R.querySelector(".tr"),ct=R.querySelector(".ct");var D=[["Oct 14 ’25","Offline drafts",[3,5,4,6,5,7]],["Nov 20 ’25","Weekly signups double",[2,3,5,4,7,9]],["Jan 8 ’26","Shared spaces",[4,4,6,7,6,8]],["Mar 2 ’26","Public API",[1,3,4,6,8,9]]];var P=164,a=1,n=D.length,fl=[];D.forEach(function(d,i){var l=document.createElement("div");l.className="fl";tr.appendChild(l);fl.push(l);var c=document.createElement("div");c.className="cd";c.style.left=i*P+"px";var pts=d[2].map(function(v,k){return (k*22)+","+(78-v*8)}).join(" ");c.innerHTML="<small>"+d[0]+"</small><b>"+d[1]+"</b><svg viewBox=\"0 0 110 80\"><polyline points=\""+pts+"\" fill=\"none\" stroke=\"#0a84ff\" stroke-width=\"2\"/></svg>";c.onclick=function(){go(i)};tr.appendChild(c)});[["’25",-10],["’26",2*P+10]].forEach(function(y){var e=document.createElement("div");e.className="yr";e.textContent=y[0];e.style.left=y[1]+"px";tr.appendChild(e)});function go(i){a=Math.max(0,Math.min(n-1,i));tr.style.transform="translateX("+(-(a*P+75))+"px)";[].forEach.call(tr.querySelectorAll(".cd"),function(c,k){c.classList.toggle("on",k===a)});var x1=a*P+75,y1=12,y2=150;fl.forEach(function(l,k){var x2=k*P+75,dx=x2-x1,dy=y2-y1;l.style.left=x1+"px";l.style.top=y1+"px";l.style.width=Math.sqrt(dx*dx+dy*dy)+"px";l.style.transform="rotate("+Math.atan2(dy,dx)+"rad)"});ct.textContent=(a+1)+" / "+n}R.querySelector(".pv").onclick=function(){go(a-1)};R.querySelector(".nx").onclick=function(){go(a+1)};go(1)})();
</script>

<div class="mw"><button class="op" type="button">Open payment options</button><p class="hint">Click a row. The modal morphs height to match new content.</p><div class="ov"><div class="md"><div class="vw"></div></div></div></div>

<style>
.mw{position:relative;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;overflow:hidden}.op{background:#1b1b1b;color:#eee;border:1px solid #2a2a2a;border-radius:999px;padding:10px 18px;font:500 14px system-ui;cursor:pointer}.op:hover{background:#242424}.hint{margin:0;font-size:12px;color:#777}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}.ov.on{opacity:1;pointer-events:auto}.md{width:min(340px,90%);background:#1b1b1b;border:1px solid #2a2a2a;border-radius:20px;overflow:hidden;transform:scale(.92) translateY(10px);transition:transform .35s cubic-bezier(.3,1.4,.5,1),height .35s cubic-bezier(.3,1.2,.5,1)}.ov.on .md{transform:none}.vw{padding:18px;transition:opacity .15s}.vw.out{opacity:0}.vw h3{margin:0 0 4px;font-size:16px}.vw p{margin:0 0 14px;font-size:13px;color:#999;line-height:1.5}.row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#222;color:#eee;border:1px solid #2a2a2a;border-radius:12px;padding:12px;margin-bottom:8px;font:500 13px system-ui;cursor:pointer}.row:hover{border-color:#0a84ff}.row i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#0a84ff,#6e5bff);display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff}.btn{border:0;border-radius:10px;padding:10px 14px;font:600 13px system-ui;cursor:pointer;background:#0a84ff;color:#fff;margin-right:8px}.btn.g{background:#2a2a2a;color:#ddd}.field{width:100%;box-sizing:border-box;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:10px;color:#eee;margin-bottom:8px;font:13px system-ui}
</style>

<script>
(function(){var root=document.querySelector(".mw"),ov=root.querySelector(".ov"),md=root.querySelector(".md"),vw=root.querySelector(".vw");var V={list:function(){return "<h3>Payment options</h3><p>Choose how you would like to pay.</p><button class=\"row\" data-go=\"card\"><i>C</i>Credit card</button><button class=\"row\" data-go=\"bank\"><i>B</i>Bank transfer</button><button class=\"row\" data-go=\"done\"><i>W</i>Digital wallet</button>"},card:function(){return "<h3>Credit card</h3><p>Enter your card details.</p><input class=\"field\" placeholder=\"Card number\"><input class=\"field\" placeholder=\"Name on card\"><input class=\"field\" placeholder=\"MM / YY\"><button class=\"btn\" data-go=\"done\">Pay now</button><button class=\"btn g\" data-go=\"list\">Back</button>"},bank:function(){return "<h3>Bank transfer</h3><p>Transfers settle in one to two business days.</p><button class=\"btn\" data-go=\"done\">Confirm</button><button class=\"btn g\" data-go=\"list\">Back</button>"},done:function(){return "<h3>All set</h3><p>Your payment is on its way.</p><button class=\"btn\" data-go=\"close\">Close</button>"}};function show(n,anim){if(!anim){vw.innerHTML=V[n]();md.style.height="auto";return}var h0=md.offsetHeight;vw.classList.add("out");setTimeout(function(){vw.innerHTML=V[n]();md.style.transition="none";md.style.height="auto";var h1=md.offsetHeight;md.style.height=h0+"px";void md.offsetHeight;md.style.transition="";md.style.height=h1+"px";vw.classList.remove("out");setTimeout(function(){md.style.height="auto"},400)},150)}root.querySelector(".op").onclick=function(){show("list",false);ov.classList.add("on")};ov.onclick=function(e){var g=e.target.closest("[data-go]");if(g){var n=g.getAttribute("data-go");if(n==="close"){ov.classList.remove("on")}else show(n,true);return}if(!e.target.closest(".md"))ov.classList.remove("on")}})();
</script>

<div class="ac"><div class="it"><button><span class="ico"><svg viewBox="0 0 24 24"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4M10 12h5M10 16h5"/></svg></span>Release Brief<em></em></button><div class="bd"><p>Summarise scope, owners and launch goals in a single page.</p></div></div><div class="it"><button><span class="ico"><svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></svg></span>Launch Checklist<em></em></button><div class="bd"><p>Final QA, approvals, rollback plan and on call rota.</p></div></div><div class="it"><button><span class="ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M8 8a5.7 5.7 0 000 8M16 8a5.7 5.7 0 010 8M5 5a10 10 0 000 14M19 5a10 10 0 010 14"/></svg></span>Campaign Notes<em></em></button><div class="bd"><p>Channels, messaging and the assets each team needs.</p></div></div><div class="it open"><button><span class="ico"><svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span>Rollout Calendar<em></em></button><div class="bd"><p>Plan announcements, staging checks, reminders, and quiet periods around the same timeline.</p></div></div><div class="it"><button><span class="ico"><svg viewBox="0 0 24 24"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M12 12l8-4.5M12 12L4 7.5M12 12v9"/></svg></span>Ship Build<em></em></button><div class="bd"><p>Tag the release, publish artifacts and notify the channel.</p></div></div></div>

<style>
.ac{width:320px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.it{background:#1e1e1e;overflow:hidden;transition:border-radius .45s cubic-bezier(.3,1.4,.5,1),margin .45s cubic-bezier(.3,1.4,.5,1)}.it button{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;border:0;background:none;color:inherit;font:600 14px/1 inherit;cursor:pointer;text-align:left}.ico svg{width:17px;height:17px;display:block;fill:none;stroke:#8a8a8a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.it em{margin-left:auto;width:7px;height:7px;border-right:1.6px solid #888;border-bottom:1.6px solid #888;transform:rotate(45deg) translate(-2px,-2px);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}.it.open em{transform:rotate(-135deg) translate(-2px,-2px)}.bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.3,1.5,.5,1)}.it.open .bd{grid-template-rows:1fr}.bd p{min-height:0;overflow:hidden;margin:0;padding:0 18px 0 49px;font-size:13.5px;line-height:1.55;color:#8d8d8d;opacity:0;transition:opacity .3s,padding .45s}.it.open .bd p{opacity:1;padding-bottom:18px}
</style>

<script>
(function(){var it=[].slice.call(document.querySelectorAll('.it'));function shape(){it.forEach(function(e,i){var p=it[i-1],n=it[i+1],o=e.classList.contains('open'),po=p&&p.classList.contains('open'),no=n&&n.classList.contains('open'),top=!p||o||po,bot=!n||o||no;e.style.borderRadius=(top?'26px':'4px')+' '+(top?'26px':'4px')+' '+(bot?'26px':'4px')+' '+(bot?'26px':'4px');e.style.marginTop=i&&(o||po)?'8px':'0'})}it.forEach(function(e){e.querySelector('button').onclick=function(){var was=e.classList.contains('open');it.forEach(function(x){x.classList.remove('open')});if(!was)e.classList.add('open');shape()}});shape()})();
</script>

<div class="mq"><div class="trk"><span>Analytics</span><span>Payments</span><span>Design</span><span>Source</span><span>Docs</span><span>Video</span><span>Search</span><span>Deploy</span></div></div>

<style>
.mq{width:420px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}.trk{display:flex;gap:12px;width:max-content;animation:mq 22s linear infinite}.mq:hover .trk{animation-play-state:paused}.trk span{padding:12px 18px;border-radius:12px;border:1px solid #2a2a2a;background:#1a1a1a;color:#e5e5e5;font:600 13px/1 inherit;white-space:nowrap}@keyframes mq{to{transform:translateX(-50%)}}
</style>

<script>
(function(){var t=document.querySelector('.trk');t.innerHTML+=t.innerHTML})();
</script>

<div class="ar"><div class="pills"><button data-r="21/9">21:9</button><button data-r="16/9" class="on">16:9</button><button data-r="3/2">3:2</button><button data-r="4/3">4:3</button><button data-r="1/1">1:1</button><button data-r="4/5">4:5</button><button data-r="3/4">3:4</button><button data-r="2/3">2:3</button><button data-r="9/16">9:16</button></div><div class="stagebox"><div class="fr"><svg viewBox="0 0 400 260" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="sk" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#9cc3e6"/><stop offset="1" stop-color="#f3d9b8"/></linearGradient><linearGradient id="lk" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2f8f83"/><stop offset="1" stop-color="#14524f"/></linearGradient></defs><rect width="400" height="260" fill="url(#sk)"/><path d="M0 170l60-50 40 30 70-70 60 60 50-40 120 90v70H0z" fill="#7d8c9c"/><path d="M0 190l80-40 60 40 90-60 70 50 100-20v100H0z" fill="#4f6a5a"/><path d="M230 120l90 70v30H200z" fill="#2c4a39"/><rect y="200" width="400" height="60" fill="url(#lk)"/><path d="M0 212h400" stroke="#ffffff30"/></svg></div></div></div>

<style>
.ar{width:380px;font-family:system-ui,-apple-system,sans-serif;display:grid;gap:18px;justify-items:center}.pills{display:flex;gap:2px;padding:4px;border-radius:999px;background:#202020}.pills button{border:0;background:none;color:#8a8a8a;font:500 11px/1 inherit;padding:8px 9px;border-radius:999px;cursor:pointer;transition:.25s}.pills button:hover{color:#ddd}.pills button.on{background:#111;color:#fff;font-weight:700}.stagebox{width:380px;height:210px;display:grid;place-items:center}.fr{width:373px;height:210px;border-radius:14px;overflow:hidden;transition:width .55s cubic-bezier(.3,.9,.3,1),height .55s cubic-bezier(.3,.9,.3,1);box-shadow:0 14px 34px rgba(0,0,0,.5)}.fr svg{display:block;width:100%;height:100%}
</style>

<script>
(function(){var fr=document.querySelector('.fr'),b=document.querySelectorAll('.pills button'),W=380,H=210;function fit(r){var p=r.split('/'),ar=p[0]/p[1],w=Math.min(W,H*ar),h=w/ar;fr.style.width=Math.round(w)+'px';fr.style.height=Math.round(h)+'px'}b.forEach(function(x){x.onclick=function(){b.forEach(function(y){y.classList.toggle('on',y===x)});fit(x.dataset.r)}});fit('16/9')})();
</script>

<div class="cl"><button class="hd" aria-expanded="false"><span>More details</span><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></button><div class="bd"><div class="in"><p>Collapsible content slides open with a soft ease and fades in line by line.</p><ul><li>Smooth height animation</li><li>Rotating chevron</li><li>Keyboard accessible</li></ul></div></div></div>

<style>
.cl{width:230px;font-family:system-ui,-apple-system,sans-serif;color:#e5e5e5;background:#181818;border:1px solid #262626;border-radius:14px;overflow:hidden}.hd{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border:0;background:none;color:inherit;font:600 13.5px/1 inherit;cursor:pointer}.hd svg{width:16px;height:16px;fill:none;stroke:#9a9a9a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,.9,.3,1)}.hd[aria-expanded=true] svg{transform:rotate(180deg)}.bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.3,.9,.3,1)}.bd.open{grid-template-rows:1fr}.in{min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .4s;padding:0 16px;font-size:12.5px;color:#a3a3a3;line-height:1.5}.bd.open .in{opacity:1;transform:none;padding-bottom:14px}.in p{margin:0 0 8px}.in ul{margin:0;padding-left:16px}
</style>

<script>
(function(){var h=document.querySelector('.hd'),b=document.querySelector('.bd');h.onclick=function(){var o=h.getAttribute('aria-expanded')!=='true';h.setAttribute('aria-expanded',o);b.classList.toggle('open',o)}})();
</script>

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Page Transition from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/transitions/page-transition.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React, { useEffect, useRef } from 'react';
import { motion, Variants } from 'framer-motion';

export type TransitionType =
  | 'double-stairs'
  | 'shutter-stairs'
  | 'split-stairs'
  | 'horizontal-split'
  | 'vertical-split'
  | 'slash'
  | 'lattice'
  | 'curtain-shred'
  | 'pixel'
  | 'pixel-wave'
  | 'pixel-spiral'
  | 'vortex'
  | 'cross-fade'
  | 'expand-grow'
  | 'push-slide'
  | 'pop-over'
  | 'depth-forward'
  | 'liquid-wave';

export interface PageTransitionProps {
  type?: TransitionType;
  isVisible: boolean;
  onComplete?: () => void;
  className?: string;
}

export const PageTransition: React.FC<PageTransitionProps> = ({
  type = 'double-stairs',
  isVisible,
  onComplete,
  className = '',
}) => {
  const pathRefs = useRef<(SVGPathElement | null)[]>([]);

  useEffect(() => {
    if (type !== 'liquid-wave' || !isVisible) return;
    let animId: number;
    const numPoints = 12;
    const numPaths = 3;
    const startTime = performance.now();

    const delays = Array.from({ length: numPaths }, (_, i) =>
      Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15)
    );

    const animateFrame = (now: number) => {
      const elapsedSec = (now - startTime) / 1000;
      pathRefs.current.forEach((path, i) => {
        if (!path) return;
        const stepX = 100 / (numPoints - 1);
        const pointsY = delays[i].map((delay) => {
          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65));
          const easeProgress =
            rawProgress < 0.5
              ? 2 * rawProgress * rawProgress
              : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;
          return 100 - easeProgress * 110;
        });

        let d = `M 0 100 V ${pointsY[0]}`;
        for (let j = 0; j < numPoints - 1; j++) {
          const currentX = j * stepX;
          const nextX = (j + 1) * stepX;
          const cpX = currentX + stepX * 0.5;
          d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`;
        }
        d += ` V 100 H 0 Z`;
        path.setAttribute('d', d);
      });

      if (now - startTime < 1300) {
        animId = requestAnimationFrame(animateFrame);
      } else if (onComplete) {
        onComplete();
      }
    };

    animId = requestAnimationFrame(animateFrame);
    return () => cancelAnimationFrame(animId);
  }, [isVisible, type, onComplete]);

  if (!isVisible && type !== 'liquid-wave') return null;

  if (type === 'double-stairs') {
    const COLUMNS = 5;
    const variants: Variants = {
      initial: (i: number) => ({ y: i % 2 === 0 ? '-100%' : '100%' }),
      enter: (i: number) => ({
        y: '0%',
        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },
      }),
      exit: (i: number) => ({
        y: i % 2 === 0 ? '100%' : '-100%',
        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },
      }),
    };

    return (
      <motion.div
        className={`fixed inset-0 z-50 flex h-screen w-screen pointer-events-none ${className}`}
        initial="initial"
        animate={isVisible ? 'enter' : 'exit'}
        onAnimationComplete={() => {
          if (onComplete) onComplete();
        }}
      >
        {[...Array(COLUMNS)].map((_, i) => (
          <motion.div
            key={i}
            variants={variants}
            custom={i}
            className="relative h-full flex-1 bg-neutral-900 border-r border-neutral-800 last:border-r-0"
          />
        ))}
      </motion.div>
    );
  }

  if (type === 'liquid-wave') {
    return (
      <svg
        className={`fixed inset-0 w-full h-full pointer-events-none z-50 ${className}`}
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
      >
        <path ref={(el) => { pathRefs.current[0] = el; }} fill="#3f3f46" style={{ opacity: 0.4 }} />
        <path ref={(el) => { pathRefs.current[1] = el; }} fill="#27272a" style={{ opacity: 0.75 }} />
        <path ref={(el) => { pathRefs.current[2] = el; }} fill="#09090b" />
      </svg>
    );
  }

  return (
    <motion.div
      className={`fixed inset-0 z-50 bg-neutral-900 pointer-events-none ${className}`}
      initial={{ opacity: 0 }}
      animate={isVisible ? { opacity: 1 } : { opacity: 0 }}
      transition={{ duration: 0.4 }}
    />
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Sticky Reveal from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/scroll/sticky-reveal.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React, { useRef, useState } from 'react';
import { motion, useMotionValueEvent, useScroll } from 'framer-motion';

interface StickyRevealProps {
  content: {
    title: string;
    description: string;
    content?: React.ReactNode;
  }[];
  className?: string;
}

export function StickyReveal({
  content,
  className = '',
}: StickyRevealProps) {
  const [activeCard, setActiveCard] = useState(0);
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start start', 'end end'],
  });
  
  const cardLength = content.length;

  useMotionValueEvent(scrollYProgress, "change", (latest) => {
    const cardsBreakpoints = content.map((_, index) => index / cardLength);
    const closestIndex = cardsBreakpoints.reduce((acc, val, index) => {
      if (latest >= val) {
        return index;
      }
      return acc;
    }, 0);
    setActiveCard(closestIndex);
  });

  return (
    <div
      ref={ref}
      className={`relative flex justify-between gap-10 max-w-5xl mx-auto py-10 px-4 ${className}`}
    >
      <div className="w-1/2 flex flex-col gap-32 py-10">
        {content.map((item, index) => (
          <div key={index} className="min-h-[50vh] flex flex-col justify-center">
            <motion.h2
              animate={{
                opacity: activeCard === index ? 1 : 0.3,
              }}
              className="text-2xl font-bold mb-4"
            >
              {item.title}
            </motion.h2>
            <motion.p
              animate={{
                opacity: activeCard === index ? 1 : 0.3,
              }}
              className="text-neutral-500 dark:text-neutral-450 leading-relaxed"
            >
              {item.description}
            </motion.p>
          </div>
        ))}
      </div>
      
      <div className="sticky top-20 h-[60vh] w-1/2 rounded-2xl bg-neutral-100 dark:bg-neutral-900 border border-neutral-200/10 overflow-hidden flex items-center justify-center">
        {content.map((item, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{
              opacity: activeCard === index ? 1 : 0,
              scale: activeCard === index ? 1 : 0.9,
            }}
            transition={{ duration: 0.4 }}
            className="absolute inset-0 p-6 flex items-center justify-center"
          >
            {item.content || (
              <div className="text-lg font-semibold text-neutral-400">
                Card {index + 1} Visual
              </div>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Progress Indicator from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/scroll/progress-indicator.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion, useScroll, useSpring } from 'framer-motion';

interface ProgressIndicatorProps {
  color?: string;
  height?: number;
  className?: string;
}

export function ProgressIndicator({
  color = 'bg-blue-500',
  height = 4,
  className = '',
}: ProgressIndicatorProps) {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  });

  return (
    <motion.div
      style={{ scaleX }}
      className={`fixed top-0 left-0 right-0 origin-left z-[9999] ${color} ${className}`}
      style={{
        scaleX,
        height,
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        originX: 0,
        zIndex: 9999,
      }}
    />
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Mouse Follow from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/cursor/mouse-follow.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React, { useEffect, useState } from 'react';
import { motion, useSpring } from 'framer-motion';

interface MouseFollowProps {
  children?: React.ReactNode;
  stiffness?: number;
  damping?: number;
  className?: string;
}

export function MouseFollow({
  children,
  stiffness = 180,
  damping = 20,
  className = '',
}: MouseFollowProps) {
  const [isVisible, setIsVisible] = useState(false);
  const x = useSpring(0, { stiffness, damping });
  const y = useSpring(0, { stiffness, damping });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      x.set(e.clientX);
      y.set(e.clientY);
      if (!isVisible) setIsVisible(true);
    };

    const handleMouseLeave = () => {
      setIsVisible(false);
    };

    window.addEventListener('mousemove', handleMouseMove, { passive: true });
    document.addEventListener('mouseleave', handleMouseLeave);
    
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [x, y, isVisible]);

  if (!isVisible) return null;

  return (
    <motion.div
      style={{
        x,
        y,
        translateX: '-50%',
        translateY: '-50%',
      }}
      className={`fixed top-0 left-0 pointer-events-none z-[9998] ${className}`}
    >
      {children || (
        <div className="w-6 h-6 rounded-full border border-blue-500/50 bg-blue-500/10" />
      )}
    </motion.div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Scroll Reveal from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/scroll/scroll-reveal.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

interface ScrollRevealProps {
  children: React.ReactNode;
  duration?: number;
  yOffset?: number;
  xOffset?: number;
  scale?: number;
  className?: string;
}

export function ScrollReveal({
  children,
  duration = 0.6,
  yOffset = 30,
  xOffset = 0,
  scale = 0.95,
  className = '',
}: ScrollRevealProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: yOffset, x: xOffset, scale }}
      whileInView={{ opacity: 1, y: 0, x: 0, scale: 1 }}
      viewport={{ once: true, margin: '-15%' }}
      transition={{
        duration,
        ease: [0.16, 1, 0.3, 1], // easeOutExpo
      }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Cursor Trail from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/cursor/cursor-trail.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React, { useEffect, useState } from 'react';
import { motion, useSpring } from 'framer-motion';

interface CursorTrailProps {
  color?: string;
  size?: number;
  count?: number;
}

export function CursorTrail({
  color = 'bg-blue-500',
  size = 8,
  count = 6,
}: CursorTrailProps) {
  const [coords, setCoords] = useState({ x: 0, y: 0 });
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setCoords({ x: e.clientX, y: e.clientY });
      if (!isVisible) setIsVisible(true);
    };

    const handleMouseLeave = () => {
      setIsVisible(false);
    };

    window.addEventListener('mousemove', handleMouseMove, { passive: true });
    document.addEventListener('mouseleave', handleMouseLeave);
    
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [isVisible]);

  // Create an array of springs, each following the one in front of it
  return (
    <>
      {isVisible && Array.from({ length: count }).map((_, index) => {
        // Higher index elements have more damping/delay
        const springConfig = {
          stiffness: 300 - index * 30,
          damping: 25 + index * 2,
          mass: 0.2 + index * 0.1,
        };

        return (
          <TrailDot
            key={index}
            index={index}
            coords={coords}
            springConfig={springConfig}
            size={size}
            color={color}
            count={count}
          />
        );
      })}
    </>
  );
}

interface TrailDotProps {
  index: number;
  coords: { x: number; y: number };
  springConfig: { stiffness: number; damping: number; mass: number };
  size: number;
  color: string;
  count: number;
}

function TrailDot({
  index,
  coords,
  springConfig,
  size,
  color,
  count,
}: TrailDotProps) {
  const x = useSpring(coords.x, springConfig);
  const y = useSpring(coords.y, springConfig);

  useEffect(() => {
    x.set(coords.x);
    y.set(coords.y);
  }, [coords, x, y]);

  // Calculate size and opacity based on index (shrinking tail)
  const dotSize = size * (1 - index / count);
  const opacity = 1 - index / count;

  return (
    <motion.div
      style={{
        x,
        y,
        width: dotSize,
        height: dotSize,
        translateX: '-50%',
        translateY: '-50%',
        opacity,
      }}
      className={`fixed top-0 left-0 rounded-full pointer-events-none z-[9999] ${color}`}
    />
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Spotlight from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/cursor/spotlight.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React, { useRef, useState } from 'react';
import { motion } from 'framer-motion';

interface SpotlightProps {
  children: React.ReactNode;
  className?: string;
  glowColor?: string;
  glowSize?: number;
}

export function Spotlight({
  children,
  className = '',
  glowColor = 'rgba(255, 255, 255, 0.08)',
  glowSize = 250,
}: SpotlightProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [coords, setCoords] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    setCoords({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  return (
    <div
      ref={containerRef}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setOpacity(1)}
      onMouseLeave={() => setOpacity(0)}
      className={`relative overflow-hidden bg-neutral-950 border border-neutral-900 rounded-2xl p-6 ${className}`}
    >
      {/* Dynamic Cursor Spotlight Layer */}
      <motion.div
        className="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300"
        style={{
          opacity,
          background: `radial-gradient(${glowSize}px circle at ${coords.x}px ${coords.y}px, ${glowColor}, transparent 80%)`,
        }}
      />
      
      {/* Content wrapper */}
      <div className="relative z-10">{children}</div>
    </div>
  );
}