60: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"] 61: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"] 62:T3ae4,import { useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; // One entry per plate: the picture, its title, and the colour of ink it soaks in with. const plates = [ { title: "Carmine", ink: "#3b0d16", src: "https://images.pexels.com/photos/32174976/pexels-photo-32174976.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with a full round afro, both hands raised to her hair, in a black top against a bright red wall", }, { title: "Verdigris", ink: "#0b2c36", src: "https://images.pexels.com/photos/19342936/pexels-photo-19342936.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with long straight hair in a dark open jacket, lit in teal with a warm edge of light, looking down into the camera", }, { title: "Rose madder", ink: "#1c2038", src: "https://images.pexels.com/photos/15227249/pexels-photo-15227249.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with dark hair tied back, a navy blazer pulled around bare shoulders, against a soft peach wall", }, { title: "Saffron", ink: "#47200a", src: "https://images.pexels.com/photos/38164214/pexels-photo-38164214.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with a shaved head in a white sleeveless top and dark trousers, leaning one elbow on a tall white plinth against an orange backdrop", }, ]; /** Seconds one bloom takes, and seconds a finished plate rests before the next one starts. */ const BLOOM = 2.6; const REST = 2.4; /** Where on the sheet each bloom starts (0 to 1 each way). They are used in turn. */ const SEEDS = [ [0.34, 0.3], [0.7, 0.62], [0.3, 0.74], [0.68, 0.24], ]; 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_from; uniform sampler2D u_to; uniform vec2 u_img; uniform float u_blank; uniform float u_p; uniform vec2 u_seed; uniform vec3 u_ink; uniform float u_shift; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } float noise(vec2 p){ vec2 i = floor(p), 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); } float fbm(vec2 p){ float v = 0.0, a = 0.5; for (int i = 0; i < 5; i++){ v += a * noise(p); p = p * 2.03 + 17.1; a *= 0.5; } return v; } 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); } 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); // The sheet: long fibres one way, a finer tooth across them. float fibre = fbm(p * vec2(34.0, 150.0)) * 0.6 + fbm(p * 210.0) * 0.4; vec3 paper = vec3(0.972, 0.958, 0.925) * (0.95 + 0.09 * fibre); // How long the wet front takes to reach this point. Big soft lobes, then fine feathering along the fibres. vec2 q = p * 2.1 + u_shift; vec2 warp = vec2(fbm(q), fbm(q + 7.3)) - 0.5; float d = length(p - vec2(u_seed.x * A, u_seed.y) + warp * 0.34); float reach = d * 0.86 + (fbm(p * 5.0 + warp * 2.4 + u_shift * 1.7) - 0.5) * 0.46 + (fibre - 0.5) * 0.13; float s = (u_p * 2.35 - 0.24) - reach; float soaked = smoothstep(0.0, 0.03, s); float settled = smoothstep(0.14, 0.58, s); // Pigment gathers where the water stops: a darker line riding the front. float tide = smoothstep(0.0, 0.016, s) * (1.0 - smoothstep(0.016, 0.085, s)); float damp = smoothstep(-0.11, 0.0, s) * (1.0 - soaked); // The paper swells a little where it is wettest, which shifts the picture under it. vec2 swell = warp * 0.022 * (1.0 - settled) * soaked; vec3 next = texture2D(u_to, cover(uv + swell, u_img.y)).rgb; vec3 prev = mix(texture2D(u_from, cover(uv, u_img.x)).rgb, paper, u_blank); prev = mix(prev, prev * vec3(0.86, 0.85, 0.84), damp); // First the picture arrives in one ink only, then its own colours come up behind the front. float tone = dot(next, vec3(0.299, 0.587, 0.114)); float load = clamp(1.22 - tone * 1.08, 0.0, 1.0); load = load * (0.82 + 0.36 * fbm(p * 9.0 + u_shift)); vec3 wash = mix(paper, u_ink, clamp(load, 0.0, 1.0)); wash = mix(wash, u_ink, tide * 0.8); vec3 col = mix(prev, wash, soaked); col = mix(col, next, settled); // Everything is printed on the same sheet, so the tooth shows through the finished plate too. col *= 0.955 + 0.075 * fibre; gl_FragColor = vec4(col, 1.0); }`; const rgb = (hex: string) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255); export default function PhotoGalleryOnACottonPaperSheetWhereEachPortraitBloomsInLikeInkThroughWetFibres() { const reduce = useReducedMotion(); const frame = useRef(null); const canvas = useRef(null); const images = useRef<(HTMLImageElement | null)[]>([]); const want = useRef(0); const playing = useRef(true); const held = useRef(0); const [index, setIndex] = useState(0); const [play, setPlay] = useState(true); const [live, setLive] = useState(false); useEffect(() => { want.current = index; }, [index]); useEffect(() => { playing.current = play; }, [play]); useEffect(() => { const el = frame.current; const cv = canvas.current; if (reduce || !el || !cv) 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_from"), 0); gl.uniform1i(u("u_to"), 1); const uni = { res: u("u_res"), img: u("u_img"), blank: u("u_blank"), p: u("u_p"), seed: u("u_seed"), ink: u("u_ink"), shift: u("u_shift") }; const textures: (WebGLTexture | null)[] = plates.map(() => null); const shapes = plates.map(() => 0.8); const cleanups: (() => void)[] = []; let broken = false; plates.forEach((_, i) => { const img = images.current[i]; if (!img) return; const upload = () => { if (textures[i] || broken || !img.naturalWidth) return; try { const tex = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, tex); 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); textures[i] = tex; shapes[i] = img.naturalWidth / img.naturalHeight; wake(); } catch { // A picture could not be read into the shader: the plain pictures underneath stay on show. broken = true; setLive(false); } }; if (img.complete) upload(); img.addEventListener("load", upload); cleanups.push(() => img.removeEventListener("load", upload)); }); let shown = -1; // the plate that is soaking in, or has finished let under = -1; // what it is soaking over: -1 is the bare sheet let begun = 0; let count = 0; let visible = true; let raf = 0; const started = performance.now(); 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) => { const t = (stamp - started) / 1000; if (!broken) { let p = shown < 0 ? 1 : Math.min(1, (t - begun) / BLOOM); // The next plate can start once the last has settled and its own picture has arrived. if (p >= 1 && want.current !== shown && textures[want.current]) { under = shown; shown = want.current; begun = t; count += 1; p = 0; if (count === 1) setLive(true); } else if (p >= 1 && shown >= 0 && playing.current && stamp > held.current && t - begun > BLOOM + (count === 1 ? REST * 0.3 : REST)) { const following = (shown + 1) % plates.length; if (textures[following]) setIndex(following); } if (shown >= 0) { const seed = SEEDS[(count - 1) % SEEDS.length]; const ink = rgb(plates[shown].ink); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, textures[under < 0 ? shown : under]); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, textures[shown]); gl.uniform2f(uni.res, cv.width, cv.height); gl.uniform2f(uni.img, shapes[under < 0 ? shown : under], shapes[shown]); gl.uniform1f(uni.blank, under < 0 ? 1 : 0); // Quick to spread at first, slow to finish, the way a wet front runs out of water. gl.uniform1f(uni.p, 1 - Math.pow(1 - p, 1.35)); gl.uniform2f(uni.seed, seed[0], seed[1]); gl.uniform3f(uni.ink, ink[0], ink[1], ink[2]); gl.uniform1f(uni.shift, count * 3.71); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } } raf = visible && !document.hidden && !broken ? requestAnimationFrame(loop) : 0; }; function wake() { if (!raf && visible && !document.hidden && !broken) 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); resize(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); cleanups.forEach((off) => off()); }; }, [reduce]); function choose(i: number) { held.current = performance.now() + 7000; setIndex(i); } const plate = plates[index]; return (

{/* The sheet: heavy cotton paper with the plate printed on it and its title set beneath. */}

{item.alt} — {plate.title} Plate {index + 1} of {plates.length}

{/* One pot of ink per plate, and a way to stop the sheet changing by itself. */}

{plates.map((item, i) => ( ))}

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/photo-gallery-on-a-cotton-paper-sheet-where-each-portrait-blooms-in-like-ink-through-wet-fibres.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]