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:T3f65,import { useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; // The print lying in the tray. Swap the address and the alt text together. const PHOTO = "https://images.pexels.com/photos/35024256/pexels-photo-35024256.jpeg?auto=compress&cs=tinysrgb&w=900"; const PHOTO_ALT = "A person in a pale yellow suit and a wide flat-brimmed black hat, standing against a deep red wall"; const tray = { label: "Tray 3", bath: "Wash, 20 °C", action: "Let a drop fall" }; // Water surface grid. More cells give finer rings and cost more per frame. const GW = 168; const GH = 210; /** How much of its height a wave keeps each step: closer to 1 means the water rings for longer. */ const CALM = 0.983; /** Tilt of the print in the tray, in radians. Keep the still print's rotate() in step with it. */ const TILT = -0.061; 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_photo; uniform sampler2D u_wave; uniform float u_img; uniform float u_tilt; float box(vec2 p, vec2 b, float r){ vec2 d = abs(p) - b + r; return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - r; } float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } // What lies on the bottom of the tray at a point: the enamel floor, the paper border or the picture. vec3 bed(vec2 uv){ float A = u_res.x / u_res.y; vec2 q = (uv - 0.5) * vec2(A, 1.0); float c = cos(-u_tilt), s = sin(-u_tilt); vec2 l = vec2(c * q.x - s * q.y, s * q.x + c * q.y); vec2 half_ = vec2(0.36 * A, 0.45 * A); float edge = 0.03 * A; vec3 enamel = vec3(0.965, 0.962, 0.945); float wall = box(q, vec2(0.5 * A, 0.5), 0.07); enamel *= 0.90 + 0.10 * smoothstep(0.0, -0.10, wall); enamel -= (hash(floor(uv * u_res * 0.5)) - 0.5) * 0.012; float shade = box(l - vec2(0.010, 0.016), half_, 0.004); enamel *= 1.0 - 0.42 * (1.0 - smoothstep(-0.012, 0.040, shade)); vec2 inner = half_ - edge; vec2 t = l / inner * 0.5 + 0.5; float ia = inner.x / inner.y; if (u_img > ia) t.x = (t.x - 0.5) * ia / u_img + 0.5; else t.y = (t.y - 0.5) * u_img / ia + 0.5; vec3 photo = texture2D(u_photo, clamp(t, 0.0, 1.0)).rgb; // A wet print is a touch deeper and richer than a dry one. photo = pow(photo, vec3(1.08)); float px = 1.5 / u_res.y; vec3 paper = vec3(0.965, 0.96, 0.94) - (hash(floor(uv * u_res * 0.7)) - 0.5) * 0.015; vec3 print = mix(photo, paper, smoothstep(-px, px, box(l, inner, 0.0))); return mix(print, enamel, smoothstep(-px, px, box(l, half_, 0.004))); } 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; vec4 w = texture2D(u_wave, uv); vec2 slope = (w.xy - 0.50196) * 2.0; float bend = (w.z - 0.50196) * 2.0; // Looking down through the surface: each colour is bent a little differently. vec3 col; col.r = bed(uv + slope * 0.040).r; col.g = bed(uv + slope * 0.043).g; col.b = bed(uv + slope * 0.046).b; col *= vec3(0.955, 0.982, 1.0); // Crests focus the light on the bottom and troughs spread it. col *= 1.0 + pow(clamp(bend, 0.0, 1.0), 1.4) * 0.95 - clamp(-bend, 0.0, 1.0) * 0.22; // The window above the bench, mirrored in the surface and torn apart by every wave. vec2 r = (uv - vec2(0.26, 0.15)) * vec2(A, 1.0) + slope * 0.55; r = vec2(r.x + r.y * 0.30, r.y); float pane = 1.0 - smoothstep(-0.03, 0.05, box(r, vec2(0.17, 0.085), 0.03)); col = mix(col, vec3(1.0, 0.995, 0.98), pane * 0.36); // Sharp glints where the surface tips toward the light. vec3 n = normalize(vec3(-slope * 3.2, 1.0)); float glint = pow(max(dot(n, normalize(vec3(-0.34, -0.42, 0.84))), 0.0), 60.0); col += glint * 0.32; gl_FragColor = vec4(col, 1.0); }`; export default function PhotographInAnEnamelDarkroomTrayUnderWaterThatRipplesWhereThePointerDrags() { const reduce = useReducedMotion(); const well = useRef(null); const canvas = useRef(null); const image = useRef(null); /** Pushes the water down at a point of the tray (0 to 1 each way). Set once the shader is running. */ const poke = useRef<((x: number, y: number, radius: number, amount: number) => void) | null>(null); const hand = useRef({ x: 0, y: 0, down: false, at: 0 }); const [wet, setWet] = useState(false); const [drops, setDrops] = useState(0); useEffect(() => { const el = well.current; const cv = canvas.current; const img = image.current; if (reduce || !el || !cv || !img) 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_photo"), 0); gl.uniform1i(u("u_wave"), 1); gl.uniform1f(u("u_tilt"), TILT); const uRes = u("u_res"); const texture = (unit: number) => { 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); }; // The water: two height fields, this step and the one before, on a small grid. let now = new Float32Array(GW * GH); let before = new Float32Array(GW * GH); const pixels = new Uint8Array(GW * GH * 4); texture(1); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, GW, GH, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels); const push = (x: number, y: number, radius: number, amount: number) => { const cx = x * GW; const cy = y * GH; const reach = Math.ceil(radius * 2.4); for (let j = Math.max(1, Math.floor(cy - reach)); j <= Math.min(GH - 2, Math.ceil(cy + reach)); j++) { for (let i = Math.max(1, Math.floor(cx - reach)); i <= Math.min(GW - 2, Math.ceil(cx + reach)); i++) { const d = ((i - cx) * (i - cx) + (j - cy) * (j - cy)) / (radius * radius); now[j * GW + i] += amount * Math.exp(-d); } } }; const step = () => { for (let j = 0; j < GH; j++) { const row = j * GW; const up = j > 0 ? row - GW : row; const down = j < GH - 1 ? row + GW : row; for (let i = 0; i < GW; i++) { const left = i > 0 ? i - 1 : i; const right = i < GW - 1 ? i + 1 : i; // Each cell heads for the average of its neighbours and overshoots. The walls of the tray send waves back. before[row + i] = ((now[row + left] + now[row + right] + now[up + i] + now[down + i]) * 0.5 - before[row + i]) * CALM; } } const swap = now; now = before; before = swap; }; const pack = (v: number) => (v > 127 ? 255 : v < -127 ? 1 : 128 + v); const encode = () => { for (let j = 0; j < GH; j++) { const row = j * GW; const up = j > 0 ? row - GW : row; const down = j < GH - 1 ? row + GW : row; for (let i = 0; i < GW; i++) { const left = now[row + (i > 0 ? i - 1 : i)]; const right = now[row + (i < GW - 1 ? i + 1 : i)]; const o = (row + i) * 4; pixels[o] = pack((left - right) * 330); pixels[o + 1] = pack((now[up + i] - now[down + i]) * 330); pixels[o + 2] = pack((now[row + i] * 4 - left - right - now[up + i] - now[down + i]) * 700); pixels[o + 3] = 255; } } }; let ready = false; let visible = true; let raf = 0; let last = 0; let owed = 0; let nextDrip = 1.9; const started = performance.now(); const upload = () => { try { texture(0); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img); gl.uniform1f(u("u_img"), img.naturalWidth / img.naturalHeight); ready = true; setWet(true); poke.current = (x, y, radius, amount) => { push(x, y, radius, amount); wake(); }; // One drop straight away, so the water is already moving when the tray first shows. push(0.64, 0.34, 3.2, -1.0); } catch { // The picture could not be read into the shader: the still print 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; owed = Math.min(owed + (last ? (stamp - last) / 1000 : 0.016), 0.05); last = stamp; // Left alone, something stirs the water: a slow unseen fingertip and the odd falling drop. if (stamp - hand.current.at > 2600) { push(0.5 + 0.31 * Math.sin(t * 0.83), 0.52 + 0.33 * Math.sin(t * 0.61 + 1.3), 2.4, -0.016); if (t > nextDrip) { nextDrip = t + 1.9 + Math.random() * 1.6; push(0.14 + Math.random() * 0.72, 0.14 + Math.random() * 0.72, 2.8, -0.6 - Math.random() * 0.4); } } while (owed >= 1 / 60) { step(); owed -= 1 / 60; } encode(); gl.activeTexture(gl.TEXTURE1); gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, GW, GH, gl.RGBA, gl.UNSIGNED_BYTE, pixels); gl.uniform2f(uRes, cv.width, cv.height); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } raf = visible && !document.hidden ? requestAnimationFrame(loop) : 0; }; function 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); if (img.complete && img.naturalWidth) upload(); else img.addEventListener("load", upload); resize(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); img.removeEventListener("load", upload); poke.current = null; }; }, [reduce]); const place = (e: ReactPointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); return { x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height }; }; /** A fingertip pressed into the water. */ function onDown(e: ReactPointerEvent) { const p = place(e); hand.current = { ...p, down: true, at: performance.now() }; poke.current?.(p.x, p.y, 3, -0.9); } /** Dragging through the water leaves a wake: the faster the drag, the deeper the furrow. */ function onMove(e: ReactPointerEvent) { const p = place(e); const h = hand.current; const fresh = performance.now() - h.at < 300; const from = fresh ? h : p; const dx = p.x - from.x; const dy = p.y - from.y; const travel = Math.hypot(dx * GW, dy * GH); const steps = Math.max(1, Math.min(14, Math.round(travel / 2))); const depth = Math.min(0.2, 0.02 + travel * 0.016) / Math.sqrt(steps); for (let k = 1; k <= steps; k++) poke.current?.(from.x + (dx * k) / steps, from.y + (dy * k) / steps, 2.4, -depth); hand.current = { ...p, down: h.down, at: performance.now() }; } function drip() { setDrops((n) => n + 1); hand.current.at = performance.now() - 1800; poke.current?.(0.2 + Math.random() * 0.6, 0.2 + Math.random() * 0.6, 3.2, -1.1); } return (

{/* The tray: white enamel, a dark rolled rim, and a well with the water in it. */}

(hand.current.down = false)} className="relative aspect-[4/5] touch-pan-y overflow-hidden rounded-[24px] bg-[#e9e7e0]" > {/* The still print. It is what shows with reduced motion or without WebGL. */}

${PHOTO_ALT}$

{tray.label} / {tray.bath}

{drops > 0 ? `${drops} ${drops === 1 ? "drop has" : "drops have"} fallen into the tray.` : ""}

); } 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/photograph-in-an-enamel-darkroom-tray-under-water-that-ripples-where-the-pointer-drags.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]