61: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"] 62:T59e1,import { useCallback, useEffect, useRef, useState } from "react"; /** Everything written on the door. */ const shop = { open: { word: "Open", line: "Please come in" }, closed: { word: "Closed", line: "Back at nine tomorrow" }, hours: "Tuesday to Sunday, nine to six", photo: { src: "https://images.pexels.com/photos/37309559/pexels-photo-37309559.jpeg?auto=compress&cs=tinysrgb&w=1400", alt: "Buckets of pink carnations and wild flowers on wooden crates inside a florist", tone: "#b9a184", }, }; const PAINT = "#1c2a45"; // the door const RED = "#c8321f"; // sign enamel const CREAM = "#f6efdc"; const SCENE_W = 640; const SCENE_H = 680; const SWING = 40; // how hard the sign is knocked when it is flipped, 0 for none const BELL_SOUND = false; // reserved: the piece is silent, wire your own audio to `ring` if you want it const BRASS = "linear-gradient(90deg, #4f3508 0%, #b98b2f 16%, #fff0b4 30%, #e3b64f 42%, #8f6418 68%, #c99c3e 86%, #47300a 100%)"; export default function ShopDoorSignToggle() { const [open, setOpen] = useState(true); const wrapRef = useRef(null); const sceneRef = useRef(null); const hangRef = useRef(null); const shadeRef = useRef(null); const armRef = useRef(null); const bellRef = useRef(null); const clapRef = useRef(null); const photoRef = useRef(null); const glareRef = useRef(null); const sim = useRef({ th: 0.1, thV: 0, ph: 0, phV: 0, turns: 0, be: 0.2, beV: 0, cl: 0, clV: 0, px: 0, pxTo: 0, touched: -1e9, wake: () => {}, reduce: false }); const flip = useCallback((fromUser: boolean) => { const s = sim.current; if (fromUser) s.touched = performance.now(); s.turns += 1; setOpen(s.turns % 2 === 0); if (s.reduce) { s.ph = s.turns * Math.PI; s.th = 0; s.be = 0; s.cl = 0; } else { s.thV += (SWING / 100) * (s.turns % 2 ? 1 : -1) * 2.4; s.beV += 5.5; if (BELL_SOUND) { /* play your sound here */ } } s.wake(); }, []); useEffect(() => { const wrap = wrapRef.current, scene = sceneRef.current; if (!wrap || !scene) return; const s = sim.current; s.reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (s.reduce) { s.th = 0; s.be = 0; } const measure = () => { const sc = Math.min(1.08, wrap.clientWidth / (SCENE_W + 12), wrap.clientHeight / SCENE_H); scene.style.transform = `translate(-50%, -50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const paint = () => { const c = Math.cos(s.ph); if (hangRef.current) hangRef.current.style.transform = `rotateZ(${s.th.toFixed(4)}rad) rotateY(${s.ph.toFixed(4)}rad)`; if (shadeRef.current) shadeRef.current.style.transform = `translateX(${(-s.th * 250 + 14).toFixed(1)}px) scaleX(${Math.max(0.06, Math.abs(c)).toFixed(3)})`; if (armRef.current) armRef.current.style.transform = `rotate(${(s.be * 0.16).toFixed(4)}rad)`; if (bellRef.current) bellRef.current.style.transform = `rotate(${s.be.toFixed(4)}rad)`; if (clapRef.current) clapRef.current.style.transform = `rotate(${s.cl.toFixed(4)}rad)`; if (photoRef.current) photoRef.current.style.transform = `translate3d(${(-s.px * 14).toFixed(2)}px, 0, 0) scale(1.08)`; if (glareRef.current) glareRef.current.style.transform = `translate3d(${(s.px * 46).toFixed(2)}px, 0, 0)`; // the gloss on the enamel slides as the plate turns and swings hangRef.current?.style.setProperty("--gloss", `${(50 + Math.sin(s.ph) * 60 + s.th * 160 + s.px * 12).toFixed(1)}%`); }; let raf = 0, last = 0, seen = true, t0 = 0, nextDemo = 3600, nextBreeze = 1500; const frame = (now: number) => { raf = 0; if (!t0) { t0 = now; last = now; } const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = now - t0; const sub = 2; for (let k = 0; k < sub; k++) { const h = dt / sub; s.thV += (-36 * Math.sin(s.th) - 0.9 * s.thV) * h; s.th += s.thV * h; // the chain is wound a half turn at a time and unwinds past the mark before it settles s.phV += (46 * (s.turns * Math.PI - s.ph) - 4.6 * s.phV) * h; s.ph += s.phV * h; const beA = -120 * Math.sin(s.be) - 1.5 * s.beV; s.beV += beA * h; s.be += s.beV * h; s.clV += (-70 * s.cl - 3.2 * s.clV - beA * 0.9) * h; s.cl += s.clV * h; s.cl = Math.max(-0.5, Math.min(0.5, s.cl)); } s.px += (s.pxTo - s.px) * Math.min(1, dt * 5); if (now - s.touched > 7000) { s.pxTo = 0.5 * Math.sin(t / 2600); if (t > nextBreeze) { s.thV += 0.25 * (Math.sin(t) > 0 ? 1 : -1); nextBreeze = t + 2800; } if (t > nextDemo) { nextDemo = t + 4200; flip(false); } } paint(); if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; s.wake = () => { if (s.reduce) paint(); else if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; s.wake(); const onMove = (e: PointerEvent) => { const b = wrap.getBoundingClientRect(); s.touched = Math.max(s.touched, performance.now() - 3000); const x = ((e.clientX - b.left) / b.width) * 2 - 1; // brushing past the sign nudges it if (!s.reduce && e.target instanceof Element && e.target.closest("[data-sign]")) s.thV += Math.max(-0.5, Math.min(0.5, (x - s.pxTo) * 6)); s.pxTo = x; if (s.reduce) { s.px = x; paint(); } }; wrap.addEventListener("pointermove", onMove); const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen) s.wake(); }); io.observe(wrap); const onVis = () => { if (!document.hidden) s.wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); wrap.removeEventListener("pointermove", onMove); document.removeEventListener("visibilitychange", onVis); }; }, [flip]); const face = (side: "open" | "closed") => { const dark = side === "closed"; const ink = dark ? CREAM : RED; return ( {/* painted keyline, fired under the glaze */} {shop[side].word} {shop[side].line} {/* chips at the edge where the steel has rusted through */} {/* eyelets */} {[22, 278].map((x) => ( ))} {/* the glaze: a soft sky reflection up top and one hard window streak that slides */} ); }; const ballChain = "radial-gradient(circle at 36% 32%, #fff6cc 0 14%, #dcb04c 34%, #8a6216 62%, #3d2905 78%, rgba(0,0,0,0) 80%)"; return (

{/* brushed gloss paint: long vertical strokes and a fall of light from the street */}

{/* the door leaf: its edge against the frame, and a raised field around the glass */}

{/* glazing bead */}

{/* the pane */}

{/* lamp light inside when open, street dusk when closed */}

{/* shadow the frame throws onto whatever is behind the glass */}

{/* the bell on its sprung arm, screwed to the top of the frame */} {/* the sign's soft shadow on the room behind it */}

{/* hook, chain and plate: everything that turns */}

{/* suction cup on the glass */}

{[-1, 1].map((d) => ( ))}

{/* gilded hours on the inside of the glass */}

{shop.hours}

{/* the glass itself: the street reflected in it, brighter when the shop is dark */}

{open ? "The shop is open" : "The shop is closed"} Press the sign to turn it over

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L61",null,{"files":[{"path":"components/we-inc/shop-door-open-closed-enamel-sign-toggle-that-spins-on-its-chain-and-rings-a-brass-bell.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]