https://ssicevs.com/assets/SectionFxLab3-BxsY72sW.js

1import{r as l,j as e}from"./metal-fx-C6GZ_SKA.js";import{fh as C,fp as m,eT as j,fn as z,fr as E,fm as T}from"./index-D1yBc__G.js";import"./motion-BHwmuFpx.js";const g=[{id:"taomarketcap",title:"TaoMarketCap",tag:"Bittensor decision layer",img:"/projects/taomarketcap-cover.webp"},{id:"celium",title:"Celium",tag:"GPU marketplace",img:"/projects/celium-thumbnail.webp"},{id:"desearch",title:"Desearch",tag:"Decentralized AI search",img:"/projects/desearch-thumbnail.webp"},{id:"drippler",title:"Drippler",tag:"AI wardrobe app",img:"/projects/drippler-cover.webp"},{id:"metanova",title:"Metanova",tag:"Drug-discovery dashboard",img:"/projects/metanova/branding.webp?v=2"}];function v({n:i,name:s,fx:n}){return e.jsxs("div",{className:"mx-auto max-w-[1200px] px-6 pb-8",children:[e.jsxs("span",{className:"font-mono text-[11px] tracking-[0.2em] text-white/35",children:[i," // section"]}),e.jsx("h2",{className:"mt-1 text-[26px] font-semibold tracking-tight text-white",children:s}),e.jsx("p",{className:"mt-1 text-[13px] text-accent-300",children:n})]})}function D(){const i=l.useRef(null),s=T(),n=l.useRef({x:-999,y:-999});return l.useEffect(()=>{const r=i.current,t=r.getContext("2d");let o=0;const d=Math.min(2,window.devicePixelRatio||1),x=()=>{r.width=r.offsetWidth*d,r.height=r.offsetHeight*d,t.scale(d,d)};x();const c=34,h=()=>{const w=r.offsetWidth,a=r.offsetHeight;t.clearRect(0,0,w,a);for(let u=c/2;u<w;u+=c)for(let f=c/2;f<a;f+=c){const y=u-n.current.x,N=f-n.current.y,b=Math.hypot(y,N),p=Math.max(0,1-b/140),R=1+p*3,M=.14+p*.7,k=p*10,P=u+y/(b||1)*k,S=f+N/(b||1)*k;t.beginPath(),t.arc(P,S,R,0,Math.PI*2),t.fillStyle=`rgba(${90+p*120}, ${170+p*60}, 255, ${M})`,t.fill()}o=requestAnimationFrame(h)};return s?(h(),cancelAnimationFrame(o)):h(),window.addEventListener("resize",x),()=>{cancelAnimationFrame(o),window.removeEventListener("resize",x)}},[s]),e.jsx("canvas",{ref:i,onPointerMove:r=>{const t=r.currentTarget.getBoundingClientRect();n.current={x:r.clientX-t.left,y:r.clientY-t.top}},onPointerLeave:()=>n.current={x:-999,y:-999},className:"absolute inset-0 h-full w-full"})}function G(){return e.jsx(j.h3,{initial:{clipPath:"polygon(0 0, 0 0, 0 100%, 0 100%)"},whileInView:{clipPath:"polygon(0 0, 100% 0, 100% 100%, 0 100%)"},viewport:{once:!0},transition:{duration:1,ease:[.16,1,.3,1]},className:"relative text-center text-[46px] font-semibold tracking-[-0.02em] text-white sm:text-[60px]",children:"Complex software, made readable."})}function I(){return e.jsxs("div",{className:"relative h-[420px] overflow-hidden rounded-3xl border border-white/[0.08] bg-[#04060c]",children:[e.jsx(D,{}),e.jsxs("div",{className:"pointer-events-none relative flex h-full flex-col items-center justify-center",children:[e.jsx(G,{}),e.jsx("p",{className:"pointer-events-none mt-4 text-[14px] text-white/45",children:"move your cursor — the dot field reacts"})]})]})}function A(){const i=l.useRef(null),{scrollYProgress:s}=z({target:i,offset:["start start","end end"]}),n=E(s,[0,1],["2%","-68%"]),r=m(n,{stiffness:90,damping:26});return e.jsx("div",{ref:i,className:"relative h-[320vh]",children:e.jsxs("div",{className:"sticky top-0 flex h-screen items-center overflow-hidden",children:[e.jsx(j.div,{style:{x:r},className:"flex gap-6 pl-6",children:g.map(t=>e.jsxs("div",{className:"group relative h-[62vh] w-[46vw] shrink-0 overflow-hidden rounded-2xl border border-white/10",children:[e.jsx("img",{src:t.img,alt:"",className:"h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"}),e.jsx("div",{className:"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"}),e.jsxs("div",{className:"absolute bottom-6 left-7",children:[e.jsx("div",{className:"text-[22px] font-semibold text-white",children:t.title}),e.jsx("div",{className:"text-[13px] text-white/60",children:t.tag})]})]},t.id))}),e.jsx("div",{className:"pointer-events-none absolute bottom-6 left-1/2 -translate-x-1/2 font-mono text-[11px] tracking-[0.2em] text-white/30",children:"scroll ↓ to travel sideways →"})]})})}function B(){const i=g.slice(0,4);return e.jsx("div",{className:"mx-auto max-w-[900px] px-6",children:i.map((s,n)=>

1e.jsx("div",{className:"sticky",style:{top:`${90+n*22}px`,marginBottom:"24px"},children:e.jsxs(j.div,{initial:{opacity:0,y:40},whileInView:{opacity:1,y:0},viewport:{once:!0,amount:.4},transition:{duration:.6,ease:[.16,1,.3,1]},className:"flex h-[300px] overflow-hidden rounded-3xl border border-white/10 bg-[#0a0d14] shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)]",children:[e.jsxs("div",{className:"flex w-1/2 flex-col justify-center p-9",children:[e.jsxs("div",{className:"font-mono text-[11px] text-accent-300",children:["0",n+1," — case study"]}),e.jsx("div",{className:"mt-2 text-[28px] font-semibold text-white",children:s.title}),e.jsxs("p",{className:"mt-2 text-[14px] text-white/55",children:[s.tag,". Cards pin and stack as you scroll — each one settles on top of the last."]})]}),e.jsx("div",{className:"relative w-1/2 overflow-hidden",children:e.jsx("img",{src:s.img,alt:"",className:"h-full w-full object-cover"})})]})},s.id))})}function H(){const i=l.useRef(null),s=l.useRef({x:0,y:0,t:0}),n=l.useRef(0),r=t=>{const o=i.current,d=o.getBoundingClientRect(),x=t.clientX-d.left,c=t.clientY-d.top,h=performance.now();if(Math.hypot(x-s.current.x,c-s.current.y)<40||h-s.current.t<60)return;s.current={x,y:c,t:h};const a=document.createElement("img");a.src=g[n.current%g.length].img,n.current++,a.className="pointer-events-none absolute h-28 w-40 -translate-x-1/2 -translate-y-1/2 rounded-lg object-cover border border-white/10",a.style.left=`${x}px`,a.style.top=`${c}px`,a.style.transition="transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease",o.appendChild(a),requestAnimationFrame(()=>{a.style.transform="translate(-50%,-50%) scale(.5) rotate(6deg)",a.style.opacity="0"}),setTimeout(()=>a.remove(),720)};return e.jsx("div",{ref:i,onPointerMove:r,className:"relative h-[320px] overflow-hidden rounded-2xl border border-white/[0.08] bg-[#06080e]",children:e.jsx("div",{className:"pointer-events-none flex h-full items-center justify-center text-[15px] text-white/40",children:"move across — projects trail your cursor"})})}function L(){const i=l.useRef(null),s=C(-100),n=C(-100),r=[{x:m(s,{stiffness:800,damping:30}),y:m(n,{stiffness:800,damping:30}),s:26},{x:m(s,{stiffness:300,damping:26}),y:m(n,{stiffness:300,damping:26}),s:20},{x:m(s,{stiffness:150,damping:22}),y:m(n,{stiffness:150,damping:22}),s:14}];return e.jsxs("div",{ref:i,onPointerMove:t=>{const o=i.current.getBoundingClientRect();s.set(t.clientX-o.left),n.set(t.clientY-o.top)},className:"relative h-[320px] overflow-hidden rounded-2xl border border-white/[0.08] bg-[#06080e]",children:[e.jsx("svg",{className:"absolute h-0 w-0",children:e.jsx("defs",{children:e.jsxs("filter",{id:"goo",children:[e.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"8",result:"b"}),e.jsx("feColorMatrix",{in:"b",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"})]})})}),e.jsx("div",{className:"pointer-events-none absolute inset-0",style:{filter:"url(#goo)"},children:r.map((t,o)=>e.jsx(j.span,{style:{x:t.x,y:t.y,width:t.s,height:t.s,marginLeft:-t.s/2,marginTop:-t.s/2},className:"absolute left-0 top-0 rounded-full bg-accent-400"},o))}),e.jsx("div",{className:"pointer-events-none flex h-full items-center justify-center text-[15px] text-white/40",children:"move — the metaball cursor melts + trails"})]})}function Y(){const[i]=l.useState(0);return e.jsxs("div",{className:"min-h-screen bg-ink text-white",children:[e.jsxs("header",{className:"mx-auto max-w-[1200px] px-6 pt-24 pb-14",children:[e.jsx("span",{className:"font-mono text-[11px] tracking-[0.2em] text-white/35",children:"// section interactions — v3"}),e.jsx("h1",{className:"mt-2 text-[34px] font-semibold tracking-tight",children:"Experimental cut"}),e.jsx("p",{className:"mt-3 max-w-[64ch] text-[15px] text-white/55",children:"The wilder explorations — a cursor-reactive dot-field, a pinned horizontal-scroll gallery, sticky stacking case-study cards, an image cursor-trail, and a gooey metaball cursor. Move your cursor, scroll slowly."})]}),e.jsx(v,{n:"01",name:"Hero — reactive dot-field + wipe",fx:"Cursor-reactive canvas dot grid (dots push + light up) · clip-path wipe headline"}),e.jsx("div",{className:"mx-auto max-w-[1200px] px-6",children:e.jsx(I,{})}),e.jsx("div",{className:"h-28"}),e.jsx(v,{n:"02",name:"Portfolio — horizontal scroll",fx:"Section pins; vertical scroll drives sideways travel through the covers"}),e.jsx(A,{}),e.jsx("div",{className:"h-16"}

1),e.jsx(v,{n:"03",name:"Case studies — sticky stack",fx:"Cards pin and pile as you scroll, each settling on the last"}),e.jsx(B,{}),e.jsx("div",{className:"h-40"}),e.jsx(v,{n:"04",name:"Cursor effects",fx:"Image cursor-trail (projects follow the pointer) · gooey metaball cursor (SVG goo filter)"}),e.jsxs("div",{className:"mx-auto grid max-w-[1200px] grid-cols-1 gap-4 px-6 lg:grid-cols-2",children:[e.jsx(H,{}),e.jsx(L,{})]}),e.jsx("div",{className:"h-32"})]})}export{L as GooeyCursor,I as HeroDots,A as HorizontalGallery,H as ImageTrail,B as StackingCards,Y as default};