61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T38af,import { useEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; // Two pictures of the same size. The first is the print, the second is what the bead shows. const looks = [ { name: "Cobalt", src: "https://images.pexels.com/photos/30755158/pexels-photo-30755158.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with her hair bound into a tall stack of spheres, in a pale blue oversized shirt against a blue wall, one hand at her jaw", }, { name: "Tangerine", src: "https://images.pexels.com/photos/39325161/pexels-photo-39325161.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with cropped hair in an orange top and long white wrapped gloves against an orange wall", }, ]; /** Size of each drop as a share of the print's height. The first leads, the rest trail behind and melt back in. */ const DROPS = [0.15, 0.084, 0.068, 0.054, 0.043, 0.034]; /** How quickly each drop catches up. Lower numbers lag further, so a fast move strings the bead out. */ const PULL = [130, 62, 44, 31, 22, 15]; const VERT = `attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }`; const FRAG = `precision highp float; uniform vec2 u_res; uniform sampler2D u_a; uniform sampler2D u_b; uniform vec2 u_img; uniform vec3 u_drops[6]; uniform float u_time; uniform float u_swap; vec2 cover(vec2 uv, float img){ float A = u_res.x / u_res.y; vec2 t = uv; if (img > A) t.x = (uv.x - 0.5) * A / img + 0.5; else t.y = (uv.y - 0.5) * img / A + 0.5; return clamp(t, 0.0, 1.0); } // The bead is a sum of soft fields, one per drop. Where the sum passes 1 there is liquid. float field(vec2 p, float A, out vec2 grad){ float f = 0.0; grad = vec2(0.0); for (int i = 0; i < 6; i++){ vec2 d = p - vec2(u_drops[i].x * A, u_drops[i].y); float d2 = dot(d, d) + 0.00002; float r2 = u_drops[i].z * u_drops[i].z; f += r2 / d2; grad -= 2.0 * r2 * d / (d2 * d2); } return f; } vec3 outside(vec2 uv){ return mix(texture2D(u_a, cover(uv, u_img.x)).rgb, texture2D(u_b, cover(uv, u_img.y)).rgb, u_swap); } vec3 inside(vec2 uv){ return mix(texture2D(u_b, cover(uv, u_img.y)).rgb, texture2D(u_a, cover(uv, u_img.x)).rgb, u_swap); } void main(){ vec2 uv = vec2(gl_FragCoord.x / u_res.x, 1.0 - gl_FragCoord.y / u_res.y); float A = u_res.x / u_res.y; vec2 p = vec2(uv.x * A, uv.y); // A slow wobble so the outline never sits perfectly round. p += 0.006 * vec2(sin(p.y * 13.0 + u_time * 1.3), cos(p.x * 11.0 - u_time * 1.1)); vec2 g; float f = field(p, A, g); float gl = length(g) + 0.0001; vec2 out_ = -g / gl; vec2 light = normalize(vec2(-0.55, -0.83)); // The print, with the bead's shadow lying on it away from the light. vec2 gs; float fs = field(p + light * 0.022, A, gs); vec3 base = outside(uv); base *= 1.0 - 0.50 * smoothstep(0.62, 1.12, fs); // Light that has passed through the bead lands as a bright crescent just beyond it. vec2 gc; float fc = field(p + light * 0.006, A, gc); base += vec3(1.0, 0.96, 0.9) * 0.20 * smoothstep(0.90, 1.0, fc) * (1.0 - smoothstep(1.0, 1.05, f)) * max(dot(out_, -light), 0.0); // Inside: 0 at the rim, 1 where the dome is flat on top. float k = clamp((f - 1.0) / 1.6, 0.0, 1.0); float steep = pow(1.0 - k, 2.4); vec2 lens = out_ * steep; vec2 pull = vec2(lens.x / A, lens.y); vec3 seen; seen.r = inside(uv - pull * 0.060).r; seen.g = inside(uv - pull * 0.065).g; seen.b = inside(uv - pull * 0.070).b; // The far side of a drop glows and the side nearest the light is shaded. seen *= 1.0 + 0.55 * steep * dot(out_, -light); seen += vec3(1.0) * 0.16 * pow(1.0 - k, 7.0); // Two reflections of the lamp: a hard one near the rim and a soft bounce opposite. vec3 n = normalize(vec3(lens * 1.5, 1.0)); float hit = max(dot(n, normalize(vec3(light * 1.05, 0.72))), 0.0); seen += vec3(1.0) * smoothstep(0.972, 0.992, hit) * 0.95; seen += vec3(1.0) * pow(hit, 9.0) * 0.16; // A long soft streak of the studio window curving round the shoulder of the bead. float facing = dot(out_, light); float band = smoothstep(0.30, 0.46, steep) * (1.0 - smoothstep(0.50, 0.74, steep)); seen += vec3(1.0) * band * smoothstep(0.45, 0.95, facing) * 0.34; float bounce = max(dot(n, normalize(vec3(-light * 1.2, 0.6))), 0.0); seen += vec3(1.0, 0.97, 0.92) * smoothstep(0.93, 0.99, bounce) * 0.22; float edge = gl * 1.6 / u_res.y; float cut = smoothstep(1.0 - edge, 1.0 + edge, f); // A hairline of dark where the liquid meets the paper. base *= 1.0 - 0.35 * smoothstep(1.0 - edge * 5.0, 1.0, f) * (1.0 - cut); gl_FragColor = vec4(mix(base, seen, cut), 1.0); }`; export default function PortraitPrintWithALiquidGlassBeadThatChasesThePointerAndShowsASecondPhotograph() { const reduce = useReducedMotion(); const frame = useRef(null); const canvas = useRef(null); const first = useRef(null); const second = useRef(null); /** Where the bead is heading (0 to 1 each way) and when a person last steered it. */ const aim = useRef({ x: 0.6, y: 0.36, at: -1e6 }); const flip = useRef(0); const [live, setLive] = useState(false); const [swapped, setSwapped] = useState(false); useEffect(() => { flip.current = swapped ? 1 : 0; }, [swapped]); useEffect(() => { const el = frame.current; const cv = canvas.current; const one = first.current; const two = second.current; if (reduce || !el || !cv || !one || !two) return; const gl = cv.getContext("webgl", { antialias: false, alpha: false }); if (!gl) return; const compile = (type: number, source: string) => { const shader = gl.createShader(type)!; gl.shaderSource(shader, source); gl.compileShader(shader); return shader; }; const program = gl.createProgram()!; gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return; gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW); const at = gl.getAttribLocation(program, "a"); gl.enableVertexAttribArray(at); gl.vertexAttribPointer(at, 2, gl.FLOAT, false, 0, 0); const u = (name: string) => gl.getUniformLocation(program, name); gl.uniform1i(u("u_a"), 0); gl.uniform1i(u("u_b"), 1); const uni = { res: u("u_res"), img: u("u_img"), drops: u("u_drops[0]"), time: u("u_time"), swap: u("u_swap") }; const n = DROPS.length; const pos = new Float32Array(n * 2); const vel = new Float32Array(n * 2); const packed = new Float32Array(n * 3); for (let i = 0; i < n; i++) pos.set([aim.current.x, aim.current.y], i * 2); let ready = false; let visible = true; let raf = 0; let last = 0; let swap = flip.current; const started = performance.now(); const upload = () => { if (ready || !one.complete || !two.complete || !one.naturalWidth || !two.naturalWidth) return; try { [one, two].forEach((img, unit) => { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, gl.createTexture()); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img); }); gl.uniform2f(uni.img, one.naturalWidth / one.naturalHeight, two.naturalWidth / two.naturalHeight); ready = true; setLive(true); } catch { // A picture could not be read into the shader: the still version underneath stays on show. ready = false; } }; const resize = () => { const ratio = Math.min(window.devicePixelRatio || 1, 2); cv.width = Math.max(1, Math.round(el.clientWidth * ratio)); cv.height = Math.max(1, Math.round(el.clientHeight * ratio)); gl.viewport(0, 0, cv.width, cv.height); }; const loop = (stamp: number) => { if (ready) { const t = (stamp - started) / 1000; const dt = Math.min(last ? (stamp - last) / 1000 : 0.016, 0.033); last = stamp; const A = cv.width / cv.height; // With nobody steering, the bead wanders the print in a slow, uneven loop. let tx = aim.current.x; let ty = aim.current.y; if (stamp - aim.current.at > 2200) { tx = 0.5 + 0.25 * Math.sin(t * 0.9 + 0.4) + 0.05 * Math.sin(t * 2.3); ty = 0.42 + 0.22 * Math.sin(t * 0.63 + 1.9) + 0.04 * Math.cos(t * 1.9); } for (let i = 0; i < n; i++) { // Each trailing drop orbits a little way off the one ahead, which keeps the merged outline lobed. const reach = i === 0 ? 0 : 0.034 + i * 0.006; const turn = t * (0.7 + i * 0.23) + i * 2.1; const gx = i === 0 ? tx : pos[(i - 1) * 2] + (Math.cos(turn) * reach) / A; const gy = i === 0 ? ty : pos[(i - 1) * 2 + 1] + Math.sin(turn) * reach; const k = PULL[i]; const drag = 2 * Math.sqrt(k) * (i === 0 ? 0.62 : 0.8); vel[i * 2] += ((gx - pos[i * 2]) * k - vel[i * 2] * drag) * dt; vel[i * 2 + 1] += ((gy - pos[i * 2 + 1]) * k - vel[i * 2 + 1] * drag) * dt; pos[i * 2] += vel[i * 2] * dt; pos[i * 2 + 1] += vel[i * 2 + 1] * dt; packed.set([pos[i * 2], pos[i * 2 + 1], DROPS[i]], i * 3); } swap += (flip.current - swap) * Math.min(1, dt * 7); gl.uniform2f(uni.res, cv.width, cv.height); gl.uniform3fv(uni.drops, packed); gl.uniform1f(uni.time, t); gl.uniform1f(uni.swap, swap); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } raf = visible && !document.hidden ? requestAnimationFrame(loop) : 0; }; const wake = () => { if (!raf && visible && !document.hidden) { last = 0; raf = requestAnimationFrame(loop); } }; const ro = new ResizeObserver(resize); ro.observe(el); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); io.observe(el); document.addEventListener("visibilitychange", wake); one.addEventListener("load", upload); two.addEventListener("load", upload); upload(); resize(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); one.removeEventListener("load", upload); two.removeEventListener("load", upload); }; }, [reduce]); function steer(e: ReactPointerEvent) { const r = e.currentTarget.getBoundingClientRect(); aim.current = { x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height, at: performance.now() }; } /** Arrow keys roll the bead. Enter and Space, like a click, swap the two pictures. */ function onKey(e: ReactKeyboardEvent) { const move: Record = { ArrowLeft: [-0.08, 0], ArrowRight: [0.08, 0], ArrowUp: [0, -0.07], ArrowDown: [0, 0.07] }; const by = move[e.key]; if (!by) return; e.preventDefault(); const a = aim.current; aim.current = { x: Math.min(0.9, Math.max(0.1, a.x + by[0])), y: Math.min(0.9, Math.max(0.1, a.y + by[1])), at: performance.now() + 4000 }; } const [under, over] = swapped ? [looks[1], looks[0]] : looks; return (

{under.name} over {over.name}

Click the print to swap

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/portrait-print-with-a-liquid-glass-bead-that-chases-the-pointer-and-shows-a-second-photograph.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]