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:T5d48,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion, useSpring } from "framer-motion"; /** The messages the bell hands over, in order. Ringing the bell shows the next one. */ const notes = [ { from: "Front desk", time: "7:42 pm", title: "Your table is ready", body: "Table nine by the window, laid for four." }, { from: "Bookings", time: "7:45 pm", title: "New booking confirmed", body: "Mara Ellison, two nights from Friday." }, { from: "Payments", time: "7:51 pm", title: "Deposit received", body: "The garden room is paid for and held." }, { from: "Housekeeping", time: "8:03 pm", title: "Room 14 is made up", body: "Fresh linen in, key back on its hook." }, ]; const SOUND = false; // set to true for a short ding on each ring (it only ever plays after the visitor has pressed the bell) const HOLD = 4200; // milliseconds a card stays up while the piece plays by itself const TRAVEL = 400; // how far the card sinks into the desk // The bell is a turned object, so it is drawn as one: each part is a profile of [radius, height] points spun round the centre. type Pt = [number, number]; const CW = 320; // drawing size in CSS pixels at phone width const CH = 260; const CX = 160; const FOOT = 214; // screen y of the centre of the underside const TILT = (14 * Math.PI) / 180; // how far above the desk the eye is const BASE: Pt[] = [[0, 0], [116, 0], [116, 0], [125, 2], [125, 10], [125, 10], [119, 16], [103, 19], [92, 24], [92, 24], [40, 25], [0, 25]]; const DOME: Pt[] = [[104, 19], [104, 19], [112, 20], [113.5, 23], [112, 26.5], [112, 26.5], [109, 34], [103, 50], [93, 70], [78, 90], [58, 106], [36, 117], [18, 122], [10, 123], [10, 123], [9.5, 129], [9.5, 129], [5, 130], [0, 130]]; const STEM: Pt[] = [[0, 100], [3.4, 100], [3.4, 100], [3.4, 151], [3.4, 151], [10, 151.5], [13, 155], [13.5, 160], [12, 165], [7, 168.5], [0, 169]]; // long wood grain for the desk, as a repeating picture const GRAIN = `url("data:image/svg+xml,${encodeURIComponent("")}")`; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const smooth = (a: number, b: number, v: number) => { const t = clamp((v - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; const band = (v: number, a: number, b: number, s: number) => smooth(a - s, a + s, v) * (1 - smooth(b - s, b + s, v)); /** Round every corner of a profile a little, the way a lathe tool leaves it. Doubled points stay sharp. */ function soften(pts: Pt[], rounds: number): Pt[] { let out = pts; for (let k = 0; k < rounds; k++) { const next: Pt[] = [out[0]]; for (let i = 0; i < out.length - 1; i++) { const [r0, h0] = out[i]; const [r1, h1] = out[i + 1]; next.push([r0 * 0.75 + r1 * 0.25, h0 * 0.75 + h1 * 0.25], [r0 * 0.25 + r1 * 0.75, h0 * 0.25 + h1 * 0.75]); } next.push(out[out.length - 1]); out = next; } return out; } /** What the polished metal sees: a dim lobby, a tall window up to the left, a lamp to the right and the desk below. */ function room(x: number, y: number, z: number): [number, number, number] { const el = Math.asin(clamp(y, -1, 1)); const az = Math.atan2(x, z); const high = Math.max(0, el); let r = 0.07 + 0.34 * high * high; let g = 0.05 + 0.3 * high * high; let b = 0.05 + 0.28 * high * high; const win = band(az, -1.2, -0.42, 0.07) * band(el, 0.16, 1.02, 0.07) * (1 - 0.9 * band(az, -0.84, -0.78, 0.022)) * (1 - 0.9 * band(el, 0.56, 0.61, 0.022)); r += win * 4.6; g += win * 4.5; b += win * 4.2; const slit = band(az, -0.3, -0.16, 0.03) * band(el, 0.2, 0.95, 0.07); r += slit * 2.4; g += slit * 2.3; b += slit * 2.1; const lamp = band(az, 0.7, 1.0, 0.08) * band(el, 0.04, 0.5, 0.1); r += lamp * 2.3; g += lamp * 1.7; b += lamp * 1.0; const fill = band(az, -0.2, 0.3, 0.22) * band(el, 0.5, 1.2, 0.2); r += fill * 0.55; g += fill * 0.5; b += fill * 0.46; const wall = band(el, 0.0, 0.14, 0.04) * (1 - win) * 0.7; r *= 1 - wall; g *= 1 - wall; b *= 1 - wall; if (el < 0.02) { const d = smooth(0.02, -0.7, el); const k = smooth(0.02, -0.05, el); r = r * (1 - k) + (0.5 - 0.44 * d) * k; g = g * (1 - k) + (0.27 - 0.24 * d) * k; b = b * (1 - k) + (0.13 - 0.12 * d) * k; } return [r, g, b]; } type Part = { pts: Pt[]; metal: 1 | 2 }; /** Spin the profiles, keep the nearest surface at each pixel, then light every pixel once. Drawn at three times size and scaled down for clean edges. */ function turn(parts: Part[]): HTMLCanvasElement { const S = 3; const W = CW * S; const H = CH * S; const sinT = Math.sin(TILT); const cosT = Math.cos(TILT); const depth = new Float32Array(W * H).fill(-1e9); const nx = new Float32Array(W * H); const ny = new Float32Array(W * H); const nz = new Float32Array(W * H); const hh = new Float32Array(W * H); const kind = new Uint8Array(W * H); for (const part of parts) { const p = soften(part.pts, 3); const tn: Pt[] = p.map((_, i) => { const a = p[Math.max(0, i - 1)]; const c = p[Math.min(p.length - 1, i + 1)]; const dr = c[0] - a[0]; const dh = c[1] - a[1]; const l = Math.hypot(dr, dh) || 1; return [dh / l, -dr / l]; }); for (let i = 0; i < p.length - 1; i++) { const steps = Math.max(1, Math.ceil(Math.hypot(p[i + 1][0] - p[i][0], p[i + 1][1] - p[i][1]) * S * 2)); for (let s = 0; s < steps; s++) { const t = s / steps; const r = p[i][0] + (p[i + 1][0] - p[i][0]) * t; const h = p[i][1] + (p[i + 1][1] - p[i][1]) * t; let nr = tn[i][0] + (tn[i + 1][0] - tn[i][0]) * t; let nh = tn[i][1] + (tn[i + 1][1] - tn[i][1]) * t; const nl = Math.hypot(nr, nh) || 1; nr /= nl; nh /= nl; const count = Math.ceil(Math.PI * 2 * r * S * 2) + 8; const da = (Math.PI * 2) / count; const ca = Math.cos(da); const sa = Math.sin(da); let c = 1; let sn = 0; for (let k = 0; k < count; k++) { const z = r * sn; const facing = nh * sinT + nr * sn * cosT; if (facing > 0) { const px = Math.round((CX + r * c) * S); const py = Math.round((FOOT - (h * cosT - z * sinT)) * S); if (px >= 0 && px < W && py >= 0 && py < H) { const d = z * cosT + h * sinT; const at = py * W + px; if (d > depth[at]) { depth[at] = d; nx[at] = nr * c; ny[at] = nh; nz[at] = nr * sn; hh[at] = h; kind[at] = part.metal; } } } const c2 = c * ca - sn * sa; sn = sn * ca + c * sa; c = c2; } } } } const sheet = document.createElement("canvas"); sheet.width = W; sheet.height = H; const g2 = sheet.getContext("2d"); if (!g2) return sheet; const img = g2.createImageData(W, H); const px = img.data; for (let i = 0; i < W * H; i++) { if (!kind[i]) continue; let a = nx[i]; let b = ny[i]; let c = nz[i]; const brass = kind[i] === 1; if (brass) { // the faint rings a spinning chuck leaves in the metal b += 0.02 * Math.sin(hh[i] * 2.6) + 0.012 * Math.sin(hh[i] * 7.1); const l = Math.hypot(a, b, c); a /= l; b /= l; c /= l; } const nv = b * sinT + c * cosT; const [er, eg, eb] = room(2 * nv * a, 2 * nv * b - sinT, 2 * nv * c - cosT); const key = Math.max(0, a * -0.56 + b * 0.6 + c * 0.57); const edge = Math.pow(1 - clamp(nv, 0, 1), 4); let r: number; let g: number; let bl: number; if (brass) { const shade = hh[i] < 30 ? 0.55 + 0.45 * smooth(19, 30, hh[i]) : 1; const body = 0.03 + 0.15 * key; const hot = Math.max(0, (er + eg + eb) / 3 - 1.1); r = (body + er) * 1.0 * shade + hot * 0.5 + edge * er * 0.3; g = (body + eg) * 0.63 * shade + hot * 0.46 + edge * eg * 0.22; bl = (body + eb) * 0.15 * shade + hot * 0.3 + edge * eb * 0.1; } else { // black stove enamel: nearly no colour of its own, a soft mirror on top const shade = hh[i] > 18 ? 0.35 : 1; const f = 0.008 + 0.06 * edge + (er > 1.2 ? 0.07 : 0); r = (0.003 + er * f) * shade; g = (0.003 + eg * f) * shade; bl = (0.004 + eb * f) * shade; } const o = i * 4; px[o] = 255 * Math.pow(1 - Math.exp(-r * 1.5), 0.4545); px[o + 1] = 255 * Math.pow(1 - Math.exp(-g * 1.5), 0.4545); px[o + 2] = 255 * Math.pow(1 - Math.exp(-bl * 1.5), 0.4545); px[o + 3] = 255; } g2.putImageData(img, 0, 0); return sheet; } export default function BrassCounterBellNotification() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const bellRef = useRef(null); const canvasRef = useRef(null); const [index, setIndex] = useState(0); const [up, setUp] = useState(true); const [said, setSaid] = useState(""); const live = useRef({ index: 0, up: true, press: 0, pressTo: 0, pressVel: 0, rang: -1e9, paused: false, touched: false, seen: true, kick: () => {}, audio: null as AudioContext | null }); const timers = useRef([]); const y = useSpring(0, { stiffness: 210, damping: 15, mass: 1 }); const lean = useSpring(-1.6, { stiffness: 150, damping: 5, mass: 1 }); const later = useCallback((fn: () => void, ms: number) => { timers.current.push(window.setTimeout(fn, ms)); }, []); const ding = useCallback(() => { const s = live.current; if (!SOUND || !s.touched) return; try { s.audio = s.audio || new AudioContext(); const t = s.audio.currentTime; [2093, 4186, 5587].forEach((f, i) => { const osc = s.audio!.createOscillator(); const gain = s.audio!.createGain(); osc.frequency.value = f; gain.gain.setValueAtTime(0.12 / (i + 1), t); gain.gain.exponentialRampToValueAtTime(0.0001, t + 1.6 - i * 0.4); osc.connect(gain).connect(s.audio!.destination); osc.start(t); osc.stop(t + 1.7); }); } catch { // no audio available: the bell stays silent } }, []); const lower = useCallback( (tell: boolean) => { const s = live.current; if (!s.up) return; s.up = false; setUp(false); if (reduce) y.jump(TRAVEL); else y.set(TRAVEL); if (tell) { setSaid("Message put away. Ring the bell for the next one."); // the button on the card is about to leave the tab order, so hand focus to the bell if (rootRef.current?.contains(document.activeElement)) bellRef.current?.focus(); } }, [reduce, y], ); const raise = useCallback( (to: number) => { const s = live.current; s.index = to; s.up = true; setIndex(to); setUp(true); const n = notes[to]; setSaid(`${n.from}: ${n.title}. ${n.body}`); if (reduce) { y.jump(0); return; } y.set(0); lean.jump(to % 2 ? 3.5 : -5); lean.set(to % 2 ? 1.2 : -1.6); }, [lean, reduce, y], ); const ring = useCallback(() => { const s = live.current; const next = (s.index + 1) % notes.length; s.rang = performance.now(); s.pressTo = 1; later(() => { s.pressTo = 0; s.kick(); }, 110); s.kick(); ding(); if (s.up) { lower(false); later(() => raise(next), reduce ? 0 : 330); } else later(() => raise(next), reduce ? 0 : 140); }, [ding, later, lower, raise, reduce]); // the bell itself: turned once, then redrawn only while it is moving useEffect(() => { const canvas = canvasRef.current; const ctx = canvas?.getContext("2d"); if (!canvas || !ctx) return; const s = live.current; const body = turn([{ pts: BASE, metal: 2 }, { pts: DOME, metal: 1 }]); const plunger = turn([{ pts: STEM, metal: 1 }]); const dpr = Math.min(2.6, (window.devicePixelRatio || 1) * 1.3); canvas.width = Math.round(CW * dpr); canvas.height = Math.round(CH * dpr); let raf = 0; let last = 0; const paint = (now: number) => { raf = 0; const dt = Math.min(0.032, (now - (last || now)) / 1000); last = now; s.pressVel += ((s.pressTo - s.press) * 900 - s.pressVel * 34) * dt; s.press += s.pressVel * dt; const age = (now - s.rang) / 1000; const hum = reduce || age > 1.3 ? 0 : Math.exp(-age * 3.4) * Math.sin(age * 150) * 1.5; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, CW, CH); ctx.imageSmoothingQuality = "high"; // where the bell sits on the polished wood: a soft pool of shade and a faint upside-down bell ctx.save(); ctx.translate(CX + 4, FOOT + 6); ctx.scale(1, 0.25); const pool = ctx.createRadialGradient(0, 0, 60, 0, 0, 148); pool.addColorStop(0, "rgba(8,3,2,0.7)"); pool.addColorStop(0.6, "rgba(8,3,2,0.34)"); pool.addColorStop(1, "rgba(8,3,2,0)"); ctx.fillStyle = pool; ctx.beginPath(); ctx.arc(0, 0, 148, 0, Math.PI * 2); ctx.fill(); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.rect(0, FOOT + 4, CW, CH); ctx.clip(); ctx.globalAlpha = 0.16; ctx.translate(0, FOOT * 2 + 34); ctx.scale(1, -0.62); ctx.drawImage(body, hum * 0.6, FOOT - FOOT / 0.62 + 2, CW, CH); ctx.restore(); ctx.drawImage(plunger, 0, s.press * 8, CW, CH); if (Math.abs(hum) > 0.12) { // a ringing dome is a blur at its edges ctx.globalAlpha = 0.32; ctx.drawImage(body, -hum * 1.3, 0, CW, CH); ctx.globalAlpha = 1; } ctx.drawImage(body, hum, 0, CW, CH); const busy = Math.abs(s.pressTo - s.press) > 0.002 || Math.abs(s.pressVel) > 0.02 || (!reduce && age < 1.3); if (busy && s.seen && !document.hidden) raf = requestAnimationFrame(paint); else last = 0; }; s.kick = () => { if (!raf) raf = requestAnimationFrame(paint); }; s.kick(); const io = new IntersectionObserver(([e]) => { s.seen = e.isIntersecting; if (s.seen) s.kick(); }); io.observe(canvas); return () => { cancelAnimationFrame(raf); io.disconnect(); s.kick = () => {}; }; }, [reduce]); // plays by itself until someone takes over useEffect(() => { const first = notes[0]; setSaid(`${first.from}: ${first.title}. ${first.body}`); if (reduce) return; const s = live.current; const loop = window.setInterval(() => { if (s.paused || s.touched || document.hidden || !s.seen) return; ring(); }, HOLD); const pending = timers.current; return () => { window.clearInterval(loop); pending.forEach((t) => window.clearTimeout(t)); }; }, [reduce, ring]); const note = notes[index]; return (

{ if (e.key === "Escape" && live.current.up) { live.current.touched = true; lower(true); } }} onPointerEnter={() => (live.current.paused = true)} onPointerLeave={() => (live.current.paused = false)} onFocus={() => (live.current.paused = true)} onBlur={() => (live.current.paused = false)} className="relative h-[590px] overflow-hidden bg-[#2b0f17] sm:h-[700px]" > {/* the wall: painted plaster with the light from the window falling across it */}

{/* everything above the slot: the card and the rod it stands on */}

{note.from} {note.time}

{note.title}

{note.body}

Card {index + 1} of {notes.length}

{/* the brass channel that grips the bottom edge */}

{/* the desk: a polished top seen from just above, and its front edge */}

{/* the slot the card lives in, trimmed in brass */}

{/* the bell */}

{said}

Desk bell {up ? "Press the plunger for the next card" : "Press the plunger to ring"}

); } 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/brass-counter-bell-notification-that-rings-and-raises-a-message-card-from-a-slot-in-the-desk.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]