https://ssicevs.com/assets/InteractionsLab-BusA0y0a.js

1import{r as f,j as s}from"./metal-fx-C6GZ_SKA.js";import{d as L,r as V,p as Y,S as $}from"./shader-utils-eHH17Yn4.js";import{fp as M,fh as O,eT as I,fn as G,fr as X}from"./index-D1yBc__G.js";import"./motion-BHwmuFpx.js";const B={fit:"contain",scale:1,rotation:0,offsetX:0,offsetY:0,originX:.5,originY:.5,worldWidth:0,worldHeight:0},P={none:0,contain:1,cover:2},k={maxColorCount:10},z=`#version 300 es
2precision mediump float;
3
4uniform float u_time;
5
6uniform vec4 u_colors[${k.maxColorCount}];
7uniform float u_colorsCount;
8
9uniform float u_distortion;
10uniform float u_swirl;
11uniform float u_grainMixer;
12uniform float u_grainOverlay;
13
14in vec2 v_objectUV;
15out vec4 fragColor;
16
17${L}
18${V}
19${Y}
20
21float valueNoise(vec2 st) {
22  vec2 i = floor(st);
23  vec2 f = fract(st);
24  float a = hash21(i);
25  float b = hash21(i + vec2(1.0, 0.0));
26  float c = hash21(i + vec2(0.0, 1.0));
27  float d = hash21(i + vec2(1.0, 1.0));
28  vec2 u = f * f * (3.0 - 2.0 * f);
29  float x1 = mix(a, b, u.x);
30  float x2 = mix(c, d, u.x);
31  return mix(x1, x2, u.y);
32}
33
34float noise(vec2 n, vec2 seedOffset) {
35  return valueNoise(n + seedOffset);
36}
37
38vec2 getPosition(int i, float t) {
39  float a = float(i) * .37;
40  float b = .6 + fract(float(i) / 3.) * .9;
41  float c = .8 + fract(float(i + 1) / 4.);
42
43  float x = sin(t * b + a);
44  float y = cos(t * c + a * 1.5);
45
46  return .5 + .5 * vec2(x, y);
47}
48
49void main() {
50  vec2 uv = v_objectUV;
51  uv += .5;
52  vec2 grainUV = uv * 1000.;
53
54  float grain = noise(grainUV, vec2(0.));
55  float mixerGrain = .4 * u_grainMixer * (grain - .5);
56
57  const float firstFrameOffset = 41.5;
58  float t = .5 * (u_time + firstFrameOffset);
59
60  float radius = smoothstep(0., 1., length(uv - .5));
61  float center = 1. - radius;
62  for (float i = 1.; i <= 2.; i++) {
63    uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));
64    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));
65  }
66
67  vec2 uvRotated = uv;
68  uvRotated -= vec2(.5);
69  float angle = 3. * u_swirl * radius;
70  uvRotated = rotate(uvRotated, -angle);
71  uvRotated += vec2(.5);
72
73  vec3 color = vec3(0.);
74  float opacity = 0.;
75  float totalWeight = 0.;
76
77  for (int i = 0; i < ${k.maxColorCount}; i++) {
78    if (i >= int(u_colorsCount)) break;
79
80    vec2 pos = getPosition(i, t) + mixerGrain;
81    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
82    float opacityFraction = u_colors[i].a;
83
84    float dist = length(uvRotated - pos);
85
86    dist = pow(dist, 3.5);
87    float weight = 1. / (dist + 1e-3);
88    color += colorFraction * weight;
89    opacity += opacityFraction * weight;
90    totalWeight += weight;
91  }
92
93  color /= max(1e-4, totalWeight);
94  opacity /= max(1e-4, totalWeight);
95
96  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
97  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
98  grainOverlay = pow(grainOverlay, 1.3);
99
100  float grainOverlayV = grainOverlay * 2. - 1.;
101  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
102  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
103  grainOverlayStrength = pow(grainOverlayStrength, .8);
104  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
105
106  opacity += .5 * grainOverlayStrength;
107  opacity = clamp(opacity, 0., 1.);
108
109  fragColor = vec4(color, opacity);
110}
111`;function q(e){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:_;if(typeof e!="string")return _;let t,n,a,o=1;if(e.startsWith("#"))[t,n,a,o]=Q(e);else if(e.startsWith("rgb")){const r=K(e);if(r===null)return _;[t,n,a,o]=r}else if(e.startsWith("hsl")){const r=Z(e);if(r===null)return _;[t,n,a,o]=J(r)}else return console.error("Unsupported color format",e),_;return[A(t,0,1),A(n,0,1),A(a,0,1),A(o,0,1)]}function Q(e){if(e=e.replace(/^#/,""),(e.length===3||e.length===4)&&(e=e.split("").map(r=>r+r).join("")),e.length===6&&(e=e+"ff"),!/^[0-9a-f]{8}$/i.test(e))return console.warn("Invalid hex color"),_;const t=parseInt(e.slice(0,2),16)/255,n=parseInt(e.slice(2,4),16)/255,a=parseInt(e.slice(4,6),16)/255,o=parseInt(e.slice(6,8),16)/255;return[t,n,a,o]}function K(e){const t=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return t?[parseInt(t[1]??"0")/255,parseInt(t[2]??"0")/255,parseInt(t[3]??"0")/255,t[4]===void 0?1:parseFloat(t[4])]:null}function Z(e){const t=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return t?[parseInt(t[1]??"0"),parseInt(t[2]??"0"),parseInt(t[3]??"0"),t[4]===void 0?1:parseFloat(t[4])]:null}function J(e){const[t,n,a,o]=e,r=t/360,i=n/100,l=a/100;let c,d,u;if(n===0)c=d=u=l;else{const h=(x,j,p)=>(p<0&&(p+=1),p>1&&(p-=1),p<.16666666666666666?x+(j-x)*6*p:p<.5?j:p<.6666666666666666?x+(j-x)*(.6666666666666666-p)*6:x),b=l<.5?l*(1+i):l+i-l*i,y=2*l-b;c=h(y,b,r+1/3),d=h(y,b,r),u=h(y,b,r-1/3)}return[c,d,u,o]}

111const A=(e,t,n)=>Math.min(Math.max(e,t),n),_=[.5,.5,.5,1],ee="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";function te(e){const t=f.useRef(void 0),n=f.useCallback(a=>{const o=e.map(r=>{if(r!=null){if(typeof r=="function"){const i=r,l=i(a);return typeof l=="function"?l:()=>{i(null)}}return r.current=a,()=>{r.current=null}}});return()=>{o.forEach(r=>r==null?void 0:r())}},e);return f.useMemo(()=>e.every(a=>a==null)?null:a=>{t.current&&(t.current(),t.current=void 0),a!=null&&(t.current=n(a))},e)}function E(e){if(e.naturalWidth<1024&&e.naturalHeight<1024){if(e.naturalWidth<1||e.naturalHeight<1)return;const t=e.naturalWidth/e.naturalHeight;e.width=Math.round(t>1?1024*t:1024),e.height=Math.round(t>1?1024:1024/t)}}async function T(e){const t={},n=[],a=r=>{try{return r.startsWith("/")||new URL(r),!0}catch{return!1}},o=r=>{try{return r.startsWith("/")?!1:new URL(r,window.location.origin).origin!==window.location.origin}catch{return!1}};return Object.entries(e).forEach(([r,i])=>{if(typeof i=="string"){const l=i||ee;if(!a(l)){console.warn(`Uniform "${r}" has invalid URL "${l}". Skipping image loading.`);return}const c=new Promise((d,u)=>{const h=new Image;o(l)&&(h.crossOrigin="anonymous"),h.onload=()=>{E(h),t[r]=h,d()},h.onerror=()=>{console.error(`Could not set uniforms. Failed to load image at ${l}`),u()},h.src=l});n.push(c)}else if(i instanceof HTMLImageElement){const l=i.decode().then(()=>{E(i),t[r]=i});n.push(l)}else t[r]=i}),await Promise.all(n),t}const H=f.forwardRef(function({fragmentShader:t,uniforms:n,webGlContextAttributes:a,speed:o=0,frame:r=0,width:i,height:l,minPixelRatio:c,maxPixelCount:d,mipmaps:u,style:h,...b},y){const[x,j]=f.useState(!1),p=f.useRef(null),v=f.useRef(null),R=f.useRef(a);f.useEffect(()=>((async()=>{const N=await T(n);p.current&&!v.current&&(v.current=new $(p.current,t,N,R.current,o,r,c,d,u),j(!0))})(),()=>{var N;(N=v.current)==null||N.dispose(),v.current=null}),[t]),f.useEffect(()=>{let g=!1;return(async()=>{var S;const W=await T(n);g||(S=v.current)==null||S.setUniforms(W)})(),()=>{g=!0}},[n,x]),f.useEffect(()=>{var g;(g=v.current)==null||g.setSpeed(o)},[o,x]),f.useEffect(()=>{var g;(g=v.current)==null||g.setMaxPixelCount(d)},[d,x]),f.useEffect(()=>{var g;(g=v.current)==null||g.setMinPixelRatio(c)},[c,x]),f.useEffect(()=>{var g;(g=v.current)==null||g.setFrame(r)},[r,x]);const D=te([p,y]);return s.jsx("div",{ref:D,style:i!==void 0||l!==void 0?{width:typeof i=="string"&&isNaN(+i)===!1?+i:i,height:typeof l=="string"&&isNaN(+l)===!1?+l:l,...h}:h,...b})});H.displayName="ShaderMount";function se(e,t){var n,a,o;if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const r in e){if(r==="colors"){const i=Array.isArray(e.colors),l=Array.isArray(t.colors);if(!i||!l){if(Object.is(e.colors,t.colors)===!1)return!1;continue}if(((n=e.colors)==null?void 0:n.length)!==((a=t.colors)==null?void 0:a.length)||!((o=e.colors)!=null&&o.every((c,d)=>{var u;return c===((u=t.colors)==null?void 0:u[d])})))return!1;continue}if(Object.is(e[r],t[r])===!1)return!1}return!0}const m={params:{...B,speed:1,frame:0,colors:["#e0eaff","#241d9a","#f75092","#9f50d3"],distortion:.8,swirl:.1,grainMixer:0,grainOverlay:0}},re=f.memo(function({speed:t=m.params.speed,frame:n=m.params.frame,colors:a=m.params.colors,distortion:o=m.params.distortion,swirl:r=m.params.swirl,grainMixer:i=m.params.grainMixer,grainOverlay:l=m.params.grainOverlay,fit:c=m.params.fit,rotation:d=m.params.rotation,scale:u=m.params.scale,originX:h=m.params.originX,originY:b=m.params.originY,offsetX:y=m.params.offsetX,offsetY:x=m.params.offsetY,worldWidth:j=m.params.worldWidth,worldHeight:p=m.params.worldHeight,...v}){const R={u_colors:a.map(q),u_colorsCount:a.length,u_distortion:o,u_swirl:r,u_grainMixer:i,u_grainOverlay:l,u_fit:P[c],u_rotation:d,u_scale:u,u_offsetX:y,u_offsetY:x,u_originX:h,u_originY:b,u_worldWidth:j,u_worldHeight:p};return s.jsx(H,{...v,speed:t,frame:n,fragmentShader:z,uniforms:R})},se);function w({n:e,title:t,source:n,section:a,children:o}){return s.jsx("section",{className:"border-t border-white/[0.07] py-16",children:s.jsxs("div",{className:"mx-auto max-w-[1080px] px-6",children:[s.jsxs("div",{className:"mb-6 flex flex-wrap items-baseline justify-between gap-3",children:[s.jsxs("div",{children:[s.jsx("span",{className:"font-mono text-[11px] tracking-[0.2em] text-white/35",children:e}),s.jsx("h2",{className:"mt-1 text-[22px] font-semibold tracking-tight text-white",children:t})]}),s.jsxs("div",{className:"text-right text-[12px]",children:[s.jsx("div",{className:"text-accent-300",children:n}),s.jsxs("div",{className:"text-white/40",children:["→ ",a]})]})]}),s.jsx("div",{className:"overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.015]",children:o})]})})}function ae(){return s.jsxs("div",{className:"relative h-[340px]",children:[s.jsx(re,{colors:["#02040a","#0b1e3a","#1e4e8c","#5aaaff","#02040a"],speed:.25,style:{position:"absolute",inset:0,width:"100%",height:"100%"}}),s.jsx("div",{className:"pointer-events-none absolute inset-0 bg-[radial-gradient(120%_120%_at_50%_120%,transparent_40%,#02040a)]"}),s.jsxs("div",{className:"relative flex h-full flex-col items-center justify-center text-center",children:[s.jsx("h3",{className:"text-[34px] font-semibold tracking-[-0.02em] text-white",children:"Complex software, made readable."}),s.jsx("p",{className:"mt-2 text-[14px] text-white/55",children:"A living WebGL-alternative gradient (HTML canvas, zero deps)"})]})]})}function C({img:e,title:t}){const n=f.useRef(null),a=M(O(0),{stiffness:150,damping:18}),o=M(O(0),{stiffness:150,damping:18}),r=i=>{const c=n.current.getBoundingClientRect(),d=(i.clientX-c.left)/c.width-.5,u=(i.clientY-c.top)/c.height-.5;a.set(-u*14),o.set(d*14)};return s.jsx("div",{ref:n,onMouseMove:r,onMouseLeave:()=>{a.set(0),o.set(0)},className:"group relative",style:{perspective:1e3},children:s.jsxs(I.div,{style:{rotateX:a,rotateY:o,transformStyle:"preserve-3d"},className:"relative overflow-hidden rounded-xl border border-white/10",children:[s.jsx("img",{src:e,alt:"",className:"h-[240px] w-full object-cover"}),s.jsx("div",{className:"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"}),s.jsx("div",{style:{transform:"translateZ(50px)"},className:"absolute bottom-4 left-4 font-semibold text-white",children:t}),s.jsx("div",{className:"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 [background:radial-gradient(300px_at_var(--mx,50%)_var(--my,50%),rgba(255,255,255,0.12),transparent_70%)]"})]})})}function ne(){const e=t=>{const n=t.currentTarget,a=n.getBoundingClientRect();n.style.setProperty("--mx",`${t.clientX-a.left}px`),n.style.setProperty("--my",`${t.clientY-a.top}px`)};return s.jsxs("div",{onMouseMove:e,className:"group relative grid h-[280px] grid-cols-3 gap-3 p-6 [--mx:50%] [--my:50%]",children:[s.jsx("div",{className:"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 [background:radial-gradient(280px_at_var(--mx)_var(--my),rgba(90,170,255,0.14),transparent_70%)]"}),["Readability audit","Dashboard design","Design systems","Prototyping","Design sprints","Handoff & QA"].map(t=>s.jsx("div",{className:"relative flex items-center justify-center rounded-xl border border-white/[0.08] bg-white/[0.02] text-[13px] text-white/70",children:t},t))]})}const F="!<>-_\\/[]{}—=+*^?#________";function ie({text:e}){const[t,n]=f.useState(e),a=f.useRef(0),o=()=>{const r=[...e].map(()=>({s:Math.floor(Math.random()*10),e:Math.floor(Math.random()*10)+10}));let i=0;cancelAnimationFrame(a.current);const l=()=>{let c="",d=0;for(let u=0;u<e.length;u++)i>=r[u].e?(c+=e[u],d++):i>=r[u].s?c+=F[Math.floor(Math.random()*F.length)]:c+=e[u];n(c),i++,d<e.length&&(a.current=requestAnimationFrame(l))};l()};return f.useEffect(()=>()=>cancelAnimationFrame(a.current),[]),s.jsx("span",{onMouseEnter:o,className:"cursor-default font-mono text-[15px] text-white",children:t})}function oe(){const e=["Figma","Claude Code","React · Vite · Tailwind","Vercel","Framer"];return s.jsxs("div",{className:"flex flex-wrap gap-x-8 gap-y-4 p-8",children:[e.map(t=>s.jsx(ie,{text:t},t)),s.jsx("span",{className:"w-full text-[12px] text-white/35",children:"hover a tool to decode it"})]})}function U({children:e}){const t=f.useRef(null),n=M(O(0),{stiffness:200,damping:15}),a=M(O(0),{stiffness:200,damping:15}),o=r=>{const i=t.current.getBoundingClientRect();n.set((r.clientX-(i.left+i.width/2))*.4),a.set((r.clientY-(i.top+i.height/2))*.4)};return s.jsx(I.div,{ref:t,onMouseMove:o,onMouseLeave:()=>{n.set(0),a.set(0)},style:{x:n,y:a},className:"inline-block",children:e})}function le(){return s.jsxs("div",{className:"flex h-[220px] items-center justify-center gap-8",children:[s.jsx(U,{children:s.jsx("button",{className:"rounded-full bg-white px-7 py-3 text-[15px] font-semibold text-ink",children:"Book a 15-min call →"})}),s.jsx(U,{children:s.jsx("button",{className:"rounded-full border border-white/20 px-7 py-3 text-[15px] font-medium text-white",children:"See work"})})]})}function ce(){const e=f.useRef(null),{scrollYProgress:t}=G({target:e,offset:["start 0.6","end 0.4"]}),n=M(t,{stiffness:120,damping:24}),a=X(n,[0,1],[0,1]),o=[{t:"Discover + Align",d:"Clarify users, data, constraints, and what 'success' means."},{t:"Design + Validate",d:"From concepts to a UI system, pressure-tested with stakeholders."},{t:"Ship + Iterate",d:"Handoff + QA in production, then iterate with real usage data."}];return s.jsxs("div",{ref:e,className:"relative py-10 pl-14 pr-8",children:[s.jsx("div",{className:"absolute left-8 top-10 bottom-10 w-px bg-white/10"}),s.jsx(I.div,{style:{scaleY:a,originY:0},className:"absolute left-8 top-10 bottom-10 w-px bg-gradient-to-b from-accent-300 to-accent-500"}),o.map((r,i)=>s.jsxs("div",{className:"relative mb-12 last:mb-0",children:[s.jsx("span",{className:"absolute -left-[26px] top-1 h-3 w-3 rounded-full border-2 border-accent-400 bg-ink"}),s.jsxs("div",{className:"font-mono text-[11px] text-white/35",children:["0",i+1]}),s.jsx("h3",{className:"mt-1 text-[18px] font-semibold text-white",children:r.t}),s.jsx("p",{className:"mt-1 max-w-[520px] text-[14px] text-white/55",children:r.d})]},r.t))]})}function he(){return s.jsxs("div",{className:"min-h-screen bg-ink text-white",children:[s.jsxs("header",{className:"mx-auto max-w-[1080px] px-6 pt-24 pb-4",children:[s.jsx("span",{className:"font-mono text-[11px] tracking-[0.2em] text-white/35",children:"// interactions lab"}),s.jsx("h1",{className:"mt-2 text-[34px] font-semibold tracking-tight",children:"Candidate interactions"}

111),s.jsx("p",{className:"mt-3 max-w-[62ch] text-[15px] text-white/55",children:"Clean-room previews of the interactions surfaced by the research, built in the site’s tokens with motion/react. Each is isolated here so a winner ports straight into its real section. Hover / scroll to feel them."})]}),s.jsx(w,{n:"01",title:"Living mesh gradient",source:"Paper Shaders (Apache-2.0)",section:"HERO background",children:s.jsx(ae,{})}),s.jsx(w,{n:"02",title:"3D tilt cards",source:"Aceternity 3D Card (technique)",section:"PORTFOLIO bento tiles",children:s.jsxs("div",{className:"grid grid-cols-1 gap-4 p-6 sm:grid-cols-3",children:[s.jsx(C,{img:"/projects/taomarketcap-cover.webp",title:"TaoMarketCap"}),s.jsx(C,{img:"/projects/celium-thumbnail.webp",title:"Celium"}),s.jsx(C,{img:"/projects/desearch-thumbnail.webp",title:"Desearch"})]})}),s.jsx(w,{n:"03",title:"Cursor spotlight",source:"Motion Primitives Spotlight (MIT)",section:"SERVICES / cards",children:s.jsx(ne,{})}),s.jsx(w,{n:"04",title:"Text scramble",source:"Motion Primitives Text Scramble (MIT)",section:"STACK & TOOLS labels",children:s.jsx(oe,{})}),s.jsx(w,{n:"05",title:"Magnetic buttons",source:"Motion Primitives Magnetic (MIT)",section:"Hero / Footer CTAs",children:s.jsx(le,{})}),s.jsx(w,{n:"06",title:"Tracing beam",source:"Aceternity Tracing Beam (technique)",section:"APPROACH phases",children:s.jsx(ce,{})}),s.jsx("div",{className:"h-24"})]})}export{he as default};