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:T36ba,import { useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; // Everything a visitor would change lives here. The photograph must be shot against one plain backdrop colour. const hero = { studio: "Face Value", place: "Portrait studio, Leith", behind: "FACE", inFront: "VALUE", line: "One sitter, one hour, one roll of film. Sittings by appointment, Tuesday to Saturday.", button: "Book a sitting", photo: "https://images.pexels.com/photos/32174976/pexels-photo-32174976.jpeg?auto=compress&cs=tinysrgb&w=1100", alt: "A woman with a round afro and tassel earrings in a black top, both hands raised to her hair, looking past the camera", }; /** How far a pixel must be from the backdrop colour to start counting as the sitter, and where it is fully her. */ const KEY_FROM = 26; const KEY_TO = 70; /** Width the backdrop is studied at. The cut-out itself is drawn at the photo's full size. */ const STUDY = 560; /** Enclosed backdrop-coloured patches smaller than this many studied pixels are kept as part of the sitter. */ const POCKET = 140; /** Solves a small set of linear equations in place. Used to fit a smooth backdrop colour across the frame. */ function solve(m: number[][], v: number[]) { const n = v.length; for (let c = 0; c < n; c++) { let best = c; for (let r = c + 1; r < n; r++) if (Math.abs(m[r][c]) > Math.abs(m[best][c])) best = r; [m[c], m[best]] = [m[best], m[c]]; [v[c], v[best]] = [v[best], v[c]]; const d = m[c][c] || 1e-9; for (let r = c + 1; r < n; r++) { const f = m[r][c] / d; for (let k = c; k < n; k++) m[r][k] -= f * m[c][k]; v[r] -= f * v[c]; } } const out = new Array(n).fill(0); for (let r = n - 1; r >= 0; r--) { let s = v[r]; for (let k = r + 1; k < n; k++) s -= m[r][k] * out[k]; out[r] = s / (m[r][r] || 1e-9); } return out; } /** * Lifts the sitter off a plain backdrop. It learns the backdrop from the top and side margins of the frame * (including any soft falloff of light across it), then keeps everything that is not backdrop, plus any * backdrop-coloured patch that the backdrop cannot reach from the edges (lips, a red earring). */ function cutOut(img: HTMLImageElement, target: HTMLCanvasElement) { const w = STUDY; const h = Math.round((STUDY * img.naturalHeight) / img.naturalWidth); const small = document.createElement("canvas"); small.width = w; small.height = h; const sc = small.getContext("2d", { willReadFrequently: true }); const out = target.getContext("2d"); if (!sc || !out) return false; sc.drawImage(img, 0, 0, w, h); const px = sc.getImageData(0, 0, w, h); const d = px.data; const terms = (x: number, y: number) => [1, x, y, x * x, y * y, x * y]; const inMargin = (x: number, y: number) => y < h * 0.8 && (y < h * 0.06 || x < w * 0.04 || x > w * 0.96); // A first rough backdrop colour, so that anything else in the margins (a sleeve, a shoulder) is left out of the fit. let n = 0; const mean = [0, 0, 0]; for (let y = 0; y < h; y += 3) for (let x = 0; x < w; x += 3) if (inMargin(x, y) && y < h * 0.3) { const i = (y * w + x) * 4; mean[0] += d[i]; mean[1] += d[i + 1]; mean[2] += d[i + 2]; n++; } if (!n) return false; mean.forEach((_, c) => (mean[c] /= n)); const A = Array.from({ length: 6 }, () => new Array(6).fill(0)); const B = [new Array(6).fill(0), new Array(6).fill(0), new Array(6).fill(0)]; for (let y = 0; y < h; y += 2) for (let x = 0; x < w; x += 2) { if (!inMargin(x, y)) continue; const i = (y * w + x) * 4; if (Math.abs(d[i] - mean[0]) + Math.abs(d[i + 1] - mean[1]) + Math.abs(d[i + 2] - mean[2]) > 110) continue; const t = terms(x / w, y / h); for (let a = 0; a < 6; a++) { for (let b = 0; b < 6; b++) A[a][b] += t[a] * t[b]; for (let c = 0; c < 3; c++) B[c][a] += t[a] * d[i + c]; } } const fit = B.map((b) => solve(A.map((row) => row.slice()), b.slice())); const total = w * h; const alpha = new Float32Array(total); for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) { const i = y * w + x; const t = terms(x / w, y / h); let dist = 0; for (let c = 0; c < 3; c++) { let bg = 0; for (let a = 0; a < 6; a++) bg += fit[c][a] * t[a]; const diff = d[i * 4 + c] - bg; dist += diff * diff; } const k = Math.min(1, Math.max(0, (Math.sqrt(dist) - KEY_FROM) / (KEY_TO - KEY_FROM))); // The top sliver of a studio frame often catches the edge of the paper roll, so it is dropped. alpha[i] = y < h * 0.03 ? 0 : k * k * (3 - 2 * k); } // Flood in from the top and sides: only backdrop that connects to the edge of the frame is removed. const reached = new Uint8Array(total); const stack = new Int32Array(total); let top = 0; const visit = (i: number) => { if (!reached[i] && alpha[i] < 0.999) { reached[i] = 1; stack[top++] = i; } }; for (let x = 0; x < w; x++) visit(x); for (let y = 0; y < h; y++) { visit(y * w); visit(y * w + w - 1); } while (top) { const i = stack[--top]; const x = i % w; if (x > 0) visit(i - 1); if (x < w - 1) visit(i + 1); if (i >= w) visit(i - w); if (i < total - w) visit(i + w); } // Backdrop the flood could not reach (the gap between an arm and the neck) is also removed, but only when the // patch is clearly backdrop and big enough not to be a mouth or a bead. const patch = new Int32Array(total); for (let start = 0; start < total; start++) { if (reached[start] || alpha[start] > 0.2) continue; let size = 0; top = 0; reached[start] = 2; stack[top++] = start; while (top) { const i = stack[--top]; patch[size++] = i; const x = i % w; const near = [x > 0 ? i - 1 : -1, x < w - 1 ? i + 1 : -1, i - w, i + w]; for (const j of near) if (j >= 0 && j < total && !reached[j] && alpha[j] <= 0.2) { reached[j] = 2; stack[top++] = j; } } if (size < POCKET) for (let k = 0; k < size; k++) reached[patch[k]] = 3; } for (let i = 0; i < total; i++) { d[i * 4 + 3] = Math.round((reached[i] === 1 || reached[i] === 2 ? alpha[i] : 1) * 255); } sc.putImageData(px, 0, 0); target.width = img.naturalWidth; target.height = img.naturalHeight; out.drawImage(img, 0, 0); out.globalCompositeOperation = "destination-in"; out.imageSmoothingEnabled = true; out.imageSmoothingQuality = "high"; out.drawImage(small, 0, 0, target.width, target.height); out.globalCompositeOperation = "source-over"; return true; } export default function PortraitStudioHeroWithAGiantHeadlineThatPassesBehindTheSitterAndInFrontOfHer() { const reduce = useReducedMotion(); const stage = useRef(null); const photo = useRef(null); const canvas = useRef(null); const backWord = useRef(null); const frontWord = useRef(null); /** "cut" once the sitter has been lifted off her backdrop, "plain" if the photo could not be read. */ const [state, setState] = useState<"wait" | "cut" | "plain">("wait"); const steered = useRef(-1e6); // One shared pointer position, from -1 to 1 each way. Each layer moves by a different amount of it. const px = useMotionValue(0); const py = useMotionValue(0); const sx = useSpring(px, { stiffness: 60, damping: 16, mass: 1.1 }); const sy = useSpring(py, { stiffness: 60, damping: 16, mass: 1.1 }); /** Narrow screens get a smaller swing, so the front word never leaves the frame. */ const reach = useRef(1); const backX = useTransform(sx, (v) => v * -26 * reach.current); const backY = useTransform(sy, (v) => v * -10 * reach.current); const midX = useTransform(sx, (v) => v * 12 * reach.current); const midY = useTransform(sy, (v) => v * 5 * reach.current); const frontX = useTransform(sx, (v) => v * 46 * reach.current); const frontY = useTransform(sy, (v) => v * 16 * reach.current); const shadow = useTransform([sx, sy], ([x, y]: number[]) => `drop-shadow(${-30 - x * 22}px ${20 - y * 10}px 26px rgba(60,2,6,0.62))`); // With nobody steering, the camera drifts a little from side to side so the three layers keep sliding apart. useAnimationFrame((t) => { if (reduce || performance.now() - steered.current < 2400) return; px.set(Math.sin(t / 2300 + 0.9) * 0.8); py.set(Math.sin(t / 3100) * 0.5); }); useEffect(() => { const img = photo.current; const cv = canvas.current; if (!img || !cv) return; const run = () => { if (!img.naturalWidth) return; try { setState(cutOut(img, cv) ? "cut" : "plain"); } catch { // The photo host did not let the page read the picture: show it uncut, with the whole headline in front. setState("plain"); } }; const fail = () => setState("plain"); if (img.complete) run(); img.addEventListener("load", run); img.addEventListener("error", fail); return () => { img.removeEventListener("load", run); img.removeEventListener("error", fail); }; }, []); // Both words are set to the same measure, like a poster, whatever font the visitor's system supplies. useEffect(() => { const el = stage.current; if (!el) return; const fitWords = () => { const measure = Math.min(el.clientWidth * 0.8, 960); reach.current = Math.min(1, el.clientWidth / 1200); [backWord.current, frontWord.current].forEach((word) => { if (!word) return; word.style.fontSize = "100px"; const wide = word.getBoundingClientRect().width || 1; word.style.fontSize = `${(100 * measure) / wide}px`; }); }; fitWords(); const ro = new ResizeObserver(fitWords); ro.observe(el); return () => ro.disconnect(); }, []); function steer(e: ReactPointerEvent) { if (reduce) return; const r = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - r.left) / r.width) * 2 - 1); py.set(((e.clientY - r.top) / r.height) * 2 - 1); steered.current = performance.now(); } const word = "block whitespace-nowrap font-sans font-black leading-[0.76] tracking-[-0.065em] text-[#fff6ec] will-change-transform"; return (

{hero.studio} {hero.place}

{hero.behind} {hero.inFront}

{/* Furthest away: the first word, a touch soft, with the sitter's shadow falling across it. */} {/* In the middle: the sitter, standing on the bottom edge of the section. */}

{/* Nearest: the second word, crossing in front of her and throwing its own shadow back onto her. */}

{hero.line}

{hero.button}

); } 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-studio-hero-with-a-giant-headline-that-passes-behind-the-sitter-and-in-front-of-her.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]