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:T44af,import { useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; // Two prints stacked on the table. Peeling the top one off uncovers the other. const prints = [ { name: "Rosé", src: "https://images.pexels.com/photos/28209648/pexels-photo-28209648.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman in a red dress, patterned headscarf and cat-eye sunglasses resting her chin on her hand against a pale pink wall", tone: "#e3c3cb", }, { name: "Verdigris", src: "https://images.pexels.com/photos/9489589/pexels-photo-9489589.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A woman in a green beret, green jacket and green gloves looking down at a green ball in her hands against a green wall", tone: "#2f6b3a", }, ]; /** Radius of the curl as a share of the print's height. Bigger is a lazier, fatter roll. */ const CURL = 0.085; /** How far the corner has to travel (in print heights) before letting go pulls the print right off. */ const LET_GO = 0.8; 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 vec4 u_rect; uniform sampler2D u_a; uniform sampler2D u_b; uniform vec2 u_img; uniform vec2 u_c; uniform vec2 u_d; uniform float u_r; uniform float u_fade; uniform float u_top; float A; float PX; const float PI = 3.14159265; // Each print has a white border, as a lab print does. BORDER is its width as a share of the print height. const float BORDER = 0.026; vec2 fit(vec2 q, float img){ vec2 size = vec2(A, 1.0) - 2.0 * BORDER; vec2 uv = (q - BORDER) / size; float inner = size.x / size.y; if (img > inner) uv.x = (uv.x - 0.5) * inner / img + 0.5; else uv.y = (uv.y - 0.5) * img / inner + 0.5; return clamp(uv, 0.0, 1.0); } vec3 bordered(vec3 c, vec2 q){ vec2 e = min(q, vec2(A, 1.0) - q); return mix(vec3(0.958, 0.952, 0.936), c, smoothstep(BORDER - PX, BORDER + PX, min(e.x, e.y))); } vec3 topPrint(vec2 q){ return bordered(mix(texture2D(u_a, fit(q, u_img.x)).rgb, texture2D(u_b, fit(q, u_img.y)).rgb, u_top), q); } vec3 lowPrint(vec2 q){ return bordered(mix(texture2D(u_b, fit(q, u_img.y)).rgb, texture2D(u_a, fit(q, u_img.x)).rgb, u_top), q); } // 1 inside the sheet, 0 outside, with an edge w wide. float cov(vec2 q, float w){ vec2 e = min(q, vec2(A, 1.0) - q); return clamp(min(e.x, e.y) / w + 0.5, 0.0, 1.0); } float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } // How much of the lifted paper (the roll and the flap that has come over) sits above q. float lifted(vec2 q, float w){ float t = dot(q - u_c, u_d); float ridge = 1.0 - smoothstep(u_r - w * 0.5, u_r + w * 0.5, t); if (t < 0.0) return cov(q + u_d * (PI * u_r - 2.0 * t), w); float th = asin(clamp(t / u_r, 0.0, 1.0)); return cov(q + u_d * (u_r * (PI - th) - min(t, u_r)), w) * ridge; } void main(){ vec2 px = vec2(gl_FragCoord.x, u_res.y - gl_FragCoord.y); PX = 1.0 / u_rect.w; A = u_rect.z / u_rect.w; vec2 q = (px - u_rect.xy) * PX; float t = dot(q - u_c, u_d); vec2 fall = normalize(vec2(0.50, 0.86)); float lift = 2.0 * u_r; // Shadow of the lifted paper: a tight dark one where it leaves the table and a wide soft one further out. float near = lifted(q - fall * lift * 0.30, 0.018 + lift * 0.10); float far = lifted(q - fall * lift * 0.95, 0.03 + lift * 0.30); float dark = clamp(near * 0.42 + far * 0.34, 0.0, 1.0) * u_fade; vec3 col = vec3(0.0); float al = dark * 0.36 * cov(q, 0.30); // The print underneath. float lowIn = cov(q, PX); vec3 low = lowPrint(q); low *= 1.0 - dark; col = mix(col, low, lowIn); al = mix(al, 1.0, lowIn); // The top print, picture side. Flat where it still lies down, then climbing the roll. float frontIn; vec3 front; if (t < 0.0) { frontIn = cov(q, PX); front = topPrint(q) * (1.0 - dark * 0.85); // The gloss coat picks up a breath of light just before the paper leaves the table. front += vec3(1.0) * 0.07 * exp(t / (u_r * 0.9)); } else { float th = asin(clamp(t / u_r, 0.0, 1.0)); vec2 qo = q + u_d * (u_r * th - t); frontIn = cov(qo, PX) * (1.0 - smoothstep(u_r - PX, u_r + PX, t)); float up = sin(th); front = topPrint(qo) * mix(1.0, 0.36, pow(up, 1.6)); front += vec3(1.0, 0.98, 0.95) * 0.34 * exp(-pow((th - 0.50) / 0.20, 2.0)); } col = mix(col, front, frontIn * u_fade); al = mix(al, 1.0, frontIn * u_fade); // The back of the top print: over the roll, then lying flat, lit from above. float backIn; float lit; vec2 qb; float turn; if (t < 0.0) { qb = q + u_d * (PI * u_r - 2.0 * t); backIn = cov(qb, PX); lit = 0.985 - 0.07 * smoothstep(0.0, 0.7, -t); turn = 0.0; } else { float th = asin(clamp(t / u_r, 0.0, 1.0)); qb = q + u_d * (u_r * (PI - th) - t); backIn = cov(qb, PX) * (1.0 - smoothstep(u_r - PX, u_r + PX, t)); float k = cos(th); lit = 0.50 + 0.50 * pow(k, 0.8) + 0.05 * exp(-pow((k - 0.78) / 0.16, 2.0)); turn = 1.0 - k; } vec3 paper = vec3(0.972, 0.962, 0.940) * lit; // Colour thrown up onto the underside by the print below it. vec2 under = q + u_d * u_r; vec3 bounce = (lowPrint(under + vec2(0.07, 0.0)) + lowPrint(under - vec2(0.07, 0.0)) + lowPrint(under + vec2(0.0, 0.07)) + lowPrint(under - vec2(0.0, 0.07))) * 0.25; paper = mix(paper, paper * (0.45 + bounce * 1.1), 0.36 * turn * lowIn); // Paper tooth, and the maker's ruled marks that photo paper carries on its back. paper *= 1.0 - 0.030 * hash(floor(qb * vec2(1100.0, 420.0))); float rule = step(0.90, fract((qb.x + qb.y) * 9.0)) * step(0.45, fract((qb.y - qb.x) * 4.5)); paper *= 1.0 - 0.045 * rule; col = mix(col, paper, backIn * u_fade); al = mix(al, 1.0, backIn * u_fade); gl_FragColor = vec4(col, al); }`; export default function GlossyPhotoPrintThatPeelsOffASecondPhotographWithALitCurlingUnderside() { const reduce = useReducedMotion(); const stage = useRef(null); const print = useRef(null); const canvas = useRef(null); const first = useRef(null); const second = useRef(null); /** Where a person is holding the corner (in print heights from its top left), when they last moved, and a request to pull it off. */ const hand = useRef({ x: 0, y: 0, at: -1e6, pull: false }); const [live, setLive] = useState(false); const [top, setTop] = useState(0); useEffect(() => { const host = stage.current; const el = print.current; const cv = canvas.current; const one = first.current; const two = second.current; if (reduce || !host || !el || !cv || !one || !two) return; const gl = cv.getContext("webgl", { antialias: false, alpha: true, premultipliedAlpha: true }); 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"), rect: u("u_rect"), img: u("u_img"), c: u("u_c"), d: u("u_d"), r: u("u_r"), fade: u("u_fade"), top: u("u_top") }; let ready = false; let visible = true; let raf = 0; let last = 0; let ratio = 1; let aspect = 0.8; let onTop = 0; let flying = false; let idle = 0; const started = performance.now(); // The corner starts already lifted so the first frame shows what the piece is. const pos = { x: 0.8 - 0.36, y: 1 - 0.3 }; const vel = { x: 0, y: 0 }; 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 = () => { ratio = Math.min(window.devicePixelRatio || 1, 2); cv.width = Math.max(1, Math.round(host.clientWidth * ratio)); cv.height = Math.max(1, Math.round(host.clientHeight * ratio)); gl.viewport(0, 0, cv.width, cv.height); const outer = host.getBoundingClientRect(); const inner = el.getBoundingClientRect(); aspect = inner.width / inner.height; gl.uniform2f(uni.res, cv.width, cv.height); gl.uniform4f(uni.rect, (inner.left - outer.left) * ratio, (inner.top - outer.top) * ratio, inner.width * ratio, inner.height * ratio); }; 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 kx = aspect; const ky = 1; const held = stamp - hand.current.at < 2200; if (hand.current.pull) { hand.current.pull = false; flying = true; } let tx: number; let ty: number; let stiff = 46; if (flying) { // Pulled clean off: the corner heads up and away past the far side of the print. tx = kx - 3.4; ty = ky - 1.5; stiff = 9; } else if (held) { tx = hand.current.x; ty = hand.current.y; idle = 0; } else { // Nobody is holding it: the corner lifts and settles by itself, and now and then the print comes away. idle += dt; const reach = 0.46 + 0.2 * Math.sin(t * 0.85 - 0.6); const lean = -2.5 + 0.2 * Math.sin(t * 0.53); tx = kx + Math.cos(lean) * reach; ty = ky + Math.sin(lean) * reach; if (idle > 6.4) flying = true; } // The paper does not stretch: the corner cannot go further from the two pinned corners than the edges are long. if (!flying) { const pin = (cx: number, cy: number, max: number) => { const dx = tx - cx; const dy = ty - cy; const far = Math.hypot(dx, dy); if (far > max) { tx = cx + (dx / far) * max; ty = cy + (dy / far) * max; } }; pin(kx, 0, 1); pin(0, ky, kx); } const damp = 2 * Math.sqrt(stiff) * (flying ? 1 : 0.72); vel.x += ((tx - pos.x) * stiff - vel.x * damp) * dt; vel.y += ((ty - pos.y) * stiff - vel.y * damp) * dt; pos.x += vel.x * dt; pos.y += vel.y * dt; let dx = kx - pos.x; let dy = ky - pos.y; let gone = Math.hypot(dx, dy); if (flying && gone > 2.9) { // The top print has left. The one underneath is now on top, with the other slid in below it. onTop = 1 - onTop; setTop(onTop); flying = false; idle = 0; pos.x = kx - 0.02; pos.y = ky - 0.015; vel.x = 0; vel.y = 0; dx = 0.02; dy = 0.015; gone = 0.025; } if (gone < 0.004) { dx = 0.0032; dy = 0.0024; gone = 0.004; } const r = Math.min(CURL, (gone / Math.PI) * 0.8); const along = (gone + Math.PI * r) / 2; gl.uniform2f(uni.d, dx / gone, dy / gone); gl.uniform2f(uni.c, kx - (dx / gone) * along, ky - (dy / gone) * along); gl.uniform1f(uni.r, r); gl.uniform1f(uni.fade, flying ? 1 - Math.min(1, Math.max(0, (gone - 2.0) / 0.8)) : 1); gl.uniform1f(uni.top, onTop); 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(host); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); io.observe(host); 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 hold(e: ReactPointerEvent) { const r = e.currentTarget.getBoundingClientRect(); hand.current = { ...hand.current, x: (e.clientX - r.left) / r.height, y: (e.clientY - r.top) / r.height, at: performance.now() }; } /** Letting go far enough from the corner, or pressing the button from the keyboard, takes the print off. */ function release(e: ReactPointerEvent) { const r = e.currentTarget.getBoundingClientRect(); const far = Math.hypot(r.width / r.height - hand.current.x, 1 - hand.current.y); if (far > LET_GO) hand.current = { ...hand.current, pull: true, at: -1e6 }; void e; } function takeOff() { if (live) hand.current = { ...hand.current, pull: true, at: -1e6 }; else setTop((n) => 1 - n); } const upper = prints[top]; const lower = prints[1 - top]; return (

); } 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/glossy-photo-print-that-peels-off-a-second-photograph-with-a-lit-curling-underside.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]