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:T4834,import { useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; // The print lying on the glass floor of the tray. const print = { src: "https://images.pexels.com/photos/9955200/pexels-photo-9955200.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A man in a white beret and white jacket against a blue wall, holding a pink gerbera daisy in front of one eye", }; /** Sand grid across the tray. The picture is drawn far finer than this: the grid only holds how deep the sand lies. */ const GW = 128; const GH = 160; /** Width of the fingertip, as a share of the tray width. */ const FINGER = 0.07; /** The steepest wall the sand will hold, as depth per grid cell. Anything steeper collapses at once. */ const REPOSE = 0.3; /** How quickly the walls of a furrow creep inward, and how quickly grains sift back over bare glass (per second). */ const CREEP = 0.55; const LEVEL = 0.011; const WALNUT = "repeating-linear-gradient(91deg, rgba(255,220,180,0.05) 0 1px, rgba(0,0,0,0.07) 1px 3px, rgba(255,220,180,0.02) 3px 7px, rgba(0,0,0,0.04) 7px 12px), linear-gradient(135deg, #7a5333 0%, #4a311d 55%, #36220f 100%)"; 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 vec2 u_grid; uniform sampler2D u_sand; uniform sampler2D u_photo; uniform float u_img; float hash(vec2 p){ p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } float vnoise(vec2 p){ vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y); } vec3 bed(vec2 uv){ vec2 o = 0.5 / u_grid; return (texture2D(u_sand, uv + o).rgb + texture2D(u_sand, uv - o).rgb + texture2D(u_sand, uv + vec2(o.x, -o.y)).rgb + texture2D(u_sand, uv + vec2(-o.x, o.y)).rgb) * 0.25; } vec2 cover(vec2 uv){ float A = u_res.x / u_res.y; vec2 t = uv; if (u_img > A) t.x = (uv.x - 0.5) * A / u_img + 0.5; else t.y = (uv.y - 0.5) * u_img / A + 0.5; return clamp(t, 0.0, 1.0); } void main(){ vec2 px = vec2(gl_FragCoord.x, u_res.y - gl_FragCoord.y); vec2 uv = px / u_res; vec3 s = bed(uv); float h = s.r * 2.5; vec2 slope = (s.gb - 0.5) / 1.2; // Grains about one screen pixel across, whatever the density of the display. vec2 gp = px / max(1.0, floor(u_res.x / 700.0 + 0.5)); float n1 = hash(floor(gp)); float n1b = hash(floor(gp) + 19.7); float n2 = hash(floor(gp / 2.0) + 3.1); float mottle = vnoise(gp / 16.0); vec2 lamp = normalize(vec2(-0.6, -0.8)); vec3 L = normalize(vec3(lamp * 0.92, 0.5)); // Sand does not end in a line. Where the bed thins it breaks into single grains, and a few are always left behind on the glass. float cov = smoothstep(0.12, 0.48, h + (n2 - 0.5) * 0.36 + (n1 - 0.5) * 0.18); float stray = step(0.9925, hash(floor(gp / 1.5) + 71.3)); cov = max(cov, stray * 0.92); vec3 n = normalize(vec3(-slope * 3.4 + (vec2(n1, n1b) - 0.5) * 0.6, 1.0)); float dif = max(dot(n, L), 0.0); float toward = bed(uv + lamp * 0.011).r * 2.5; float occluded = clamp((toward - h) * 1.3 - 0.05, 0.0, 1.0); vec3 grain = mix(vec3(0.80, 0.71, 0.58), vec3(0.60, 0.50, 0.39), n1 * n1); grain = mix(grain, vec3(0.93, 0.88, 0.79), step(0.88, n1b) * 0.6); grain *= 0.92 + 0.16 * mottle; vec3 sand = grain * (0.30 + 1.0 * dif) * (1.0 - 0.5 * occluded); // Flecks of quartz that flash where a slope faces the lamp. sand += vec3(1.0, 0.97, 0.9) * step(0.985, n2) * step(0.5, n1b) * pow(dif, 3.0) * 0.3; vec3 photo = texture2D(u_photo, cover(uv)).rgb; // The wall of the furrow nearest the lamp throws its shadow onto the print. photo *= 1.0 - 0.5 * smoothstep(0.15, 0.9, toward) * (1.0 - cov); // A thin film of dust and the faint reflection of the lamp in the glass. photo = photo * 0.93 + 0.035 + 0.05 * smoothstep(0.55, 0.0, abs(uv.x * 0.8 + uv.y - 0.62)); gl_FragColor = vec4(mix(photo, sand, cov), 1.0); }`; export default function PortraitBuriedUnderSandInATrayWhereThePointerDragsAFingerTrailThatSiftsShut() { const reduce = useReducedMotion(); const well = useRef(null); const canvas = useRef(null); const photo = useRef(null); /** The fingertip in tray fractions, where it was a frame ago, and when a person last moved it. */ const finger = useRef({ x: 0.5, y: 0.5, px: 0.5, py: 0.5, at: -1e6, moved: false, fresh: true }); /** 1 while the sand is brushed off the whole print, and how long the bed is still rushing to its new level. */ const bare = useRef({ on: 0, rush: 0 }); const [live, setLive] = useState(false); const [cleared, setCleared] = useState(false); useEffect(() => { const el = well.current; const cv = canvas.current; const img = photo.current; if (!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_sand"), 1); gl.uniform2f(u("u_grid"), GW, GH); 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); }; // Depth of sand in every cell. 1 is the level bed, 0 is bare glass, above 1 is a ridge pushed up beside a furrow. let depth = new Float32Array(GW * GH).fill(1); let spare = new Float32Array(GW * GH); const packed = new Uint8Array(GW * GH * 4); const reach = GW * FINGER; /** Press the fingertip down at one spot: scoop out what is under it and bank it up around the edge. */ const press = (cx: number, cy: number) => { const out = reach * 1.8; const x0 = Math.max(0, Math.floor(cx - out)); const x1 = Math.min(GW - 1, Math.ceil(cx + out)); const y0 = Math.max(0, Math.floor(cy - out)); const y1 = Math.min(GH - 1, Math.ceil(cy + out)); let moved = 0; let room = 0; for (let y = y0; y <= y1; y++) { for (let x = x0; x <= x1; x++) { const i = y * GW + x; const d = Math.hypot(x - cx, y - cy); if (d < reach) { const a = Math.max(0, (d / reach - 0.45) / 0.55); const left = Math.min(depth[i], a * a * (3 - 2 * a) * 1.15); moved += depth[i] - left; depth[i] = left; } else if (d < out) { // Only bank sand onto sand: none of it falls back into the furrow behind the finger. room += Math.sin((Math.PI * (d - reach)) / (out - reach)) * Math.min(1, Math.max(0, (depth[i] - 0.35) / 0.5)); } } } if (moved <= 0 || room <= 0) return; const share = (moved * 0.7) / room; for (let y = y0; y <= y1; y++) { for (let x = x0; x <= x1; x++) { const i = y * GW + x; const d = Math.hypot(x - cx, y - cy); if (d >= reach && d < out) { const w = Math.sin((Math.PI * (d - reach)) / (out - reach)) * Math.min(1, Math.max(0, (depth[i] - 0.35) / 0.5)); depth[i] = Math.min(2.3, depth[i] + w * share); } } } }; const drag = (ax: number, ay: number, bx: number, by: number) => { const steps = Math.max(1, Math.ceil(Math.hypot(bx - ax, by - ay) / 1.2)); for (let s = 1; s <= steps; s++) press(ax + ((bx - ax) * s) / steps, ay + ((by - ay) * s) / steps); }; /** Let the bed settle for one tick: walls steeper than sand can hold collapse, the rest creeps, and grains sift back. */ const settle = (dt: number, rate: number, level: number) => { const creep = Math.min(0.2, CREEP * dt); const back = Math.min(1, rate * dt); const flow = (d: number) => (d > REPOSE ? (d - REPOSE) * 0.22 : d < -REPOSE ? (d + REPOSE) * 0.22 : 0) + d * creep * 0.25; for (let y = 0; y < GH; y++) { const up = y > 0 ? -GW : 0; const down = y < GH - 1 ? GW : 0; for (let x = 0; x < GW; x++) { const i = y * GW + x; const here = depth[i]; const v = here + flow(depth[i + up] - here) + flow(depth[i + down] - here) + flow(depth[x > 0 ? i - 1 : i] - here) + flow(depth[x < GW - 1 ? i + 1 : i] - here); spare[i] = v + (level - v) * back; } } const swap = depth; depth = spare; spare = swap; }; // With nobody touching it, a slow hand draws one long wandering line. const wander = (t: number): [number, number] => [ GW * (0.5 + 0.3 * Math.sin(t * 0.5 + 0.2) + 0.07 * Math.sin(t * 1.31 + 1.0)), GH * (0.47 + 0.33 * Math.sin(t * 0.37 + 1.9) + 0.05 * Math.cos(t * 1.13)), ]; const draw = () => { for (let y = 0; y < GH; y++) { for (let x = 0; x < GW; x++) { const i = y * GW + x; const sx = (depth[x < GW - 1 ? i + 1 : i] - depth[x > 0 ? i - 1 : i]) * 0.5; const sy = (depth[y < GH - 1 ? i + GW : i] - depth[y > 0 ? i - GW : i]) * 0.5; packed[i * 4] = Math.max(0, Math.min(255, depth[i] * 102)); packed[i * 4 + 1] = Math.max(0, Math.min(255, 127.5 + sx * 153)); packed[i * 4 + 2] = Math.max(0, Math.min(255, 127.5 + sy * 153)); packed[i * 4 + 3] = 255; } } gl.activeTexture(gl.TEXTURE1); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, GW, GH, 0, gl.RGBA, gl.UNSIGNED_BYTE, packed); gl.uniform2f(u("u_res"), cv.width, cv.height); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }; // It opens with twenty-two seconds of that line already drawn, the oldest end half sifted shut. const LEAD = 22; let lead = wander(-LEAD); for (let t = -LEAD; t < 0; t += 1 / 30) { const next = wander(t); drag(lead[0], lead[1], next[0], next[1]); lead = next; settle(1 / 30, LEVEL, 1); } let ready = false; let visible = true; let raf = 0; let last = 0; const started = performance.now(); 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 f = finger.current; const b = bare.current; if (f.moved) { const x = f.x * GW; const y = f.y * GH; if (f.fresh) press(x, y); else drag(f.px * GW, f.py * GH, x, y); f.fresh = false; f.px = f.x; f.py = f.y; f.moved = false; } if (reduce) { // No drifting sand: a stroke stays as it was drawn, and the button changes the whole tray at once. if (b.rush > 0) { depth.fill(b.on ? 0 : 1); b.rush = 0; } } else { if (stamp - f.at > 2600 && !b.on) { const next = wander(t); drag(lead[0], lead[1], next[0], next[1]); lead = next; } else lead = wander(t); b.rush = Math.max(0, b.rush - dt); settle(dt, b.rush > 0 ? 2.4 : b.on ? 0.6 : LEVEL, b.on ? 0 : 1); } draw(); } raf = visible && !document.hidden && !reduce ? requestAnimationFrame(loop) : 0; }; const wake = () => { if (!raf && visible && !document.hidden) { last = 0; raf = requestAnimationFrame(loop); } }; 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); if (reduce && ready) draw(); }; const upload = () => { if (ready || !img.complete || !img.naturalWidth) return; try { texture(0); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img); texture(1); gl.uniform1f(u("u_img"), img.naturalWidth / img.naturalHeight); ready = true; setLive(true); wake(); } catch { // The picture could not be read into the shader: the still version underneath stays on show. ready = false; } }; const ro = new ResizeObserver(resize); ro.observe(el); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); io.observe(el); document.addEventListener("visibilitychange", wake); img.addEventListener("load", upload); // With motion reduced the loop is not running, so each stroke or button press asks for one redraw. el.addEventListener("sand-touched", wake); resize(); upload(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); img.removeEventListener("load", upload); el.removeEventListener("sand-touched", wake); }; }, [reduce]); function touch(e: ReactPointerEvent) { const r = e.currentTarget.getBoundingClientRect(); const f = finger.current; const now = performance.now(); const x = (e.clientX - r.left) / r.width; const y = (e.clientY - r.top) / r.height; // A press, or a move after a rest, sets the finger down afresh so no line is drawn from where it last was. if (e.type !== "pointermove" || now - f.at > 400) { f.fresh = true; f.px = x; f.py = y; } f.x = x; f.y = y; f.at = now; f.moved = true; e.currentTarget.dispatchEvent(new Event("sand-touched")); } function toggle() { const next = !cleared; setCleared(next); bare.current = { on: next ? 1 : 0, rush: 1.6 }; well.current?.dispatchEvent(new Event("sand-touched")); } return (

{/* The tray: a lacquered rim round a shallow well. */}

{/* The still version: sand with one cleared patch. On show until the shader is ready and whenever WebGL is missing. */}

Draw in the sand.

); } 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-buried-under-sand-in-a-tray-where-the-pointer-drags-a-finger-trail-that-sifts-shut.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]