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:T4005,import { useEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; // One picture per side of the prisms. Exactly three, framed alike. const sides = [ { name: "Vermilion", src: "https://images.pexels.com/photos/15689960/pexels-photo-15689960.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Close portrait of a man with a tall afro in a white striped shirt against a red wall", tone: "#b5372a", }, { name: "Saffron", src: "https://images.pexels.com/photos/6976854/pexels-photo-6976854.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman in a mustard beret and mustard jumper leaning on a tan suitcase against a yellow wall", tone: "#e2a12c", }, { name: "Cobalt", src: "https://images.pexels.com/photos/35707519/pexels-photo-35707519.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman with an afro and sunglasses crouching in a pink dress and black boots against a bright blue wall", tone: "#1f7fd6", }, ]; /** How many prisms the picture is cut into. Up to 20. */ const SLATS = 14; /** Seconds between one prism starting to turn and its neighbour following. */ const STAGGER = 0.052; /** Seconds the billboard rests on a picture before it turns by itself. */ const REST = 3.5; 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_t0; uniform sampler2D u_t1; uniform sampler2D u_t2; uniform vec3 u_img; uniform float u_ang[20]; uniform float u_n; 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); } float hash(float n){ return fract(sin(n * 91.345) * 47453.5453); } void main(){ vec2 uv = vec2(gl_FragCoord.x / u_res.x, 1.0 - gl_FragCoord.y / u_res.y); float x = uv.x * u_n; float i = floor(x); float lx = fract(x) - 0.5; float ang = 0.0; for (int k = 0; k < 20; k++) { if (float(k) == i) ang = u_ang[k]; } // Each prism is an equilateral triangle seen from the front, a little narrower than its bay. float side = 0.972; float R = side / 1.7320508; float pxw = u_n / u_res.x; // The dark of the housing seen between prisms, with a little light leaking in from the front. vec3 col = vec3(0.016, 0.017, 0.020) + vec3(0.02) * smoothstep(0.42, 0.5, abs(lx)); vec2 lamp = normalize(vec2(-0.42, 0.91)); vec2 half_ = normalize(lamp + vec2(0.0, 1.0)); for (int f = 0; f < 3; f++) { float n = float(f) * 2.0943951 - ang; float c = cos(n); if (c <= 0.0) continue; float x1 = R * sin(n - 1.0471976); float x2 = R * sin(n + 1.0471976); float e = min(lx - x1, x2 - lx); float inside = clamp(e / pxw + 0.5, 0.0, 1.0); if (inside <= 0.0) continue; float w = clamp((lx - x1) / (x2 - x1), 0.0, 1.0); vec2 at = vec2((i + w) / u_n, uv.y); vec3 pic; if (f == 0) pic = texture2D(u_t0, cover(at, u_img.x)).rgb; else if (f == 1) pic = texture2D(u_t1, cover(at, u_img.y)).rgb; else pic = texture2D(u_t2, cover(at, u_img.z)).rgb; vec2 nor = vec2(sin(n), c); float diffuse = max(dot(nor, lamp), 0.0); // How far back this point of the face sits. Faces turned into the housing fall into shade. float z = R * mix(cos(n - 1.0471976), cos(n + 1.0471976), w); float depth = smoothstep(-0.45 * R, 0.5 * R, z); vec3 lit = pic * (0.10 + 0.99 * diffuse) * mix(0.42, 1.0, depth); // The printed vinyl is glossy: a band of the lamp slides across a face as it swings past. float gloss = pow(max(dot(nor, half_), 0.0), 130.0); lit += vec3(1.0, 0.98, 0.94) * gloss * 0.30 * (0.4 + 0.6 * depth); // Folded aluminium lip down each long edge of a face. float lip = 1.0 - smoothstep(0.0, 0.022 / max(c, 0.25), min(w, 1.0 - w)); vec3 metal = vec3(0.62, 0.64, 0.67) * (0.25 + 0.95 * diffuse) + vec3(1.0) * gloss * 0.6; lit = mix(lit, metal, lip * 0.45); col = mix(col, lit, inside); } // Lamps above the board: brighter at the top, and the rails shade the very ends of the prisms. col *= 1.07 - 0.20 * uv.y; col *= 0.55 + 0.45 * smoothstep(0.0, 0.035, uv.y); col *= 0.70 + 0.30 * smoothstep(0.0, 0.022, 1.0 - uv.y); // No two prisms are hung perfectly true, so each takes the light a touch differently. col *= 0.975 + 0.05 * hash(i + 3.0); gl_FragColor = vec4(col, 1.0); }`; export default function ThreeSidedBillboardPhotoGalleryWithPrismSlatsThatRotateInAWaveBetweenPictures() { const reduce = useReducedMotion(); const face = useRef(null); const canvas = useRef(null); const pics = useRef<(HTMLImageElement | null)[]>([]); /** Requests from the page to the draw loop: turns to make, and where the pointer is over the board. */ const ask = useRef<{ turns: { by: number; from: number }[]; x: number; at: number; touched: number }>({ turns: [], x: 0.5, at: -1e6, touched: -1e6 }); const [live, setLive] = useState(false); const [shown, setShown] = useState(0); useEffect(() => { const el = face.current; const cv = canvas.current; const imgs = pics.current; if (reduce || !el || !cv || imgs.length < 3 || imgs.some((img) => !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_t0"), 0); gl.uniform1i(u("u_t1"), 1); gl.uniform1i(u("u_t2"), 2); gl.uniform1f(u("u_n"), SLATS); const uni = { res: u("u_res"), img: u("u_img"), ang: u("u_ang[0]") }; const third = (Math.PI * 2) / 3; const angle = new Float32Array(20); const speed = new Float32Array(20); const goal = new Float32Array(20); const lean = new Float32Array(20); /** Each prism hangs a hair off true. */ const off = Array.from({ length: 20 }, (_, i) => Math.sin(i * 12.9898) * 0.022); const queue: { col: number; when: number; to: number }[] = []; let step = 0; let ready = false; let visible = true; let raf = 0; let last = 0; let clock = 0; let nextTurn = 0.9; const upload = () => { if (ready || imgs.some((img) => !img || !img.complete || !img.naturalWidth)) return; try { imgs.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!); }); const ratio = (img: HTMLImageElement | null) => (img ? img.naturalWidth / img.naturalHeight : 1); gl.uniform3f(uni.img, ratio(imgs[0]), ratio(imgs[1]), ratio(imgs[2])); 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); gl.uniform2f(uni.res, cv.width, cv.height); }; const loop = (stamp: number) => { if (ready) { const dt = Math.min(last ? (stamp - last) / 1000 : 0.016, 0.033); last = stamp; clock += dt; const a = ask.current; // With nobody near it, the board turns to its next picture on a timer, starting from the left. if (clock >= nextTurn && stamp - a.touched > 4200) a.turns.push({ by: 1, from: 0 }); while (a.turns.length) { const turn = a.turns.shift()!; step += turn.by; for (let i = 0; i < SLATS; i++) queue.push({ col: i, when: clock + Math.abs(i - turn.from) * STAGGER, to: step }); nextTurn = clock + REST + SLATS * STAGGER; setShown(((step % 3) + 3) % 3); } for (let q = queue.length - 1; q >= 0; q--) { if (queue[q].when <= clock) { goal[queue[q].col] = queue[q].to; queue.splice(q, 1); } } const near = stamp - a.at < 900; for (let i = 0; i < SLATS; i++) { // A hand passing over the board nudges the prisms beneath it part of the way round. const away = a.x * SLATS - (i + 0.5); const want = near ? 0.5 * Math.exp(-(away * away) / 3.2) : 0; lean[i] += (want - lean[i]) * Math.min(1, dt * 9); const target = goal[i] * third + off[i] + lean[i]; // A firm spring, slightly under-damped, so each prism overshoots and clacks back onto its stop. speed[i] += ((target - angle[i]) * 95 - speed[i] * 9.6) * dt; angle[i] += speed[i] * dt; } gl.uniform1fv(uni.ang, angle); 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); imgs.forEach((img) => img?.addEventListener("load", upload)); upload(); resize(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); imgs.forEach((img) => img?.removeEventListener("load", upload)); }; }, [reduce]); /** Turn the board by a number of sides, the wave starting at a given prism. Without the canvas the pictures simply swap. */ function turn(by: number, from: number) { if (live) ask.current.turns.push({ by, from }); else setShown((n) => (((n + by) % 3) + 3) % 3); ask.current.touched = performance.now(); } function over(e: ReactPointerEvent) { const r = e.currentTarget.getBoundingClientRect(); ask.current.x = (e.clientX - r.left) / r.width; ask.current.at = performance.now(); ask.current.touched = ask.current.at; } function onKey(e: ReactKeyboardEvent) { if (e.key === "ArrowRight") { e.preventDefault(); turn(1, 0); } else if (e.key === "ArrowLeft") { e.preventDefault(); turn(-1, SLATS - 1); } } return (

{/* The housing: a top rail, the turning face and a bottom rail. */}

{sides.map((side, i) => ( ))}

Click to turn

); } 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/three-sided-billboard-photo-gallery-with-prism-slats-that-rotate-in-a-wave-between-pictures.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]