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:T55fe,import { useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; /** The print on the wall. */ const PHOTO = "https://images.pexels.com/photos/15759123/pexels-photo-15759123.jpeg?auto=compress&cs=tinysrgb&w=1200"; const PHOTO_ALT = "Studio portrait of a woman in round sunglasses and a pale jacket, seen in profile with a long ponytail"; /** * Sets of coloured gels for the three spotlights. Each lamp has a colour and the * direction it shines from, as seen from the ball: right, down, towards you. * Lamps set to the side or overhead throw the squarest flecks on the wall. */ const gels = [ { name: "Late set", lamps: [{ tint: [255, 236, 205], from: [-0.2, -1, 0.34] }, { tint: [255, 62, 150], from: [-1, -0.34, 0.26] }, { tint: [70, 170, 255], from: [1, -0.16, 0.3] }] }, { name: "Amber room", lamps: [{ tint: [255, 222, 170], from: [-0.2, -1, 0.34] }, { tint: [255, 120, 40], from: [-1, -0.34, 0.26] }, { tint: [255, 60, 70], from: [1, -0.16, 0.3] }] }, { name: "Cold blue", lamps: [{ tint: [235, 244, 255], from: [-0.2, -1, 0.34] }, { tint: [80, 110, 255], from: [-1, -0.34, 0.26] }, { tint: [60, 230, 210], from: [1, -0.16, 0.3] }] }, ]; const ball = { /** Rows of mirror tiles from pole to pole, and tiles round the equator. */ rows: 23, around: 46, /** How unevenly the tiles are glued on, in radians. This is what makes the flecks irregular. */ wobble: 0.014, /** Resting speed in turns of a radian per second. */ idle: 0.42, /** How far the ball hangs from the wall, as a share of the stage height. */ standoff: 0.4, /** How much of full daylight the room keeps. The flecks show the print at full brightness. */ room: 0.3, }; type Tile = { c: number[]; n: number[]; q: number[][]; silver: number }; function buildTiles(): Tile[] { const tiles: Tile[] = []; let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const at = (lat: number, lon: number) => [Math.cos(lat) * Math.sin(lon), -Math.sin(lat), Math.cos(lat) * Math.cos(lon)]; const band = (Math.PI * 0.93) / ball.rows; for (let j = 0; j < ball.rows; j++) { const lat = -Math.PI * 0.465 + band * (j + 0.5); const count = Math.max(6, Math.round(ball.around * Math.cos(lat))); const step = (Math.PI * 2) / count; const shift = rnd() * step * 0.5; for (let i = 0; i < count; i++) { const lon = shift + i * step; const g = 0.46; // a tile fills 92% of its cell; the rest is the dark gap between tiles const q = [at(lat - band * g, lon - step * g), at(lat - band * g, lon + step * g), at(lat + band * g, lon + step * g), at(lat + band * g, lon - step * g)]; const c = at(lat, lon); const n = [c[0] + (rnd() - 0.5) * 2 * ball.wobble, c[1] + (rnd() - 0.5) * 2 * ball.wobble, c[2] + (rnd() - 0.5) * 2 * ball.wobble]; const l = Math.hypot(n[0], n[1], n[2]); tiles.push({ c, n: [n[0] / l, n[1] / l, n[2] / l], q, silver: 0.72 + rnd() * 0.4 }); } } return tiles; } const unit = (v: number[]) => { const l = Math.hypot(v[0], v[1], v[2]) || 1; return [v[0] / l, v[1] / l, v[2] / l]; }; export default function MirrorBallPortrait() { const reduce = useReducedMotion(); const stage = useRef(null); const canvas = useRef(null); const print = useRef(null); const orb = useRef(null); const [gel, setGel] = useState(0); const gelNow = useRef(0); gelNow.current = gel; const spin = useRef({ speed: ball.idle, dir: 1, drag: false, lastX: 0, lastT: 0, travelled: 0 }); const spot = useRef({ x: 0, y: 0 }); const redraw = useRef<() => void>(() => {}); useEffect(() => { const cv = canvas.current; const el = stage.current; const img = print.current; const orbEl = orb.current; const ctx = cv?.getContext("2d"); if (!cv || !el || !img || !orbEl || !ctx) return; const tiles = buildTiles(); const dim = document.createElement("canvas"); const lit = document.createElement("canvas"); const light = document.createElement("canvas"); const px = light.getContext("2d")!; const mask = document.createElement("canvas"); const mx2 = mask.getContext("2d")!; const glowDot = document.createElement("canvas"); glowDot.width = glowDot.height = 64; { const g = glowDot.getContext("2d")!; const grad = g.createRadialGradient(32, 32, 0, 32, 32, 32); grad.addColorStop(0, "rgba(255,255,255,1)"); grad.addColorStop(0.18, "rgba(255,255,255,0.55)"); grad.addColorStop(0.5, "rgba(255,255,255,0.1)"); grad.addColorStop(1, "rgba(255,255,255,0)"); g.fillStyle = grad; g.fillRect(0, 0, 64, 64); } const grainTile = document.createElement("canvas"); grainTile.width = grainTile.height = 128; { const g = grainTile.getContext("2d")!; const data = g.createImageData(128, 128); let seed = 11; for (let i = 0; i < data.data.length; i += 4) { seed = (seed * 16807) % 2147483647; const v = seed % 256; data.data[i] = data.data[i + 1] = data.data[i + 2] = v; data.data[i + 3] = 255; } g.putImageData(data, 0, 0); } // One soft disc of light per lamp, white-hot in the middle. const blobs: { key: string; cv: HTMLCanvasElement }[] = []; const blobFor = (k: number, tint: number[]) => { const key = tint.join(","); if (blobs[k]?.key === key) return blobs[k].cv; const c = document.createElement("canvas"); c.width = c.height = 96; const g = c.getContext("2d")!; const grad = g.createRadialGradient(48, 48, 0, 48, 48, 48); const hot = tint.map((v) => Math.round(v + (255 - v) * 0.55)).join(","); grad.addColorStop(0, `rgba(${hot},1)`); grad.addColorStop(0.55, `rgba(${key},1)`); grad.addColorStop(0.74, `rgba(${key},0.72)`); grad.addColorStop(0.88, `rgba(${key},0.12)`); grad.addColorStop(1, `rgba(${key},0)`); g.fillStyle = grad; g.fillRect(0, 0, 96, 96); blobs[k] = { key, cv: c }; return c; }; let W = 1; let H = 1; let dpr = 1; let bx = 0; let by = 0; let R = 60; let angle = 0.6; let raf = 0; let visible = true; let before = 0; const key = { x: 0, y: 0 }; /** The room twice over: once as it looks in the dark, once as it would look fully lit. */ const paintRoom = () => { const s = el.getBoundingClientRect(); const p = img.getBoundingClientRect(); const px = p.left - s.left; const py = p.top - s.top; const edge = Math.max(5, p.width * 0.026); for (const [target, bright] of [[dim, false], [lit, true]] as const) { target.width = cv.width; target.height = cv.height; const c = target.getContext("2d")!; c.setTransform(dpr, 0, 0, dpr, 0, 0); // The painted wall, a little lighter where the room's own light pools. const wall = c.createRadialGradient(W * 0.5, H * 0.46, 0, W * 0.5, H * 0.46, Math.max(W, H) * 0.75); if (bright) { wall.addColorStop(0, "#b9b0bd"); wall.addColorStop(1, "#8f8695"); } else { wall.addColorStop(0, "#191520"); wall.addColorStop(1, "#0a080d"); } c.fillStyle = wall; c.fillRect(0, 0, W, H); // Fine plaster grain, which also keeps the dark gradient from showing bands. c.globalAlpha = bright ? 0.04 : 0.03; c.fillStyle = c.createPattern(grainTile, "repeat")!; c.fillRect(0, 0, W, H); c.globalAlpha = 1; // The print: a soft shadow under it, its white paper border, then the photograph. if (!bright) { c.shadowColor = "rgba(0,0,0,0.75)"; c.shadowBlur = 44; c.shadowOffsetY = 22; } c.fillStyle = bright ? "#f6f2ea" : "#2f2c33"; c.fillRect(px - edge, py - edge, p.width + edge * 2, p.height + edge * 2); c.shadowColor = "transparent"; if (img.complete && img.naturalWidth > 0) { const scale = Math.max(p.width / img.naturalWidth, p.height / img.naturalHeight); const sw = p.width / scale; const sh = p.height / scale; c.drawImage(img, (img.naturalWidth - sw) / 2, (img.naturalHeight - sh) * 0.3, sw, sh, px, py, p.width, p.height); } else { c.fillStyle = "#8d8a8c"; c.fillRect(px, py, p.width, p.height); } if (!bright) { c.fillStyle = `rgba(9,7,16,${1 - ball.room})`; c.fillRect(px, py, p.width, p.height); } } }; const resize = () => { const s = el.getBoundingClientRect(); W = Math.max(1, s.width); H = Math.max(1, s.height); dpr = Math.min(Math.max(window.devicePixelRatio || 1, 1), 1.5); cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr); light.width = cv.width; light.height = cv.height; mask.width = Math.ceil(cv.width / 2); mask.height = Math.ceil(cv.height / 2); const o = orbEl.getBoundingClientRect(); R = o.width / 2; bx = o.left - s.left + R; by = o.top - s.top + R; paintRoom(); draw(); }; const draw = () => { const lamps = gels[gelNow.current].lamps; const D = H * ball.standoff; const far = H * 0.95; const cos = Math.cos(angle); const sin = Math.sin(angle); const turn = (v: number[]) => [v[0] * cos + v[2] * sin, v[1], -v[0] * sin + v[2] * cos]; const lampAt = lamps.map((l, k) => { const d = unit(k === 0 ? [l.from[0] + key.x * 0.5, l.from[1] + key.y * 0.4, l.from[2]] : l.from); return { dir: d, pos: [bx + d[0] * far, by + d[1] * far, D + d[2] * far], tint: l.tint }; }); // 1. The flecks, drawn white-hot in each lamp's colour on black. const lx = mx2; lx.setTransform(dpr * 0.5, 0, 0, dpr * 0.5, 0, 0); lx.globalCompositeOperation = "source-over"; lx.fillStyle = "#000"; lx.fillRect(0, 0, W, H); lx.globalCompositeOperation = "lighter"; const side = (R * Math.PI * 2) / ball.around; const flashes: number[][] = []; const turned = tiles.map((t) => ({ c: turn(t.c), n: turn(t.n), q: t.q.map(turn), silver: t.silver })); lampAt.forEach((lamp, k) => { const blob = blobFor(k, lamp.tint); for (const t of turned) { const cx = bx + t.c[0] * R; const cy = by + t.c[1] * R; const cz = D + t.c[2] * R; let ix = cx - lamp.pos[0]; let iy = cy - lamp.pos[1]; let iz = cz - lamp.pos[2]; // The tile must be on the lit side of the ball and face the lamp. if (ix * t.c[0] + iy * t.c[1] + iz * t.c[2] >= 0) continue; const il = Math.hypot(ix, iy, iz); ix /= il; iy /= il; iz /= il; const dn = ix * t.n[0] + iy * t.n[1] + iz * t.n[2]; if (dn >= 0) continue; const rx = ix - 2 * dn * t.n[0]; const ry = iy - 2 * dn * t.n[1]; const rz = iz - 2 * dn * t.n[2]; if (rz > -0.2) continue; // heading away from the wall, or skimming it const reach = -cz / rz; const x = cx + rx * reach; const y = cy + ry * reach; if (x < -90 || x > W + 90 || y < -90 || y > H + 90) continue; // A fleck is a small picture of the lamp, so it is round, grows with distance // and stretches where it lands on the wall at a slant. const rad = side * (0.5 + (0.46 * reach) / D); const stretch = Math.min(1 / -rz, 3); lx.globalAlpha = Math.min(1, Math.max(0.2, (1.3 * D) / reach)) * Math.min(1, 1.7 / stretch) * t.silver; lx.save(); lx.translate(x, y); lx.rotate(Math.atan2(ry, rx)); lx.scale(stretch, 1); lx.drawImage(blob, -rad, -rad, rad * 2, rad * 2); lx.restore(); } }); lx.globalAlpha = 1; // The flecks were drawn at half size, so scaling them up softens their edges a touch. px.setTransform(1, 0, 0, 1, 0, 0); px.globalCompositeOperation = "source-over"; px.imageSmoothingQuality = "high"; px.drawImage(mask, 0, 0, light.width, light.height); px.globalCompositeOperation = "multiply"; px.drawImage(lit, 0, 0); // 3. The dark room, plus the light. ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = "source-over"; ctx.drawImage(dim, 0, 0); ctx.globalCompositeOperation = "lighter"; ctx.drawImage(light, 0, 0); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // 4. A trace of haze in each beam on its way to the ball. for (const lamp of lampAt) { const ox = bx + lamp.dir[0] * far * 0.9; const oy = by + lamp.dir[1] * far * 0.9; const len = Math.hypot(ox - bx, oy - by) || 1; const nx = (-(oy - by) / len) * R; const ny = ((ox - bx) / len) * R; const grad = ctx.createLinearGradient(ox, oy, bx, by); grad.addColorStop(0, `rgba(${lamp.tint.join(",")},0)`); grad.addColorStop(1, `rgba(${lamp.tint.join(",")},0.11)`); ctx.fillStyle = grad; ctx.beginPath(); ctx.moveTo(ox + nx * 0.35, oy + ny * 0.35); ctx.lineTo(bx + nx, by + ny); ctx.lineTo(bx - nx, by - ny); ctx.lineTo(ox - nx * 0.35, oy - ny * 0.35); ctx.closePath(); ctx.fill(); } // 5. The ball: its chain and cap, a dark core, then every tile that faces us. ctx.globalCompositeOperation = "source-over"; ctx.strokeStyle = "#57525c"; ctx.lineWidth = 1.6; ctx.setLineDash([5, 3]); ctx.beginPath(); ctx.moveTo(bx, 0); ctx.lineTo(bx, by - R - 6); ctx.stroke(); ctx.setLineDash([]); const cap = ctx.createLinearGradient(bx - R * 0.2, 0, bx + R * 0.2, 0); cap.addColorStop(0, "#2b282f"); cap.addColorStop(0.4, "#b9b4bd"); cap.addColorStop(1, "#3a363e"); ctx.fillStyle = cap; ctx.fillRect(bx - R * 0.16, by - R - 8, R * 0.32, 12); ctx.fillStyle = "#07060a"; ctx.beginPath(); ctx.arc(bx, by, R * 0.995, 0, Math.PI * 2); ctx.fill(); for (const t of turned) { if (t.c[2] < 0.03) continue; // What this tile mirrors back at the viewer. const nz = t.n[2]; const rx = 2 * nz * t.n[0]; const ry = 2 * nz * t.n[1]; const rz = 2 * nz * nz - 1; let r = 20 + 54 * Math.max(0, -ry); let g = 19 + 50 * Math.max(0, -ry); let b = 26 + 60 * Math.max(0, -ry); if (rz < 0) { r += 26; g += 22; b += 30; } let hot = 0; for (const lamp of lampAt) { const d = Math.max(0, rx * lamp.dir[0] + ry * lamp.dir[1] + rz * lamp.dir[2]); const wash = d * d * 0.5; const flash = Math.pow(d, 150) * 3.2; r += lamp.tint[0] * (wash + flash); g += lamp.tint[1] * (wash + flash); b += lamp.tint[2] * (wash + flash); if (flash > 0.9) { hot = Math.max(hot, flash); flashes.push([bx + t.c[0] * R, by + t.c[1] * R, Math.min(1, flash / 2.4), lamp.tint[0], lamp.tint[1], lamp.tint[2]]); } } const k = t.silver * (0.55 + 0.45 * t.c[2]); ctx.fillStyle = hot > 1.6 ? "#fff" : `rgb(${Math.min(255, r * k) | 0},${Math.min(255, g * k) | 0},${Math.min(255, b * k) | 0})`; ctx.beginPath(); ctx.moveTo(bx + t.q[0][0] * R, by + t.q[0][1] * R); ctx.lineTo(bx + t.q[1][0] * R, by + t.q[1][1] * R); ctx.lineTo(bx + t.q[2][0] * R, by + t.q[2][1] * R); ctx.lineTo(bx + t.q[3][0] * R, by + t.q[3][1] * R); ctx.closePath(); ctx.fill(); } // Roundness: the rim falls away from the light, with a faint sheen up and to the left. const shade = ctx.createRadialGradient(bx - R * 0.28, by - R * 0.34, R * 0.1, bx, by, R); shade.addColorStop(0, "rgba(255,255,255,0.1)"); shade.addColorStop(0.45, "rgba(0,0,0,0)"); shade.addColorStop(0.86, "rgba(0,0,0,0.3)"); shade.addColorStop(1, "rgba(0,0,0,0.72)"); ctx.fillStyle = shade; ctx.beginPath(); ctx.arc(bx, by, R, 0, Math.PI * 2); ctx.fill(); // The tiles that catch a lamp head-on flare. ctx.globalCompositeOperation = "lighter"; for (const f of flashes) { const size = R * (0.5 + f[2] * 0.9); ctx.globalAlpha = 0.35 + f[2] * 0.6; ctx.drawImage(glowDot, f[0] - size / 2, f[1] - size / 2, size, size); } ctx.globalAlpha = 1; ctx.globalCompositeOperation = "source-over"; }; redraw.current = draw; const loop = (now: number) => { raf = requestAnimationFrame(loop); const dt = Math.min((now - (before || now)) / 1000, 0.05); before = now; const s = spin.current; // Friction brings a flicked ball back to its resting speed, in whichever direction it was sent. if (!s.drag) s.speed += (ball.idle * s.dir - s.speed) * (1 - Math.exp(-dt * 0.9)); angle += s.speed * dt; const k = 1 - Math.exp(-dt * 3.5); key.x += (spot.current.x - key.x) * k; key.y += (spot.current.y - key.y) * k; draw(); }; const wake = () => { cancelAnimationFrame(raf); raf = 0; before = 0; if (reduce) draw(); else if (visible && !document.hidden) raf = requestAnimationFrame(loop); }; const ro = new ResizeObserver(resize); ro.observe(el); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); io.observe(el); const arrived = () => { paintRoom(); draw(); }; img.addEventListener("load", arrived); document.addEventListener("visibilitychange", wake); resize(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); img.removeEventListener("load", arrived); document.removeEventListener("visibilitychange", wake); }; }, [reduce]); useEffect(() => { redraw.current(); }, [gel]); function down(e: ReactPointerEvent) { spin.current.drag = true; spin.current.lastX = e.clientX; spin.current.lastT = performance.now(); spin.current.travelled = 0; } function move(e: ReactPointerEvent) { const r = e.currentTarget.getBoundingClientRect(); spot.current = { x: ((e.clientX - r.left) / r.width) * 2 - 1, y: ((e.clientY - r.top) / r.height) * 2 - 1 }; const s = spin.current; if (!s.drag || reduce) return; const now = performance.now(); const dt = Math.max(8, now - s.lastT) / 1000; const pushed = (e.clientX - s.lastX) / dt / 90; s.speed = Math.max(-7, Math.min(7, s.speed * 0.6 + pushed * 0.4)); if (Math.abs(s.speed) > 0.2) s.dir = Math.sign(s.speed); s.travelled += Math.abs(e.clientX - s.lastX); s.lastX = e.clientX; s.lastT = now; } function up() { spin.current.drag = false; } /** A click or key press on the ball is a shove against the way it is turning. */ function shove() { const s = spin.current; if (s.travelled > 8) return; // that was a flick, not a press s.dir = -s.dir; s.speed = reduce ? ball.idle * s.dir : 5.5 * s.dir; if (reduce) redraw.current(); } return (

${PHOTO_ALT}$

Mirror ball / flick it sideways to spin

); } 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/mirror-ball-on-a-chain-that-throws-drifting-flecks-of-coloured-light-across-a-portrait-print.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]