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:T459a,import { useEffect, useRef, useState } from "react"; // Everything a visitor is likely to change sits here. const trail = ["Home", "Shop", "Kitchen", "Stoneware", "Ash-Glazed Jar"]; // first is the root, last is the page you are on const BLUE = "#17377a"; // enamel on the signs you can go back to const CREAM = "#f4ecd6"; // enamel on the sign for the page you are on const MAROON = "#6e1d1a"; // lettering on the cream side const SWING = { rate: 6.1, drag: 1.05, reach: 205 }; // pendulum speed, how fast it dies down, and how hard a moving trolley throws it (lower = wilder) const DEMO = true; // walk up and down the trail by itself until a visitor does const layoutFor = (narrow: boolean) => narrow ? { W: 360, H: 640, rows: [[0, 1, 2], [3, 4]], rails: [128, 300], h: 56, font: 14, char: 10.3, pad: 15, arrow: 16, gap: 12, chain: 34, tag: 0 } : { W: 1180, H: 640, rows: [[0, 1, 2, 3, 4]], rails: [190], h: 84, font: 25, char: 17, pad: 24, arrow: 28, gap: 24, chain: 52, tag: 9 }; type Layout = ReturnType; const place = (L: Layout) => { const out: { x: number; y: number; w: number }[] = []; L.rows.forEach((row, r) => { const ws = row.map((i) => Math.round(L.pad * 2 + trail[i].length * L.char + L.arrow)); let x = (L.W - ws.reduce((a, b) => a + b, 0) - L.gap * (row.length - 1)) / 2; row.forEach((i, n) => { out[i] = { x: x + ws[n] / 2, y: L.rails[r], w: ws[n] }; x += ws[n] + L.gap; }); }); return out; }; 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='.8' 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 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`; const CHAIN = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16'%3E%3Crect x='1.6' y='.6' width='4.8' height='9.4' rx='2.4' fill='none' stroke='%23212325' stroke-width='1.7'/%3E%3Cpath d='M2.3 3v4' stroke='%23989da2' stroke-width='.7'/%3E%3Crect x='3.1' y='8' width='1.8' height='9' rx='.9' fill='%23303336'/%3E%3C/svg%3E")`; const STEEL = "linear-gradient(180deg,#0a0b0c 0%,#34383c 22%,#8d949a 40%,#4a4f54 55%,#131516 82%,#000 100%)"; const enamel = (base: string) => ({ background: `linear-gradient(114deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.13) 25%,rgba(255,255,255,0) 25.6%),radial-gradient(130% 160% at 26% -12%,rgba(255,255,255,0.16),rgba(255,255,255,0) 46%,rgba(0,0,0,0.3) 100%),${base}`, boxShadow: "inset 0 0 0 1px rgba(12,10,8,0.9), inset 0 2px 1px 1px rgba(255,255,255,0.4), inset 0 -2.5px 2px 1px rgba(0,0,0,0.38)", }); const chips = [ { left: "3%", top: "70%", w: 7, h: 9 }, { left: "91%", top: "6%", w: 9, h: 6 }, { left: "62%", top: "88%", w: 10, h: 6 }, { left: "1.5%", top: "12%", w: 6, h: 7 }, { left: "30%", top: "-2%", w: 11, h: 5 }, ]; export default function PlatformSignBreadcrumbs() { const frame = useRef(null); const hangs = useRef<(HTMLLIElement | null)[]>([]); const [narrow, setNarrow] = useState(false); const [scale, setScale] = useState(1); const [here, setHere] = useState(trail.length - 1); const live = useRef({ here: trail.length - 1, touched: false, go: (_n: number) => {}, nudge: (_i: number, _push: number) => {} }); const L = layoutFor(narrow); const spots = place(L); useEffect(() => { const el = frame.current; if (!el) return; const fit = () => { const slim = el.clientWidth < 760; 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 Lay = layoutFor(narrow), at = place(Lay); const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const away = (i: number) => Lay.W - at[i].x + at[i].w / 2 + 90; // far enough along the rail to be off the wall // Per sign: the trolley (x, vx), the pendulum under it (th, vth) and the turn on its swivel (phi, vphi). const s = trail.map((_, i) => { const gone = i > live.current.here; return { x: gone ? away(i) : 0, vx: 0, goal: gone ? away(i) : 0, th: reduce || gone ? 0 : (i % 2 ? -0.07 : 0.085) * (1 + i * 0.12), vth: 0, phi: i === live.current.here ? 180 : 0, vphi: 0, turn: i === live.current.here ? 180 : 0, due: 0, flipDue: 0, next: 0, nextTurn: 0 }; }); const paint = () => { s.forEach((p, i) => { const li = hangs.current[i]; if (!li) return; li.style.transform = `translate3d(${p.x.toFixed(2)}px,0,0)`; li.style.setProperty("--th", `${p.th.toFixed(4)}rad`); li.style.setProperty("--phi", `${p.phi.toFixed(2)}deg`); li.style.setProperty("--roll", `${(p.x / 9).toFixed(3)}rad`); li.style.setProperty("--thin", Math.max(0.04, Math.abs(Math.cos((p.phi * Math.PI) / 180))).toFixed(3)); li.style.visibility = p.x > away(i) - 6 ? "hidden" : "visible"; }); }; let raf = 0, last = 0, seen = true, timer = 0; const tick = (now: number) => { raf = 0; const dt = Math.min(0.03, last ? (now - last) / 1000 : 0.016); last = now; s.forEach((p, i) => { if (p.due && now >= p.due) { p.goal = p.next; p.due = 0; } if (p.flipDue && now >= p.flipDue) { p.turn = p.nextTurn; p.flipDue = 0; } if (reduce) { p.x = p.due ? p.x : p.goal; p.phi = p.flipDue ? p.phi : p.turn; p.th = 0; return; } const ax = Math.max(-2600, Math.min(2600, (p.goal - p.x) * 24 - p.vx * 8.6)); p.vx += ax * dt; p.x += p.vx * dt; const draught = Math.sin(now / 1300 + i * 2.1) * 0.05 + Math.sin(now / 470 + i) * 0.02; p.vth += (-SWING.rate * SWING.rate * Math.sin(p.th) - (ax / SWING.reach) * Math.cos(p.th) - SWING.drag * p.vth + draught) * dt; p.th += p.vth * dt; p.vphi += ((p.turn - p.phi) * 64 - p.vphi * 8.5) * dt; p.phi += p.vphi * dt; }); paint(); const waiting = s.some((p) => p.due || p.flipDue); if (seen && !document.hidden && (!reduce || waiting)) raf = requestAnimationFrame(tick); }; const wake = () => { if (!raf && seen && !document.hidden) { last = 0; raf = requestAnimationFrame(tick); } }; live.current.go = (n: number) => { const was = live.current.here, now = performance.now(); live.current.here = n; s.forEach((p, i) => { const out = i > n; // The far end leaves first; coming back, the nearest sign arrives first. if (out !== p.next > 0 || p.due) { p.next = out ? away(i) : 0; p.due = now + 1 + (reduce ? 0 : out ? (trail.length - 1 - i) * 120 : Math.max(0, i - was - 1) * 170); } const turn = i === n ? 180 : 0; if (turn !== p.nextTurn || p.flipDue) { p.nextTurn = turn; p.flipDue = now + 1 + (reduce ? 0 : turn ? 300 + Math.max(0, i - was) * 170 : 0); } }); wake(); }; s.forEach((p) => { p.next = p.goal; p.nextTurn = p.turn; }); live.current.nudge = (i: number, push: number) => { if (!reduce) { s[i].vth += push; wake(); } }; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; wake(); }); io.observe(el); document.addEventListener("visibilitychange", wake); if (DEMO && !reduce && !live.current.touched) { const route = [2, trail.length - 1, 1, trail.length - 1]; let step = 0; timer = window.setTimeout(function next() { if (live.current.touched) return; const n = route[step++ % route.length]; live.current.go(n); setHere(n); timer = window.setTimeout(next, 3300); }, 3600); } paint(); wake(); return () => { cancelAnimationFrame(raf); clearTimeout(timer); io.disconnect(); document.removeEventListener("visibilitychange", wake); }; }, [narrow]); const walkTo = (n: number) => { live.current.touched = true; live.current.go(n); setHere(n); }; const lettering = { fontSize: L.font, letterSpacing: "0.075em", lineHeight: 1 }; return (

{/* the platform wall: cream plaster above a painted dado, lit from the top left */}

{L.rails.map((y) => (

{/* the rail, its shadow on the wall and the two stand-offs that hold it clear */}

{[0.03, 0.97].map((f) => (

))}

{ hangs.current[i] = n; }} aria-hidden={gone || undefined} className="absolute h-0 w-0" style={{ left: sp.x, top: sp.y, willChange: "transform" }}> {/* trolley: two wheels on the rail and a strap that drops to the swivel */} {[-11, 11].map((dx) => ( ))} { e.preventDefault(); if (!gone) walkTo(i); }} onPointerEnter={(e) => live.current.nudge(i, e.movementX < 0 ? 1.5 : -1.5)} className="platform-sign-plate absolute block outline-none focus-visible:outline-none" style={{ left: -sp.w / 2, top: L.chain, width: sp.w, height: L.h, transformStyle: "preserve-3d" }} > {[false, true].map((back) => ( {back && L.tag > 0 && ( You are here )} {label} {!back && ( )} {chips.slice(back ? 3 : (i * 2) % 3, back ? 5 : ((i * 2) % 3) + 2).map((c) => ( ))} ))}

{trail.slice(0, here + 1).map((t, i) => ( {i > 0 && /}{t} ))}

); } 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/enamel-platform-sign-breadcrumbs-hanging-from-rail-trolleys-that-roll-away-swinging-when-you-step-back-up-the-trail.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]