https://ssicevs.com/assets/SectionFxLab4-DXbiYMN4.js

1import{r as g,j as e}from"./metal-fx-C6GZ_SKA.js";import{fm as v,fh as f,fp as b,eT as o,fn as j,fr as d}from"./index-D1yBc__G.js";import{u as w}from"./use-animation-frame-ClLV8y4i.js";import"./motion-BHwmuFpx.js";const l=[{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"},{id:"rizzy",title:"Rizzy",tag:"Lead-gen agent UI",img:"/projects/rizzy-poster.jpg"}];function h({n:a,name:t,fx:s}){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:[a," // present the work"]}),e.jsx("h2",{className:"mt-1 text-[26px] font-semibold tracking-tight text-white",children:t}),e.jsx("p",{className:"mt-1 text-[13px] text-accent-300",children:s})]})}function N(){const a=v(),t=f(0),s=b(t,{stiffness:60,damping:18,mass:.6}),r=g.useRef(!1),c=360/l.length,u=460;return w((n,i)=>{a||r.current||t.set(t.get()+i*.006)}),e.jsxs("div",{className:"relative h-[460px] select-none",style:{perspective:1400},children:[e.jsx(o.div,{className:"absolute inset-0 z-30 cursor-grab active:cursor-grabbing",drag:"x",dragConstraints:{left:0,right:0},dragElastic:0,onDragStart:()=>r.current=!0,onDrag:(n,i)=>t.set(t.get()+i.delta.x*.35),onDragEnd:(n,i)=>{t.set(t.get()+i.velocity.x*.06),r.current=!1}}),e.jsx(o.div,{className:"absolute left-1/2 top-1/2 h-0 w-0",style:{transformStyle:"preserve-3d",rotateY:s},children:l.map((n,i)=>e.jsxs("div",{className:"absolute h-[240px] w-[360px] overflow-hidden rounded-2xl border border-white/10 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.9)]",style:{transform:`translate(-50%,-50%) rotateY(${i*c}deg) translateZ(${u}px)`,backfaceVisibility:"hidden"},children:[e.jsx("img",{src:n.img,alt:"",className:"h-full w-full object-cover",draggable:!1}),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-3 left-4",children:[e.jsx("div",{className:"text-[16px] font-semibold text-white",children:n.title}),e.jsx("div",{className:"text-[11px] text-white/60",children:n.tag})]})]},n.id))}),e.jsx("div",{className:"pointer-events-none absolute inset-0 [background:radial-gradient(70%_120%_at_50%_50%,transparent_55%,#02040a)]"}),e.jsx("div",{className:"pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 font-mono text-[11px] tracking-[0.2em] text-white/30",children:"drag to spin ↔"})]})}const y=[{p:0,x:60,y:40,w:300,r:-4},{p:1,x:460,y:180,w:240,r:3},{p:2,x:820,y:20,w:280,r:-2},{p:3,x:200,y:380,w:260,r:5},{p:4,x:640,y:460,w:300,r:-3},{p:5,x:1040,y:320,w:240,r:2},{p:0,x:1180,y:60,w:220,r:4},{p:2,x:40,y:620,w:240,r:-5}];function k(){return e.jsxs("div",{className:"relative mx-auto h-[520px] max-w-[1200px] overflow-hidden rounded-3xl border border-white/[0.08] bg-[#04060c]",children:[e.jsx(o.div,{className:"absolute h-[900px] w-[1500px] cursor-grab active:cursor-grabbing",drag:!0,dragConstraints:{left:-320,right:60,top:-420,bottom:60},dragElastic:.12,dragTransition:{power:.3,timeConstant:400},children:y.map((a,t)=>{const s=l[a.p];return e.jsxs(o.div,{className:"group absolute overflow-hidden rounded-xl border border-white/10 shadow-[0_30px_80px_-40px_rgba(0,0,0,0.9)]",style:{left:a.x,top:a.y,width:a.w,rotate:a.r},whileHover:{scale:1.05,rotate:0,zIndex:40},transition:{type:"spring",stiffness:300,damping:22},children:[e.jsx("img",{src:s.img,alt:"",className:"pointer-events-none block w-full object-cover",draggable:!1}),e.jsx("div",{className:"pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3 pt-8 text-[13px] font-semibold text-white",children:s.title})]},t)})}),e.jsx("div",{className:"pointer-events-none absolute right-5 top-5 rounded-full border border-white/10 bg-black/40 px-3 py-1 font-mono text-[11px] text-white/45 backdrop-blur",children:"drag the field · fling it"})]})}function _({i:a,progress:t}){const s=a/l.length,r=d(t,[s-.5,s,s+.25],[-2600,-200,700]),p=d(t,[s-.4,s-.1,s+.12,s+.22],[0,1,1,0]),c=l[a];return e.jsxs(o.div,{className:"absolute left-1/2 top-1/2 h-[300px] w-[520px] overflow-hidden rounded-2xl border border-white/10",style:{x:"-50%",y:"-50%",z:r,opacity:p,transformStyle:"preserve-3d"},children:[e.jsx("img",{src:c.img,alt:"",className:"h-full w-full object-cover"}),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-4 left-5",children:[e.jsx("div",{className:"text-[20px] font-semibold text-white",children:c.title}),e.jsx("div",{className:"text-[13px] text-white/60",children:c.tag})]})]})}function D(){const a=g.useRef(null),{scrollYProgress:t}=j({target:a,offset:["start start","end end"]});return e.jsx("div",{ref:a,className:"relative h-[420vh]",children:e.jsxs("div",{className:"sticky top-0 h-screen overflow-hidden bg-[#02040a]",style:{perspective:900},children:[l.map((s,r)=>e.jsx(_,{i:r,progress:t},r)),e.jsx("div",{className:"pointer-events-none absolute bottom-8 left-1/2 -translate-x-1/2 font-mono text-[11px] tracking-[0.2em] text-white/30",children:"scroll ↓ — the work rushes past"})]})})}function C(){const a=g.useRef(null),t=b(f(0),{stiffness:120,damping:18}),s=b(f(0),{stiffness:120,damping:18}),r=x=>{const m=a.current.getBoundingClientRect();t.set((x.clientX-(m.left+m.width/2))/m.width),s.set((x.clientY-(m.top+m.height/2))/m.height)}

1,p=d(t,[-.5,.5],[24,-24]),c=d(s,[-.5,.5],[16,-16]),u=d(t,[-.5,.5],[-16,16]),n=d(t,[-.5,.5],[-6,6]),i=d(s,[-.5,.5],[5,-5]);return e.jsxs("div",{className:"mx-auto max-w-[1200px] px-6",children:[e.jsxs("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:[e.jsx("div",{ref:a,onMouseMove:r,onMouseLeave:()=>{t.set(0),s.set(0)},style:{perspective:1e3},children:e.jsxs(o.div,{style:{rotateX:i,rotateY:n,transformStyle:"preserve-3d"},className:"relative h-[320px] overflow-hidden rounded-3xl border border-white/10",children:[e.jsx(o.img,{src:l[0].img,alt:"",style:{x:p,y:c,scale:1.12},className:"absolute inset-0 h-full w-full object-cover"}),e.jsx("div",{className:"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"}),e.jsxs(o.div,{style:{x:u,translateZ:40},className:"absolute bottom-6 left-7",children:[e.jsx("div",{className:"text-[24px] font-semibold text-white",children:"TaoMarketCap"}),e.jsx("div",{className:"text-[13px] text-white/60",children:"layers move at different depths on mouse"})]})]})}),e.jsx("div",{className:"grid grid-cols-2 gap-4",children:l.slice(1,5).map(x=>e.jsxs(o.div,{whileHover:{scale:1.06},transition:{type:"spring",stiffness:400,damping:12},className:"relative h-[150px] overflow-hidden rounded-2xl border border-white/10",children:[e.jsx("img",{src:x.img,alt:"",className:"h-full w-full object-cover"}),e.jsx("div",{className:"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"}),e.jsx("div",{className:"absolute bottom-3 left-4 text-[13px] font-semibold text-white",children:x.title})]},x.id))})]}),e.jsx("p",{className:"mt-3 text-center text-[12px] text-white/35",children:"hover the small tiles — springy squash-stretch (low damping)"})]})}function T(){const[a]=g.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:"// present the work — v4"}),e.jsx("h1",{className:"mt-2 text-[34px] font-semibold tracking-tight",children:"Kinetic project presentation"}),e.jsx("p",{className:"mt-3 max-w-[64ch] text-[15px] text-white/55",children:"Movement-first ways to show the projects — a spinnable 3D cylinder, a fling-able infinite canvas, a scroll-driven fly-through where the work rushes the camera, and a mouse-parallax featured tile. Drag, fling, scroll."})]}),e.jsx(h,{n:"01",name:"3D cylinder carousel",fx:"Drag to spin · idle auto-drift · momentum on release"}),e.jsx("div",{className:"mx-auto max-w-[1200px] px-6",children:e.jsx("div",{className:"overflow-hidden rounded-3xl border border-white/[0.08] bg-[#02040a]",children:e.jsx(N,{})})}),e.jsx("div",{className:"h-28"}),e.jsx(h,{n:"02",name:"Infinite draggable canvas",fx:"Fling a scattered field of projects with momentum · hover to pop"}),e.jsx(k,{}),e.jsx("div",{className:"h-28"}),e.jsx(h,{n:"03",name:"Scroll fly-through",fx:"Covers rush toward the camera in perspective as you scroll"}),e.jsx(D,{}),e.jsx("div",{className:"h-16"}),e.jsx(h,{n:"04",name:"Parallax + elastic featured",fx:"Depth layers track the mouse · springy squash-stretch tiles"}),e.jsx(C,{}),e.jsx("div",{className:"h-32"})]})}export{N as Cylinder,k as DragCanvas,D as FlyThrough,C as ParallaxFeatured,T as default};