https://ssicevs.com/assets/SectionFxLab2-CCXYIDsl.js

1import{j as e,r as u}from"./metal-fx-C6GZ_SKA.js";import{fm as j,eT as l,fh as w,c as b,fn as v,fp as N,fr as m,fi as f}from"./index-D1yBc__G.js";import{u as y}from"./use-velocity-BWCpIJVZ.js";import"./motion-BHwmuFpx.js";function h({n,name:r,fx:t}){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:[n," // section"]}),e.jsx("h2",{className:"mt-1 text-[26px] font-semibold tracking-tight text-white",children:r}),e.jsx("p",{className:"mt-1 text-[13px] text-accent-300",children:t})]})}const x=[{id:"taomarketcap",title:"TaoMarketCap",tag:"Bittensor decision layer · 40k MAU",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 · web + mobile",img:"/projects/drippler-cover.webp"},{id:"metanova",title:"Metanova",tag:"Drug-discovery dashboard",img:"/projects/metanova/branding.webp?v=2"}];function k(){const n=j(),{scrollY:r}=v(),t=y(r),s=N(t,{stiffness:160,damping:40}),c=m(s,[-2500,0,2500],[10,0,-10],{clamp:!0}),i=m(s,[-2500,0,2500],[1.08,1,1.08],{clamp:!0}),a=["Complex","software,","made","readable."];return e.jsx(l.h3,{style:n?void 0:{skewX:c,scaleX:i},className:"flex flex-wrap justify-center gap-x-4 text-center text-[46px] font-semibold tracking-[-0.02em] text-white sm:text-[64px]",children:a.map((o,d)=>e.jsx("span",{className:"overflow-hidden py-1",children:e.jsx(l.span,{className:"inline-block",initial:{y:"110%"},animate:{y:0},transition:{duration:.9,delay:.1+d*.08,ease:[.16,1,.3,1]},children:o})},o))})}function C(){const[n,r]=u.useState(0),t=w(0),s=x.length,c=()=>{const i=t.get();i<-60?r(a=>Math.min(s-1,a+1)):i>60&&r(a=>Math.max(0,a-1)),t.set(0)};return e.jsxs("div",{className:"relative flex h-[420px] items-center justify-center",style:{perspective:1600},children:[e.jsx(l.div,{className:"absolute inset-0 z-30 cursor-grab active:cursor-grabbing",drag:"x",dragConstraints:{left:0,right:0},dragElastic:.2,style:{x:t},onDragEnd:c}),x.map((i,a)=>{const o=a-n,d=Math.abs(o);return d>2?null:e.jsxs(l.button,{onClick:()=>r(a),className:"absolute h-[280px] w-[440px] overflow-hidden rounded-2xl border border-white/10 shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)]",animate:{x:o*200,rotateY:o*-32,scale:1-d*.14,zIndex:20-d,opacity:1-d*.25,filter:`brightness(${1-d*.35})`},transition:{type:"spring",stiffness:260,damping:30},style:{transformStyle:"preserve-3d"},children:[e.jsx("img",{src:i.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-4 left-5 text-left",children:[e.jsx("div",{className:"font-semibold text-white",children:i.title}),e.jsx("div",{className:"text-[12px] text-white/60",children:i.tag})]})]},i.id)}),e.jsx("div",{className:"absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-2",children:x.map((i,a)=>e.jsx("button",{onClick:()=>r(a),className:`h-1.5 rounded-full transition-all ${a===n?"w-6 bg-accent-400":"w-1.5 bg-white/25"}`},a))})]})}function S(){const[n,r]=u.useState(null),t=x.find(s=>s.id===n);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"mx-auto grid max-w-[1200px] grid-cols-2 gap-4 px-6 sm:grid-cols-3",children:x.slice(0,5).map((s,c)=>e.jsxs(l.button,{layoutId:`card-${s.id}`,onClick:()=>r(s.id),className:`group relative h-[220px] overflow-hidden rounded-2xl border border-white/[0.08] ${c===0?"col-span-2":""}`,children:[e.jsx(l.img,{layoutId:`img-${s.id}`,src:s.img,alt:"",className:"absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"}),e.jsx("img",{src:s.img,alt:"","aria-hidden":!0,className:"absolute inset-0 h-full w-full object-cover opacity-0 mix-blend-screen transition-all duration-300 [transform:translateX(0)] group-hover:opacity-40 group-hover:[transform:translateX(-6px)] [filter:sepia(1)_saturate(6)_hue-rotate(-40

1deg)]"}),e.jsx("img",{src:s.img,alt:"","aria-hidden":!0,className:"absolute inset-0 h-full w-full object-cover opacity-0 mix-blend-screen transition-all duration-300 [transform:translateX(0)] group-hover:opacity-40 group-hover:[transform:translateX(6px)] [filter:sepia(1)_saturate(6)_hue-rotate(160deg)]"}),e.jsx("div",{className:"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"}),e.jsx(l.div,{layoutId:`title-${s.id}`,className:"absolute bottom-4 left-5 font-semibold text-white",children:s.title})]},s.id))}),e.jsx(b,{children:t&&e.jsx(l.div,{className:"fixed inset-0 z-[80] flex items-center justify-center p-6",initial:{background:"rgba(0,0,0,0)"},animate:{background:"rgba(0,0,0,0.7)"},exit:{background:"rgba(0,0,0,0)"},onClick:()=>r(null),children:e.jsxs(l.div,{layoutId:`card-${t.id}`,className:"relative w-full max-w-[720px] overflow-hidden rounded-3xl border border-white/10 bg-ink",onClick:s=>s.stopPropagation(),children:[e.jsx(l.img,{layoutId:`img-${t.id}`,src:t.img,alt:"",className:"h-[360px] w-full object-cover"}),e.jsxs("div",{className:"p-7",children:[e.jsx(l.div,{layoutId:`title-${t.id}`,className:"text-[24px] font-semibold text-white",children:t.title}),e.jsxs(l.p,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.15},className:"mt-2 text-[14px] leading-relaxed text-white/55",children:[t.tag,". The tile morphs into this detail via a shared-layout transition — the cover, title and card frame are one continuous element, not a crossfade."]})]}),e.jsx("button",{onClick:()=>r(null),className:"absolute right-4 top-4 grid h-9 w-9 place-items-center rounded-full bg-black/40 text-white backdrop-blur",children:"✕"})]})})})]})}const p=[{t:"Discover + Align",d:"Clarify users, data, constraints, and what 'success' means.",url:"app.ssych.dev/research"},{t:"Design + Validate",d:"Concepts → a UI system, pressure-tested with stakeholders.",url:"app.ssych.dev/prototype"},{t:"Ship + Iterate",d:"Handoff + QA in production, then iterate with real usage data.",url:"app.ssych.dev/metrics"}];function _(){const n=u.useRef(null),{scrollYProgress:r}=v({target:n,offset:["start start","end end"]}),[t,s]=u.useState(0);f(r,"change",i=>{s(Math.min(p.length-1,Math.floor(i*p.length*.999)))});const c=m(r,[0,1],["0%","100%"]);return e.jsx("div",{ref:n,className:"relative h-[300vh]",children:e.jsx("div",{className:"sticky top-0 flex h-screen items-center",children:e.jsxs("div",{className:"mx-auto grid w-full max-w-[1100px] grid-cols-1 items-center gap-10 px-6 lg:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("div",{className:"mb-6 h-px w-full bg-white/10",children:e.jsx(l.div,{style:{width:c},className:"h-px bg-accent-400"})}),p.map((i,a)=>e.jsxs("button",{onClick:()=>{var o;return(o=n.current)==null?void 0:o.scrollIntoView()},className:"block w-full py-4 text-left transition-opacity duration-300",style:{opacity:a===t?1:.32},children:[e.jsxs("div",{className:"font-mono text-[11px] text-accent-300",children:["0",a+1]}),e.jsx("h3",{className:"mt-1 text-[24px] font-semibold text-white",children:i.t}),e.jsx(b,{children:a===t&&e.jsx(l.p,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"mt-1 max-w-[420px] overflow-hidden text-[14px] text-white/55",children:i.d})})]},i.t))]}),e.jsxs("div",{className:"relative h-[300px] overflow-hidden rounded-2xl border border-white/10 bg-[#0b0b0b]",children:[e.jsxs("div",{className:"flex items-center gap-2 border-b border-white/[0.06] px-4 py-2.5",children:[e.jsx("span",{className:"h-2.5 w-2.5 rounded-full bg-white/15"}),e.jsx("span",{className:"h-2.5 w-2.5 rounded-full bg-white/15"}),e.jsx("span",{className:"h-2.5 w-2.5 rounded-full bg-white/15"}),e.jsx("div",{className:"ml-3 rounded-md bg-white/[0.04] px-3 py-1 text-[11px] text-white/40",children:p[t].url})]}),e.jsx(b,{mode:"wait",children:e.jsx(l.div,{initial:{opacity:0,scale:.98,filter:"blur(6px)"},animate:{opacity:1,scale:1,filter:"blur(0px)"},exit:{opacity:0,scale:1.02,filter:"blur(6px)"},transition:{duration:.4},className:"grid grid-cols-2 gap-3 p-5",children:Array.from({length:6}).map((i,a)=>e.jsxs("div",{className:"rounded-lg border border-white/[0.05] bg-white/[0.02] p-3",children:[e.jsx("div",{className:"h-2 w-1/2 roun

1ded bg-white/10"}),e.jsx("div",{className:"mt-2 h-2 w-3/4 rounded bg-white/[0.06]"}),e.jsx("div",{className:"mt-4 h-8 rounded",style:{background:`linear-gradient(90deg, rgba(90,170,255,${.15+t*.12}), transparent)`}})]},a))},t)})]})]})})})}function I(){const n=w(0),{scrollY:r}=v(),t=y(r),s=N(m(t,[-2e3,0,2e3],[-4,-1,2]),{stiffness:100,damping:40});f(s,"change",()=>{});const c=m(n,a=>`${a%50}%`);f(r,"change",()=>{n.set(n.get()+s.get())});const i=["Figma","Claude Code","React","Vite","Tailwind","Vercel","Framer","TypeScript","Motion"];return e.jsx("div",{className:"relative overflow-hidden py-6 [mask-image:linear-gradient(to_right,transparent,#000_8%,#000_92%,transparent)]",children:e.jsx(l.div,{style:{x:c},className:"flex whitespace-nowrap will-change-transform",children:[...i,...i,...i].map((a,o)=>e.jsxs("span",{className:"mx-6 text-[28px] font-semibold text-white/80",children:[a," ",e.jsx("span",{className:"text-accent-400",children:"·"})]},o))})})}function g({title:n,sub:r}){const t=j();return e.jsxs("div",{className:"relative overflow-hidden rounded-2xl p-px",children:[!t&&e.jsx(l.div,{"aria-hidden":!0,className:"absolute inset-[-40%] [background:conic-gradient(from_0deg,transparent_0deg,rgba(90,170,255,0.9)_60deg,transparent_140deg,transparent_360deg)]",animate:{rotate:360},transition:{duration:6,repeat:1/0,ease:"linear"}}),e.jsxs("div",{className:"relative rounded-2xl border border-white/[0.06] bg-[#0a0d14] p-6",children:[e.jsx("div",{className:"text-[17px] font-semibold text-white",children:n}),e.jsx("div",{className:"mt-1 text-[13px] text-white/45",children:r})]})]})}function V(){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 — v2"}),e.jsx("h1",{className:"mt-2 text-[34px] font-semibold tracking-tight",children:"Sections, cranked up"}),e.jsx("p",{className:"mt-3 max-w-[64ch] text-[15px] text-white/55",children:"The ambitious cut — shared-layout morphs, a 3D draggable coverflow, scroll-velocity kinetic type, a pinned scroll-scrub timeline, chromatic hovers and spinning conic borders. Drag the covers, click a tile, scroll the timeline slowly, and watch the marquee react to scroll speed."})]}),e.jsx(h,{n:"01",name:"Hero — kinetic type + 3D coverflow",fx:"Scroll-velocity skew/stretch headline · draggable 3D coverflow (drag or click)"}),e.jsx("div",{className:"mx-auto max-w-[1200px] px-6",children:e.jsxs("div",{className:"rounded-3xl border border-white/[0.08] bg-white/[0.015] py-14",children:[e.jsx(k,{}),e.jsx("div",{className:"mt-6",children:e.jsx(C,{})})]})}),e.jsx("div",{className:"h-28"}),e.jsx(h,{n:"02",name:"Portfolio — expand-to-fullscreen",fx:"Shared-layout tile → fullscreen morph (click) · chromatic RGB-split hover"}),e.jsx(S,{}),e.jsx("div",{className:"h-28"}),e.jsx(h,{n:"03",name:"Approach — pinned scroll-scrub",fx:"Section pins; the mock morphs through phases as you scroll (scrub the timeline)"}),e.jsx(_,{}),e.jsx("div",{className:"h-28"}),e.jsx(h,{n:"04",name:"Stack — velocity marquee + conic borders",fx:"Marquee reacts to scroll speed · spinning conic-gradient card borders"}),e.jsx(I,{}),e.jsxs("div",{className:"mx-auto mt-8 grid max-w-[1100px] grid-cols-1 gap-4 px-6 sm:grid-cols-3",children:[e.jsx(g,{title:"Figma → Code",sub:"design source of truth"}),e.jsx(g,{title:"Claude Code",sub:"AI pair designer + engineer"}),e.jsx(g,{title:"React · Vite · Tailwind",sub:"the stack I design in"})]}),e.jsx("div",{className:"h-32"})]})}export{g as ConicCard,C as Coverflow,S as ExpandableBento,k as KineticHeadline,_ as PinnedScrub,I as VelocityMarquee,V as default};