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:T392a,import { useEffect, useRef, useState } from "react"; // Everything a visitor is likely to change sits here. const places = [ { label: "Work", miles: "2", note: "Selected projects, newest first" }, { label: "Studio", miles: "¾", note: "Who we are, how a job runs" }, { label: "Journal", miles: "5", note: "Workshop notes, most weeks" }, { label: "Contact", miles: "1½", note: "Write, call or come by" }, ]; const START = 2; // the arm that points the way at load const AWAY = [197, 166, 203, 170]; // where each arm rests when it is not chosen (180 is flat left) const PAINT = "#f6f3ea"; // arm and post const INK = "#15171a"; // lettering, rims and bands const SPRING = { pull: 46, drag: 5.4 }; // lower the drag for a looser collar that swings longer const DEMO = true; // turn the arms by itself until a visitor does const layoutFor = (narrow: boolean) => narrow ? { W: 372, H: 620, cx: 186, len: 168, h: 50, pitch: 66, top: 136, font: 14.5, small: 12, tip: 18, post: 26 } : { W: 880, H: 660, cx: 440, len: 330, h: 68, pitch: 88, top: 152, font: 29, small: 23, tip: 30, post: 36 }; const GRAIN = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`; const IRON = "linear-gradient(90deg,#030303 0%,#1d1f21 16%,#5a5e62 34%,#787d82 40%,#2c2e30 58%,#0b0b0c 82%,#000 100%)"; const WHITE = "linear-gradient(90deg,#8b8c84 0%,#d9d7cc 12%,#fdfcf6 30%,#ffffff 38%,#f1eee4 56%,#c2c0b4 80%,#8e8e85 100%)"; export default function FingerPostNavigation() { const frame = useRef(null); const arms = useRef<(HTMLLIElement | null)[]>([]); const [narrow, setNarrow] = useState(false); const [scale, setScale] = useState(1); const [chosen, setChosen] = useState(START); const live = useRef({ chosen: START, hover: -1, touched: false }); const L = layoutFor(narrow); useEffect(() => { const el = frame.current; if (!el) return; const fit = () => { const slim = el.clientWidth < 700; setNarrow(slim); setScale(Math.min(1, el.clientWidth / layoutFor(slim).W)); }; fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); useEffect(() => { const el = frame.current; if (!el) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const goal = (i: number) => (i === live.current.chosen ? 0 : AWAY[i % AWAY.length] - (live.current.hover === i ? 16 : 0)); // Each arm is a heavy casting on a loose collar: an angle, a speed, and a spring towards where it should point. const state = places.map((_, i) => ({ a: goal(i) + (reduce ? 0 : i === START ? 26 : i % 2 ? -7 : 8), v: 0 })); const lx = -0.52, lz = 0.64; // the sun: over the left shoulder const paint = () => { state.forEach((s, i) => { const node = arms.current[i]; if (!node) return; const r = (s.a * Math.PI) / 180; const facing = Math.cos(r) >= 0 ? 1 : -1; const lambert = Math.max(0, facing * (-Math.sin(r) * lx + Math.cos(r) * lz)); node.style.transform = `rotateY(${(-s.a).toFixed(2)}deg)`; node.style.setProperty("--shade", (0.3 * (1 - Math.min(1, lambert / 0.72))).toFixed(3)); node.style.setProperty("--gloss", `${(50 + facing * Math.sin(r) * 150).toFixed(1)}%`); }); }; let raf = 0, last = 0, seen = true, timer = 0; const tick = (now: number) => { raf = 0; const dt = Math.min(0.032, last ? (now - last) / 1000 : 0.016); last = now; state.forEach((s, i) => { if (reduce) { s.a = goal(i); return; } const wind = Math.sin(now / 900 + i * 1.7) * 3.2 + Math.sin(now / 310 + i * 4.1) * 1.1; // a breeze never lets them sit dead still s.v += ((goal(i) - s.a) * SPRING.pull - s.v * SPRING.drag + wind) * dt; s.a += s.v * dt; }); paint(); if (seen && !document.hidden && !reduce) raf = requestAnimationFrame(tick); }; const wake = () => { if (!raf && seen && !document.hidden) { last = 0; raf = requestAnimationFrame(tick); } }; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; wake(); }); io.observe(el); document.addEventListener("visibilitychange", wake); el.addEventListener("fingerpost-wake", wake); if (DEMO && !reduce) { timer = window.setTimeout(function next() { if (live.current.touched) return; live.current.chosen = (live.current.chosen + 1) % places.length; setChosen(live.current.chosen); timer = window.setTimeout(next, 3100); }, 3500); } paint(); wake(); return () => { cancelAnimationFrame(raf); clearTimeout(timer); io.disconnect(); document.removeEventListener("visibilitychange", wake); el.removeEventListener("fingerpost-wake", wake); }; }, []); const point = (i: number) => { live.current.touched = true; live.current.chosen = i; setChosen(i); frame.current?.dispatchEvent(new Event("fingerpost-wake")); }; const lean = (i: number) => { live.current.hover = i; frame.current?.dispatchEvent(new Event("fingerpost-wake")); }; const hub = L.post / 2 - 3; // the arm starts just inside the collar const finger = `polygon(0 0, calc(100% - ${L.tip}px) 0, 100% 50%, calc(100% - ${L.tip}px) 100%, 0 100%)`; const fingerBack = `polygon(${L.tip}px 0, 100% 0, 100% 100%, ${L.tip}px 100%, 0 50%)`; const lettering = { color: INK, fontSize: L.font, letterSpacing: narrow ? "0.03em" : "0.07em", textShadow: "0 1.4px 0.6px rgba(0,0,0,0.38), 0 -0.6px 0 rgba(255,255,255,0.55), 1px 0 0 rgba(0,0,0,0.25)" }; const face = (p: (typeof places)[number], back: boolean) => ( {/* the raised rim, then the painted field inside it */} {p.label} {p.miles} {/* wet gloss paint: a soft bar of sky that slides along the arm as it turns */} {/* the two bolts that clamp the arm to its collar */} {[0.27, 0.73].map((y) => ( ))} ); return (

{/* a hazy morning: sky, far hills out of focus, grain */}

{/* the post: white gloss over cast iron, black bands at the foot */}

{[0, 2].map((b) => (

))}

{/* finial: a stepped cap and a painted ball */}

{/* one iron collar per arm */} {places.map((p, i) => (

))}

{ arms.current[i] = n; }} className="absolute" style={{ left: L.cx, top: L.top + i * L.pitch - L.h / 2, width: L.len, height: L.h, transformOrigin: "0 50%", transformStyle: "preserve-3d", transform: `rotateY(${-(i === START ? 0 : AWAY[i % AWAY.length])}deg)`, willChange: "transform" }} > { e.preventDefault(); point(i); }} onPointerEnter={() => lean(i)} onPointerLeave={() => lean(-1)} onFocus={() => lean(i)} onBlur={() => lean(-1)} className="finger-post-arm pointer-events-auto absolute block outline-none focus-visible:outline-none" style={{ left: hub, right: 0, top: 0, bottom: 0, transformStyle: "preserve-3d" }} > {face(p, false)} {face(p, true)} {/* the top edge of the casting, seen from slightly above */}

{places[chosen].label} / {places[chosen].note}

); } 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/cast-iron-finger-post-navigation-with-painted-arms-that-swing-round-the-post-to-point-at-the-chosen-page.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]