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:T62d9,import { useEffect, useRef, useState } from "react"; const LAMPS = ["L", "I", "V", "E"]; // one opal globe per letter const site = { name: "Saltmarsh Surf School", address: "saltmarshsurf.example" }; const BLUE = "#4F98FB"; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const W = 800, H = 470; // the stage everything is laid out in const SX = 30, SW = 740; // the slate base const TOP = 336, FACE = 364, BOT = 410; // back of its top, its front edge, its underside const FEET = 351; // the line the fittings stand on const PX = 356, PY = 301; // hinge pin of the blade const BL = 188; // hinge to jaw const JX = PX - BL; const A_OPEN = 0.96; // how far the blade lifts, in radians const LAMP_X = [476, 556, 636, 716]; const FIRST = 5200, OPEN_FOR = 1700, HOLD = 7600; // the demo const BRASS = "linear-gradient(180deg,#fff2c0 0%,#e2bf68 14%,#b98d30 46%,#8a651a 78%,#4a340a 100%)"; const BRASS_X = "linear-gradient(90deg,#4f370a 0%,#a67a22 16%,#f1d587 36%,#fff4c8 44%,#d2a846 58%,#8c661a 82%,#402c07 100%)"; type Api = { set: (closed: boolean) => void }; type Bit = { x: number; y: number; vx: number; vy: number; life: number; max: number }; function Screw({ left, top, size = 9 }: { left: number; top: number; size?: number }) { return ( ); } export default function BrassKnifeSwitch() { const stage = useRef(null); const root = useRef(null); const blade = useRef(null); const grip = useRef(null); const sparks = useRef(null); const api = useRef(null); const [zoom, setZoom] = useState(1); const [live, setLive] = useState(true); useEffect(() => { const st = stage.current, el = root.current, bl = blade.current, gr = grip.current, cv = sparks.current; const ctx = cv?.getContext("2d"); if (!st || !el || !bl || !gr || !cv || !ctx) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const dpr = Math.min(2, window.devicePixelRatio || 1); cv.width = 260 * dpr; cv.height = 260 * dpr; const scale = () => Math.max(0.4, Math.min(1.12, (st.clientWidth - 12) / W)); const fit = () => setZoom(scale()); fit(); const ro = new ResizeObserver(fit); ro.observe(st); // a: angle of the blade, 0 when it is home in the jaw. The piece opens closed and lit. const s = { a: 0, w: 0, to: 0, drag: false, made: true, onAt: LAMPS.map(() => -1e9), offAt: LAMPS.map(() => 1e12), lv: LAMPS.map(() => 1), flash: 0, bits: [] as Bit[], touched: -1e9, live: true }; const paint = () => { bl.style.transform = `rotate(${s.a.toFixed(4)}rad)`; el.style.setProperty("--a", (s.a / A_OPEN).toFixed(3)); let sum = 0; s.lv.forEach((v, i) => { el.style.setProperty(`--l${i}`, v.toFixed(3)); sum += v; }); el.style.setProperty("--lit", (sum / LAMPS.length).toFixed(3)); el.style.setProperty("--flash", s.flash.toFixed(3)); }; const tell = () => { const now = s.to === 0; if (now !== s.live) { s.live = now; setLive(now); } }; const arc = (n: number, power: number) => { if (reduce) return; s.flash = Math.max(s.flash, power); for (let i = 0; i < n; i++) { const dir = -Math.PI / 2 + (Math.random() - 0.5) * 2.6, v = (120 + Math.random() * 380) * power, max = 0.22 + Math.random() * 0.42; s.bits.push({ x: 130 + (Math.random() - 0.5) * 8, y: 126, vx: Math.cos(dir) * v, vy: Math.sin(dir) * v, life: max, max }); } }; const drawBits = (dt: number) => { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, 260, 260); if (s.flash > 0.01) { const g = ctx.createRadialGradient(130, 126, 0, 130, 126, 70 * s.flash + 20); g.addColorStop(0, `rgba(255,255,255,${0.95 * s.flash})`); g.addColorStop(0.25, `rgba(170,210,255,${0.6 * s.flash})`); g.addColorStop(1, "rgba(79,152,251,0)"); ctx.fillStyle = g; ctx.fillRect(0, 0, 260, 260); } ctx.globalCompositeOperation = "lighter"; ctx.lineCap = "round"; ctx.shadowColor = "rgba(79,152,251,0.9)"; ctx.shadowBlur = 7 * dpr; for (const b of s.bits) { const ox = b.x, oy = b.y; b.vy += 900 * dt; b.vx *= 1 - 2.2 * dt; b.x += b.vx * dt; b.y += b.vy * dt; b.life -= dt; const k = Math.max(0, b.life / b.max); ctx.strokeStyle = `rgba(${170 + 85 * k},${210 + 45 * k},255,${Math.min(1, k * 1.6)})`; ctx.lineWidth = 1 + 2.2 * k; ctx.beginPath(); ctx.moveTo(ox - b.vx * dt * 2.2, oy - b.vy * dt * 2.2); ctx.lineTo(b.x, b.y); ctx.stroke(); ctx.fillStyle = `rgba(255,255,255,${k})`; ctx.beginPath(); ctx.arc(b.x, b.y, 1.1 + k, 0, 6.3); ctx.fill(); } ctx.globalCompositeOperation = "source-over"; ctx.shadowBlur = 0; s.bits = s.bits.filter((b) => b.life > 0 && b.y < 172); }; let raf = 0, last = 0, seen = true, timer = 0, begin = () => {}; const frame = (now: number) => { raf = 0; const dt = Math.max(0.004, Math.min(0.032, (now - last) / 1000 || 0.016)); last = now; const before = s.a; if (!s.drag) { // thrown down by hand weight, gripped by the jaw for the last few degrees, sprung up when pulled const inJaw = s.a < 0.12; const pull = s.to === 0 ? -20 - 16 * s.a : 30 * (A_OPEN + 0.06 - s.a) + 4; s.w += (pull - (inJaw ? 13 : 3.6) * s.w) * dt; s.a += s.w * dt; if (s.a < 0) { s.a = 0; s.w = s.w < -1.6 ? -s.w * 0.1 : 0; } if (s.a > A_OPEN) { s.a = A_OPEN; s.w = s.w > 0.5 ? -s.w * 0.3 : 0; } } // the arc jumps just before the blade lands, and a smaller one as it leaves if (before > 0.1 && s.a <= 0.1 && s.a < before) arc(38, 1); const made = s.a < 0.06; if (made && !s.made) { s.onAt = LAMPS.map((_, i) => now + 70 + i * 140); s.offAt = LAMPS.map(() => 1e12); } if (!made && s.made) { arc(12, 0.55); s.offAt = LAMPS.map((_, i) => now + i * 45); s.onAt = LAMPS.map(() => 1e12); } s.made = made; let busy = false; s.lv = s.lv.map((v, i) => { const t = now - s.onAt[i]; if (now >= s.offAt[i]) { const n = v * Math.exp(-dt / 0.14); if (n > 0.004) busy = true; return n > 0.004 ? n : 0; } if (t < 0) { if (s.onAt[i] < 1e11) busy = true; return v; } if (t < 520) busy = true; return t < 55 ? 0.6 : t < 115 ? 0.12 : t < 180 ? 0.85 : t < 250 ? 0.45 : t < 520 ? 0.8 + 0.2 * ((t - 250) / 270) : 1; }); s.flash *= Math.exp(-dt / 0.09); if (s.flash < 0.01) s.flash = 0; paint(); drawBits(dt); const rest = !s.drag && !busy && s.flash === 0 && s.bits.length === 0 && Math.abs(s.w) < 0.003 && (s.a === 0 || s.a === A_OPEN); if (rest) return; if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const go = (closed: boolean) => { s.to = closed ? 0 : A_OPEN; tell(); if (reduce) { s.a = s.to; s.w = 0; s.made = closed; s.lv = LAMPS.map(() => (closed ? 1 : 0)); s.onAt = LAMPS.map(() => -1e9); s.offAt = LAMPS.map(() => (closed ? 1e12 : -1e9)); paint(); return; } s.w += closed ? -1.2 : 2.6; wake(); }; api.current = { set: (closed) => { s.touched = performance.now(); go(closed); } }; // take hold of the grip and throw the switch yourself const angle = (e: PointerEvent) => { const r = el.getBoundingClientRect(), k = r.width / W; return Math.max(0, Math.min(A_OPEN, Math.atan2(r.top + PY * k - e.clientY, r.left + PX * k - e.clientX))); }; let lastA = 0, lastT = 0; const down = (e: PointerEvent) => { if (reduce) return; s.drag = true; s.touched = performance.now(); lastA = s.a; lastT = performance.now(); gr.setPointerCapture(e.pointerId); wake(); }; const move = (e: PointerEvent) => { if (!s.drag) return; const now = performance.now(), next = angle(e); s.w = ((next - lastA) / Math.max(0.008, (now - lastT) / 1000)) * 0.6; s.a = next; lastA = next; lastT = now; }; const up = () => { if (!s.drag) return; s.drag = false; s.touched = performance.now(); s.w = Math.max(-6, Math.min(6, s.w)); s.to = s.w < -1 || (s.w < 1 && s.a < A_OPEN * 0.45) ? 0 : A_OPEN; tell(); wake(); }; gr.addEventListener("pointerdown", down); gr.addEventListener("pointermove", move); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); paint(); // while the circuit is made and nothing else is moving, the lamps breathe very slightly const hum = window.setInterval(() => { if (reduce || raf || !seen || document.hidden || !s.made || s.a !== 0) return; const t = performance.now() / 1000; LAMPS.forEach((_, i) => el.style.setProperty(`--l${i}`, (0.94 + 0.06 * Math.sin(t * 2.3 + i * 1.7)).toFixed(3))); }, 110); if (!reduce) { // The demo: lit, open, close with a spark, hold. It stands down while someone is using the switch. const loop = (wait: number, closed: boolean) => { timer = window.setTimeout(() => { if (seen && !document.hidden && performance.now() - s.touched > 9000) go(closed); loop(closed ? HOLD : OPEN_FOR, !closed); }, wait); }; begin = () => loop(FIRST, false); if (document.readyState === "complete") begin(); else window.addEventListener("load", begin, { once: true }); } const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen && (s.a !== s.to || s.drag)) wake(); }); io.observe(st); const vis = () => { if (!document.hidden && s.a !== s.to) wake(); }; document.addEventListener("visibilitychange", vis); return () => { cancelAnimationFrame(raf); window.clearTimeout(timer); window.clearInterval(hum); window.removeEventListener("load", begin); api.current = null; ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", vis); gr.removeEventListener("pointerdown", down); gr.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, []); const wire = `M ${PX + 40} ${FEET - 5} C ${PX + 62} ${FEET + 4} ${LAMP_X[0] - 50} ${FEET + 5} ${LAMP_X[0] - 23} ${FEET - 6} ${LAMP_X.slice(1).map((x, i) => `M ${LAMP_X[i] + 23} ${FEET - 6} C ${LAMP_X[i] + 38} ${FEET + 6} ${x - 38} ${FEET + 6} ${x - 23} ${FEET - 6}`).join(" ")} M ${JX - 40} ${FEET - 5} C ${JX - 62} ${FEET - 2} ${JX - 78} ${FEET + 4} ${JX - 84} ${FACE + 2} C ${JX - 88} ${FACE + 20} ${JX - 86} ${BOT - 8} ${JX - 92} ${BOT + 6}`; return (

{/* light the lamps throw up the wall, and the cold flash of the arc */}

{/* what the lit globes leave on the dark table in front */}

{/* the slate: riven top, sawn front edge with a chamfer */}

{/* pools of lamplight on the stone */} {LAMP_X.map((x, i) =>

)} {/* engraved maker's plate */}

{site.address}

{/* shadow of the blade on the stone */}

{/* cloth-covered wire from the switch along the row of holders */} {/* back leaves of the hinge and the jaw */} {[PX, JX].map((x, i) => (

))} {/* the blade and its grip, turning on the hinge pin */}

{/* turned ebonite grip */}

{[58, 64, 70].map((x) =>

)}

{/* front leaves: the blade passes between each pair */}

{/* feet, fixing screws and knurled terminals */} {[PX, JX].map((x, i) => (

))}