62: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"] 63: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"] 64:T632c,import { useCallback, useEffect, useRef } from "react"; import { useReducedMotion } from "framer-motion"; /** What is stamped on the fob and engraved on the plate above the hook. */ const room = { number: "12", house: "Larkmoor", floor: "First floor, garden side" }; // Design pixels for a 340 wide scene; the whole scene is scaled to fit. const W = 340; const H = 500; const CX = 170; // centre line the plate and hook sit on const HOOK = { x: CX - 9, y: 173 }; // the point inside the hook that the ring rests on const RING_R = 18; const FOB_W = 88; const FOB_H = 164; const FOB_HOLE = { x: 44, y: 18 }; const FOB_LEN = 84; // hole to the fob's centre of weight const KEY_W = 40; const KEY_H = 124; const KEY_HOLE = { x: 20, y: 11 }; const KEY_LEN = 52; const GRAVITY = 0.27; // pixels per step squared, at 120 steps a second const DAMPING = 0.9978; const SHADOW = { x: 16, y: 22 }; type Pt = { x: number; y: number; px: number; py: number; w: number }; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); // Points: 0 hook (pinned), 1 and 2 where fob and key sit on the ring, 3 fob weight, 4 key weight. const REST = [ { x: 0, y: 0, w: 0 }, { x: -11.5, y: 29.5, w: 1.6 }, { x: 11.5, y: 29.5, w: 1.6 }, { x: -11.5, y: 29.5 + FOB_LEN, w: 0.1 }, { x: 11.5, y: 29.5 + KEY_LEN, w: 0.42 }, ]; const LINKS: [number, number][] = [[0, 1], [0, 2], [1, 2], [1, 3], [2, 4]]; const LENGTHS = LINKS.map(([a, b]) => Math.hypot(REST[a].x - REST[b].x, REST[a].y - REST[b].y)); // Contact between the two: three spots along the key are tested against the fob's oval outline. const KEY_BUMPERS = [0.7, 1.35, 2.05]; // as multiples of KEY_LEN from the key's hole const FOB_MID = FOB_H / 2 - FOB_HOLE.y; // hole to the middle of the oval const TUCK = 0.8; // how much of the fob's half width the key has to clear; under 1 lets it sit partly behind function makePoints(angle: number): Pt[] { const c = Math.cos(angle); const s = Math.sin(angle); return REST.map((p) => { const x = HOOK.x + p.x * c - p.y * s; const y = HOOK.y + p.x * s + p.y * c; return { x, y, px: x, py: y, w: p.w }; }); } function link(a: Pt, b: Pt, len: number) { const dx = b.x - a.x; const dy = b.y - a.y; const d = Math.hypot(dx, dy) || 0.0001; const sum = a.w + b.w; const k = (d - len) / d; a.x += dx * k * (a.w / sum); a.y += dy * k * (a.w / sum); b.x -= dx * k * (b.w / sum); b.y -= dy * k * (b.w / sum); } const BRASS = "linear-gradient(90deg, #6a4a10 0%, #c79a3c 18%, #fff0b8 36%, #dcb457 52%, #8f6a1c 78%, #5a3e0b 100%)"; export default function HotelKeyFob() { const reduce = useReducedMotion(); const rootRef = useRef(null); const sceneRef = useRef(null); const fobRef = useRef(null); const keyRef = useRef(null); const ringRef = useRef(null); const fobShadowRef = useRef(null); const keyShadowRef = useRef(null); const ringShadowRef = useRef(null); const fobEdgeRef = useRef(null); const keyEdgeRef = useRef(null); const rimRef = useRef(null); const glossRef = useRef(null); const sim = useRef({ pts: makePoints(0), scale: 1, drag: -1, tx: 0, ty: 0, ox: 0, oy: 0, lastTouch: 0, side: 1 }); const push = useCallback(() => { const s = sim.current; s.side = -s.side; s.pts[3].px -= s.side * 5.2; s.pts[4].px -= s.side * 2.4; s.lastTouch = performance.now(); }, []); useEffect(() => { const root = rootRef.current; const scene = sceneRef.current; const fobEl = fobRef.current; const keyEl = keyRef.current; if (!root || !scene || !fobEl || !keyEl) return; const s = sim.current; s.pts = makePoints(reduce ? 0 : -0.95); let raf = 0; let running = false; let visible = true; let last = 0; let acc = 0; const fit = () => { s.scale = Math.min(1.6, root.clientWidth / W); scene.style.transform = `translateX(-50%) scale(${s.scale})`; root.style.height = `${Math.round(H * s.scale)}px`; }; const stepOnce = () => { const pts = s.pts; for (let i = 1; i < pts.length; i++) { const p = pts[i]; const vx = clamp((p.x - p.px) * DAMPING, -36, 36); const vy = clamp((p.y - p.py) * DAMPING, -36, 36); p.px = p.x; p.py = p.y; p.x += vx; p.y += vy + GRAVITY; } const fob = pts[3]; const key = pts[4]; for (let it = 0; it < 16; it++) { if (s.drag > 0) { const g = pts[s.drag]; g.x += (s.tx - g.x) * 0.35; g.y += (s.ty - g.y) * 0.35; } for (let i = 0; i < LINKS.length; i++) link(pts[LINKS[i][0]], pts[LINKS[i][1]], LENGTHS[i]); // the key hangs on one side of the fob, tucked a little way behind its edge, and cannot // pass through: measure each key bumper against the fob's oval outline and push apart const ax = fob.x - pts[1].x; const ay = fob.y - pts[1].y; const al = Math.hypot(ax, ay) || 0.0001; const ux = ax / al; const uy = ay / al; for (const at of KEY_BUMPERS) { const bx = pts[2].x + (key.x - pts[2].x) * at - pts[1].x; const by = pts[2].y + (key.y - pts[2].y) * at - pts[1].y; const along = bx * ux + by * uy; const side = bx * uy - by * ux; const t = (along - FOB_MID) / (FOB_H / 2); const half = t > -1 && t < 1 ? (FOB_W / 2) * Math.sqrt(1 - t * t) : 0; const need = half * TUCK + 7 - side; if (need > 0) { const sum = fob.w + key.w; key.x += uy * need * (key.w / sum) * 0.7; key.y -= ux * need * (key.w / sum) * 0.7; fob.x -= uy * need * (fob.w / sum) * 0.7; fob.y += ux * need * (fob.w / sum) * 0.7; } } } }; const draw = () => { const [, a1, a2, fob, key] = s.pts; const rotF = Math.atan2(-(fob.x - a1.x), fob.y - a1.y); const rotK = Math.atan2(-(key.x - a2.x), key.y - a2.y); const degF = (rotF * 180) / Math.PI; const degK = (rotK * 180) / Math.PI; const fx = a1.x - FOB_HOLE.x; const fy = a1.y - FOB_HOLE.y; const kx = a2.x - KEY_HOLE.x; const ky = a2.y - KEY_HOLE.y; fobEl.style.transform = `translate3d(${fx.toFixed(2)}px, ${fy.toFixed(2)}px, 0) rotate(${degF.toFixed(2)}deg)`; keyEl.style.transform = `translate3d(${kx.toFixed(2)}px, ${ky.toFixed(2)}px, 0) rotate(${degK.toFixed(2)}deg)`; if (fobShadowRef.current) fobShadowRef.current.style.transform = `translate3d(${(fx + SHADOW.x).toFixed(2)}px, ${(fy + SHADOW.y).toFixed(2)}px, 0) rotate(${degF.toFixed(2)}deg)`; if (keyShadowRef.current) keyShadowRef.current.style.transform = `translate3d(${(kx + SHADOW.x * 0.8).toFixed(2)}px, ${(ky + SHADOW.y * 0.8).toFixed(2)}px, 0) rotate(${degK.toFixed(2)}deg)`; // the ring hangs from the hook and passes through both holes const mx = (a1.x + a2.x) / 2 - HOOK.x; const my = (a1.y + a2.y) / 2 - HOOK.y; const ml = Math.hypot(mx, my) || 1; const cx = HOOK.x + (mx / ml) * (RING_R - 2); const cy = HOOK.y + (my / ml) * (RING_R - 2); if (ringRef.current) ringRef.current.style.transform = `translate3d(${(cx - 24).toFixed(2)}px, ${(cy - 24).toFixed(2)}px, 0)`; if (ringShadowRef.current) ringShadowRef.current.style.transform = `translate3d(${(cx - RING_R + SHADOW.x * 0.6).toFixed(2)}px, ${(cy - RING_R + SHADOW.y * 0.6).toFixed(2)}px, 0)`; // cut edges and highlights keep facing the lamp while the pieces turn const c = Math.cos(-rotF); const sn = Math.sin(-rotF); if (fobEdgeRef.current) fobEdgeRef.current.style.transform = `translate(${(2 * c - 3.4 * sn).toFixed(2)}px, ${(2 * sn + 3.4 * c).toFixed(2)}px)`; if (rimRef.current) rimRef.current.style.background = `linear-gradient(${(138 - degF).toFixed(1)}deg, #fff6cf 0%, #e6c268 18%, #a57b25 42%, #6b4a0f 60%, #c9a047 82%, #f6dd94 100%)`; if (glossRef.current) { const lx = 50 + (-26 * c + 34 * sn) * 1; const ly = 50 + (-26 * sn - 34 * c) * 0.6; glossRef.current.style.background = `radial-gradient(52% 34% at ${lx.toFixed(1)}% ${ly.toFixed(1)}%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.14) 45%, rgba(255,255,255,0) 100%)`; } const ck = Math.cos(-rotK); const sk = Math.sin(-rotK); if (keyEdgeRef.current) keyEdgeRef.current.setAttribute("transform", `translate(${(1.4 * ck - 2.2 * sk).toFixed(2)} ${(1.4 * sk + 2.2 * ck).toFixed(2)})`); }; const frame = (now: number) => { raf = requestAnimationFrame(frame); acc += Math.min(0.05, (now - last) / 1000); last = now; let n = 0; while (acc >= 1 / 120 && n < 6) { stepOnce(); acc -= 1 / 120; n++; } const fob = s.pts[3]; if (s.drag < 0 && now - s.lastTouch > 4800 && Math.abs(fob.x - fob.px) < 0.02) { s.side = -s.side; fob.px -= s.side * 3.6; s.pts[4].px += s.side * 1.2; s.lastTouch = now; } draw(); }; const start = () => { if (running || reduce || !visible || document.hidden) return; running = true; last = performance.now(); acc = 0; raf = requestAnimationFrame(frame); }; const stop = () => { running = false; cancelAnimationFrame(raf); }; const toScene = (e: PointerEvent) => { const r = scene.getBoundingClientRect(); return { x: (e.clientX - r.left) / s.scale, y: (e.clientY - r.top) / s.scale }; }; const aim = (e: PointerEvent) => { const p = toScene(e); const reach = 28 + (s.drag === 3 ? FOB_LEN : KEY_LEN); let x = p.x + s.ox; let y = p.y + s.oy; const dx = x - HOOK.x; const dy = y - HOOK.y; const d = Math.hypot(dx, dy); if (d > reach) { x = HOOK.x + (dx / d) * reach; y = HOOK.y + (dy / d) * reach; } s.tx = x; s.ty = y; }; const grab = (index: number, el: HTMLElement) => (e: PointerEvent) => { if (reduce) return; const p = toScene(e); s.drag = index; s.ox = s.pts[index].x - p.x; s.oy = s.pts[index].y - p.y; aim(e); el.setPointerCapture(e.pointerId); el.style.cursor = "grabbing"; }; const move = (e: PointerEvent) => { if (s.drag > 0) aim(e); }; const up = () => { s.drag = -1; s.lastTouch = performance.now(); fobEl.style.cursor = "grab"; keyEl.style.cursor = "grab"; }; const grabFob = grab(3, fobEl); const grabKey = grab(4, keyEl); fit(); // with motion reduced nothing animates, so settle the key against the fob before the one drawing if (reduce) for (let i = 0; i < 900; i++) stepOnce(); draw(); s.lastTouch = performance.now(); const ro = new ResizeObserver(fit); ro.observe(root); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) start(); else stop(); }); io.observe(root); const vis = () => (document.hidden ? stop() : start()); document.addEventListener("visibilitychange", vis); fobEl.addEventListener("pointerdown", grabFob); keyEl.addEventListener("pointerdown", grabKey); for (const el of [fobEl, keyEl]) { el.addEventListener("pointermove", move); el.addEventListener("pointerup", up); el.addEventListener("pointercancel", up); } start(); return () => { stop(); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", vis); fobEl.removeEventListener("pointerdown", grabFob); keyEl.removeEventListener("pointerdown", grabKey); for (const el of [fobEl, keyEl]) { el.removeEventListener("pointermove", move); el.removeEventListener("pointerup", up); el.removeEventListener("pointercancel", up); } }; }, [reduce]); // The key outline: bow at the top with its hole, a collar, the shaft and the bit. const keyPath = "M20 1C9.5 1 2 8 2 17.5 2 25.5 7.6 31.4 15.6 32.8V38H13.4V44H15.6V112.5C15.6 116.8 17.5 120 20 120S24.4 116.8 24.4 112.5V110H37V103.5H31.5V98.5H37V88H31.5V83.5H24.4V44H26.6V38H24.4V32.8C32.4 31.4 38 25.5 38 17.5 38 8 30.5 1 20 1ZM20 5.6A5.4 5.4 0 1 1 20 16.4 5.4 5.4 0 0 1 20 5.6Z"; return (

{/* painted boards: a fine joint every so often, and a little grain */}

{/* engraved number plate */}

{room.number}

{/* shadows on the wall */}

{/* cup hook: its plate, then the ring, key and fob, then the hook wire over the ring */}

{/* the key */}

{/* the fob */}

Room

{room.number}

{room.house}

{/* brass grommet round the hole */}

{/* split ring, in front of both holes */} {/* hook wire: down from the plate, round under the ring and up to a small ball */}

{room.house} / room {room.number}
{room.floor}

); } 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/we-inc/hotel-room-key-and-enamel-fob-on-a-brass-ring-that-swing-and-knock-together.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]