60: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"] 61:T53ec,import { useEffect, useRef, useState } from "react"; // The frames on the roll. `focus` is where on the ring (0 near, 1 far) this picture is sharp. const shots = [ { photo: "https://images.pexels.com/photos/3765140/pexels-photo-3765140.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800", alt: "Young woman in oversized pale blue sunglasses and a mustard roll-neck against a turquoise wall", tone: "#3aa9c4", focus: 0.58, speed: "250", stop: "2.8" }, { photo: "https://images.pexels.com/photos/14793008/pexels-photo-14793008.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800", alt: "Woman with long hair lit deep blue in front of a yellow backdrop", tone: "#8a7a10", focus: 0.3, speed: "125", stop: "2" }, { photo: "https://images.pexels.com/photos/9769861/pexels-photo-9769861.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800", alt: "Woman with braided hair lifting green oval sunglasses, wearing a pale green jacket", tone: "#8f9499", focus: 0.76, speed: "500", stop: "4" }, { photo: "https://images.pexels.com/photos/20829098/pexels-photo-20829098.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800", alt: "Woman with bright red hair falling across half her face in low evening sun", tone: "#6b5a4c", focus: 0.44, speed: "1000", stop: "1.4" }, ]; const distances = ["0.45", "0.5", "0.6", "0.7", "0.85", "1", "1.2", "1.5", "2", "3", "5", "10", "∞"]; // metres, engraved round the ring const SPAN = 2.7; // radians the ring turns from nearest focus to infinity const SHARP = 0.012; // how close the ring must be to count as in focus const INDEX = "#ff8a3c"; // the painted index line under the ring const GRAIN = `url("data:image/svg+xml,${encodeURIComponent('')}")`; const PRISM = "repeating-conic-gradient(#000 0 25%, transparent 0 50%)"; export default function SlrViewfinderSplitImageGallery() { const view = useRef(null); const glass = useRef(null); const ringBox = useRef(null); const canvas = useRef(null); const [index, setIndex] = useState(0); const [sharp, setSharp] = useState(false); const [ringValue, setRingValue] = useState(0.2); const [firing, setFiring] = useState(false); const api = useRef<{ fire: (fromUser: boolean) => void; turnTo: (v: number) => void } | null>(null); useEffect(() => { const root = view.current, pane = glass.current, box = ringBox.current, cv = canvas.current; if (!root || !pane || !box || !cv) return; const ctx = cv.getContext("2d"); if (!ctx) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const dpr = Math.min(2, window.devicePixelRatio || 1); const s = { v: reduce ? shots[0].focus : shots[0].focus - 0.3, vel: 0, target: null as number | null, drag: false, idx: 0, sharp: false, busy: false, W: 300, H: 78 }; const timers: number[] = []; const later = (fn: () => void, ms: number) => { timers.push(window.setTimeout(fn, ms)); }; const size = () => { const g = pane.getBoundingClientRect(); root.style.setProperty("--slrvf-w", `${g.width}px`); root.style.setProperty("--slrvf-h", `${g.height}px`); s.W = box.clientWidth; s.H = box.clientHeight; cv.width = Math.round(s.W * dpr); cv.height = Math.round(s.H * dpr); }; // The focus ring, seen from above: a cylinder, so everything bunches up towards the two edges. const drawRing = () => { const { W, H } = s, cx = W / 2, R = W / 2 - 1, GRIP = Math.round(H * 0.56), TL = -0.5; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); ctx.fillStyle = "#070708"; ctx.fillRect(cx - R, 0, R * 2, H); const phi = s.v * SPAN, step = 0.074; const k0 = Math.floor((phi - Math.PI / 2) / step); for (let k = k0; k <= k0 + Math.ceil(Math.PI / step) + 1; k++) { const th = k * step - phi; if (th < -Math.PI / 2 || th > Math.PI / 2) continue; const x0 = cx + R * Math.sin(th), x1 = cx + R * Math.sin(Math.min(Math.PI / 2, th + step * 0.56)); const light = Math.pow(Math.max(0, Math.cos(th - TL)), 4), body = Math.max(0, Math.cos(th)); const v = 17 + 64 * light + 16 * body; const g = ctx.createLinearGradient(0, 2, 0, GRIP - 2); g.addColorStop(0, `rgb(${v * 0.45},${v * 0.45},${v * 0.48})`); g.addColorStop(0.12, `rgb(${v + 14},${v + 14},${v + 17})`); g.addColorStop(0.22, `rgb(${v},${v},${v + 3})`); g.addColorStop(0.85, `rgb(${v * 0.9},${v * 0.9},${v * 0.93})`); g.addColorStop(1, `rgb(${v * 0.35},${v * 0.35},${v * 0.38})`); ctx.fillStyle = g; ctx.fillRect(x0, 2, Math.max(0.6, x1 - x0), GRIP - 4); ctx.fillStyle = `rgba(255,255,255,${0.05 + 0.3 * light})`; ctx.fillRect(x0, 2, 0.7, GRIP - 4); } // bright metal band under the rubber const chrome = ctx.createLinearGradient(cx - R, 0, cx + R, 0); ([[0, 12], [0.1, 60], [0.2, 120], [0.265, 250], [0.31, 150], [0.45, 72], [0.62, 44], [0.8, 86], [0.93, 40], [1, 8]] as [number, number][]).forEach(([p, v]) => chrome.addColorStop(p, `rgb(${v},${v},${Math.min(255, v + 6)})`)); ctx.fillStyle = chrome; ctx.fillRect(cx - R, GRIP, R * 2, 4); ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(cx - R, GRIP + 4, R * 2, 1); // engraved distance scale ctx.fillStyle = "#121214"; ctx.fillRect(cx - R, GRIP + 5, R * 2, H - GRIP - 5); ctx.textAlign = "center"; ctx.textBaseline = "middle"; const n = distances.length, mid = GRIP + 5 + (H - GRIP - 5) * 0.56; for (let i = 0; i < n * 4 - 3; i++) { const th = (i / (n * 4 - 4) - s.v) * SPAN; if (Math.abs(th) > 1.5) continue; const x = cx + R * Math.sin(th), c = Math.cos(th), major = i % 4 === 0; ctx.fillStyle = `rgba(238,240,243,${(major ? 0.85 : 0.4) * (0.25 + 0.75 * c)})`; ctx.fillRect(x - 0.5, GRIP + 6, 1, major ? 5 : 3); if (!major) continue; ctx.save(); ctx.translate(x, mid + 1.5); ctx.scale(Math.max(0.05, c), 1); ctx.font = `600 ${distances[i / 4] === "∞" ? 15 : 11}px ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif`; ctx.fillStyle = `rgba(0,0,0,0.8)`; ctx.fillText(distances[i / 4], 0, 0.8); ctx.fillStyle = `rgba(238,240,243,${0.2 + 0.75 * c})`; ctx.fillText(distances[i / 4], 0, 0); ctx.restore(); } // roundness: dark limbs and one long highlight where the lamp hits the barrel const limb = ctx.createLinearGradient(cx - R, 0, cx + R, 0); limb.addColorStop(0, "rgba(0,0,0,0.94)"); limb.addColorStop(0.16, "rgba(0,0,0,0.3)"); limb.addColorStop(0.255, "rgba(255,255,255,0.1)"); limb.addColorStop(0.3, "rgba(255,255,255,0.02)"); limb.addColorStop(0.6, "rgba(0,0,0,0.08)"); limb.addColorStop(0.86, "rgba(0,0,0,0.5)"); limb.addColorStop(1, "rgba(0,0,0,0.96)"); ctx.fillStyle = limb; ctx.fillRect(cx - R, 0, R * 2, H); }; const apply = () => { const want = shots[s.idx].focus; const e = Math.max(-1, Math.min(1, (s.v - want) * 3.2)); root.style.setProperty("--slrvf-e", e.toFixed(4)); root.style.setProperty("--slrvf-a", Math.abs(e).toFixed(4)); const ok = Math.abs(s.v - want) < SHARP; root.dataset.focus = ok ? "ok" : e < 0 ? "near" : "far"; if (ok !== s.sharp) { s.sharp = ok; setSharp(ok); } drawRing(); }; let raf = 0, last = 0, seen = true, touched = -1e9, heldSince = 0, startAt = performance.now() + 350, hold = 5200; const fire = (fromUser: boolean) => { if (fromUser) touched = performance.now(); if (s.busy) return; s.busy = true; const next = () => { s.idx = (s.idx + 1) % shots.length; setIndex(s.idx); heldSince = 0; startAt = performance.now() + 900; s.target = null; apply(); }; if (reduce) { next(); s.busy = false; return; } setFiring(true); later(next, 150); later(() => { setFiring(false); s.busy = false; wake(); }, 460); }; const frame = (now: number) => { raf = 0; const dt = Math.min(0.033, (now - last) / 1000); last = now; const idle = now - touched > 8000; if (idle && !s.drag && !s.busy) { if (s.target === null && now > startAt) s.target = shots[s.idx].focus; if (s.sharp) { if (!heldSince) heldSince = now; else if (now - heldSince > hold) { hold = 2600; fire(false); } } else heldSince = 0; } if (s.target !== null && !s.drag) { // hunt a little past the mark and come back, the way a hand does s.vel += (62 * (s.target - s.v) - 9.5 * s.vel) * dt; s.v += s.vel * dt; if (Math.abs(s.target - s.v) < 0.0006 && Math.abs(s.vel) < 0.004) { s.v = s.target; s.vel = 0; s.target = null; setRingValue(s.v); } } apply(); if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf && !reduce) { last = performance.now(); raf = requestAnimationFrame(frame); } }; api.current = { fire, turnTo: (v) => { touched = performance.now(); s.target = null; s.vel = 0; s.v = v; setRingValue(v); if (reduce) apply(); else wake(); }, }; // Dragging the ring: the surface follows the finger, and it drops into focus when let go close enough. let lastX = 0; const onDown = (e: PointerEvent) => { s.drag = true; s.target = null; s.vel = 0; lastX = e.clientX; touched = performance.now(); box.setPointerCapture(e.pointerId); e.preventDefault(); wake(); }; const onMove = (e: PointerEvent) => { if (!s.drag) return; touched = performance.now(); s.v = Math.max(0, Math.min(1, s.v - (e.clientX - lastX) / ((s.W / 2) * SPAN))); lastX = e.clientX; if (reduce) apply(); }; const onUp = () => { if (!s.drag) return; s.drag = false; touched = performance.now(); const want = shots[s.idx].focus; if (Math.abs(s.v - want) < 0.05) { if (reduce) { s.v = want; apply(); } else s.target = want; } setRingValue(s.v); }; box.addEventListener("pointerdown", onDown); box.addEventListener("pointermove", onMove); box.addEventListener("pointerup", onUp); box.addEventListener("pointercancel", onUp); const ro = new ResizeObserver(() => { size(); apply(); }); ro.observe(pane); ro.observe(box); size(); apply(); wake(); const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen) wake(); }); io.observe(root); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); timers.forEach((t) => window.clearTimeout(t)); api.current = null; box.removeEventListener("pointerdown", onDown); box.removeEventListener("pointermove", onMove); box.removeEventListener("pointerup", onUp); box.removeEventListener("pointercancel", onUp); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, []); const shot = shots[index]; // One copy of the picture, sized and placed to sit exactly over the ground glass wherever it is nested. const copy = (extra = "") => (

); const prism = (shift: string, offset: string) => (

{copy()}

); return (

{/* The view through the eyepiece: nothing but black round the screen. */}

{/* The ground glass. */}

{/* fresnel rings and the grain of the screen */}

{/* microprism collar: two copies seen through opposite squares of a fine check, pulled apart when out of focus */}

{prism("5.5%", "0 0")} {prism("-5.5%", "3.5px 0")}

{/* split image: the top half slides one way and the bottom half the other until the edges meet */}

{copy()}

{/* the edge of the eyepiece and the mirror that swings up when the shutter fires */}

{/* The lens barrel from above, and the shutter release. */}

{sharp ? "In focus" : "Turn the ring"} / {sharp ? "press the release" : "line up the two halves"}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"components/we-inc/slr-viewfinder-photo-gallery-with-a-split-image-focusing-circle-you-line-up-before-the-shutter-fires.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]