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:T4c40,import { useCallback, useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** What is printed on the two sides of the card. */ const hotel = { name: "The Aldermoor", room: "Room 214" }; const sides = { quiet: { lines: ["Do not", "disturb"], note: "Sleeping in. Thank you for the quiet.", said: "Do not disturb is showing" }, service: { lines: ["Please", "make up", "my room"], note: "Out for the day. Fresh towels welcome.", said: "Please make up my room is showing" }, }; // Design pixels, measured from the middle of the door knob. const CW = 178; // card const CH = 404; const HOLE = 38; // radius of the hole in the card const HOLE_Y = 64; // its centre, down from the top of the card const NECK = 15; // radius of the knob's neck, where the card rests const HEAD = 31; // radius of the knob itself, small enough to pass through the hole const ROSE = 47; // the plate behind it const DROP = HOLE - NECK; // how far the card must be lifted to clear the knob const PIVOT_Y = HOLE_Y - DROP; const KNOB_TOP = 176; // knob centre, down from the top of the scene const SCENE_H = 650; const GRAVITY = 30; // swing stiffness, per second squared const DRAG = 1.05; // how fast the swing dies away const OXBLOOD = "#7a1c22"; const CREAM = "#efe6d1"; const GREEN = "#1d4a3c"; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const outline = `M 30 0 H ${CW - 30} A 30 30 0 0 1 ${CW} 30 V ${CH - 14} A 14 14 0 0 1 ${CW - 14} ${CH} H 14 A 14 14 0 0 1 0 ${CH - 14} V 30 A 30 30 0 0 1 30 0 Z M ${CW / 2 - HOLE} ${HOLE_Y} a ${HOLE} ${HOLE} 0 1 0 ${HOLE * 2} 0 a ${HOLE} ${HOLE} 0 1 0 ${-HOLE * 2} 0 Z`; const cut = `path(evenodd, '${outline}')`; function Face({ which }: { which: "quiet" | "service" }) { const quiet = which === "quiet"; const s = sides[which]; const ink = quiet ? CREAM : GREEN; return (

{/* keyline */}

{s.lines.map((l) => ( {l} ))}

{hotel.name} {hotel.room}

{/* coated board: fibre under the varnish, then a sheen and a soft roll at the edges */}

); } export default function DoorHangerFlipCard() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const stageRef = useRef(null); const swingRef = useRef(null); const shadeRef = useRef(null); const live = useRef({ th: 0.16, w: 0, scale: 1, drag: false, held: false, aim: 0, grab: 0, moved: 0, x: 0, y: 0, touched: false, paused: false, busy: false, gust: 2.6, clock: 0 }); const [quiet, setQuiet] = useState(false); const [above, setAbove] = useState(false); const [said, setSaid] = useState(""); const flip = useMotionValue(180); // 0 shows "do not disturb", 180 the other side const twist = useMotionValue(0); const hook = useMotionValue(0); const lift = useMotionValue(0); const turn = useTransform([flip, twist], (v) => (v[0] as number) + (v[1] as number)); const grow = useTransform(lift, (v) => 1 + v * 0.1); const shadeX = useTransform(lift, (v) => 11 + v * 26); const shadeY = useTransform(lift, (v) => 15 + v * 34); const shadeW = useTransform([flip, twist, lift], (v) => Math.max(0.05, Math.abs(Math.cos((((v[0] as number) + (v[1] as number)) * Math.PI) / 180))) * (1 + (v[2] as number) * 0.12)); const shadeA = useTransform(lift, (v) => 0.42 - v * 0.17); const shadeNear = useTransform(lift, (v) => 0.5 * (1 - v)); const shadeBlur = useTransform(lift, (v) => `blur(${(8 + v * 12).toFixed(1)}px)`); const turnOver = useCallback( (to?: boolean) => { const s = live.current; if (s.busy) return; const next = to ?? flip.get() > 90; setQuiet(next); const end = next ? 0 : 180; if (reduce) { flip.set(end); return; } s.busy = true; s.held = true; // lift it clear of the knob, bring it forward, turn it, hang it back and let it swing animate(hook, -DROP, { duration: 0.16, ease: "easeOut" }).then(() => { setAbove(true); animate(lift, 1, { duration: 0.2, ease: "easeOut" }); animate(flip, end, { type: "spring", stiffness: 120, damping: 15, mass: 0.9 }); window.setTimeout(() => { animate(lift, 0, { duration: 0.2, ease: "easeIn" }).then(() => { setAbove(false); animate(hook, 0, { type: "spring", stiffness: 420, damping: 13 }); s.held = false; s.busy = false; s.w += next ? 1.5 : -1.5; }); }, 520); }); }, [flip, hook, lift, reduce], ); // the pendulum, the draught that keeps it alive, and the demo that turns the card over useEffect(() => { const root = rootRef.current; const swing = swingRef.current; const shade = shadeRef.current; if (!root || !swing || !shade) return; const s = live.current; if (reduce) { s.th = 0; flip.set(0); setQuiet(true); return; } let raf = 0; let last = performance.now(); let seen = true; const frame = (now: number) => { raf = requestAnimationFrame(frame); const dt = Math.min(0.034, (now - last) / 1000); last = now; if (!seen || document.hidden) return; if (s.drag) { const before = s.th; s.th += (s.aim - s.th) * Math.min(1, dt * 20); s.w = s.w * 0.6 + ((s.th - before) / Math.max(dt, 0.001)) * 0.4; } else if (s.held) { s.th += (0 - s.th) * Math.min(1, dt * 12); s.w = 0; } else { s.w += (-GRAVITY * Math.sin(s.th) - DRAG * s.w) * dt; s.th += s.w * dt; s.gust -= dt; if (s.gust < 0 && !s.paused) { s.w += (Math.random() < 0.5 ? -1 : 1) * 0.42; s.gust = 2.2 + Math.random() * 1.8; } } const deg = ((-s.th * 180) / Math.PI).toFixed(3); swing.style.transform = `rotate(${deg}deg)`; shade.style.transform = `rotate(${deg}deg)`; twist.set(s.held ? 0 : clamp(s.w * 5, -18, 18)); if (!s.touched && !s.paused && !s.busy) { s.clock += dt; if (s.clock > (flip.get() > 90 ? 0.85 : 4.2)) { s.clock = flip.get() > 90 ? 0 : -1.6; turnOver(); } } }; raf = requestAnimationFrame(frame); const io = new IntersectionObserver((entries) => { seen = entries[0]?.isIntersecting ?? true; }); io.observe(root); return () => { cancelAnimationFrame(raf); io.disconnect(); }; }, [flip, reduce, turnOver, twist]); useEffect(() => { const root = rootRef.current; const stage = stageRef.current; if (!root || !stage) return; const measure = () => { const sc = clamp(root.clientWidth / 1000, 0.82, 1.16); live.current.scale = sc; root.style.height = `${Math.round(SCENE_H * sc)}px`; stage.style.transform = `scale(${sc.toFixed(4)})`; stage.style.top = `${Math.round(KNOB_TOP * sc)}px`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(root); return () => ro.disconnect(); }, []); const angleTo = (e: ReactPointerEvent) => { const stage = stageRef.current; if (!stage) return 0; const r = stage.getBoundingClientRect(); return Math.atan2(e.clientX - r.left, Math.max(20, e.clientY - r.top)); }; const onDown = (e: ReactPointerEvent) => { const s = live.current; if (e.button !== 0 || s.busy) return; s.touched = true; s.moved = 0; s.x = e.clientX; s.y = e.clientY; if (reduce) return; s.drag = true; s.grab = angleTo(e) - s.th; s.aim = s.th; e.currentTarget.setPointerCapture(e.pointerId); }; const onMove = (e: ReactPointerEvent) => { const s = live.current; if (!s.drag) return; s.moved = Math.max(s.moved, Math.hypot(e.clientX - s.x, e.clientY - s.y)); s.aim = clamp(angleTo(e) - s.grab, -1.15, 1.15); }; const onUp = () => { live.current.drag = false; }; const brass = "radial-gradient(circle at 33% 27%, #fff8d8 0%, #f6dc8e 7%, rgba(246,220,142,0) 27%), linear-gradient(172deg, rgba(90,55,5,0) 0%, rgba(90,55,5,0) 50%, rgba(84,50,4,0.5) 56%, rgba(84,50,4,0.12) 78%, rgba(255,226,160,0.3) 100%), radial-gradient(circle at 74% 82%, rgba(255,214,140,0.5) 0%, rgba(255,214,140,0) 26%), radial-gradient(circle at 46% 42%, #dcb052 0%, #c4942f 42%, #99691c 70%, #6c4610 88%, #47300a 100%)"; return (

{ if (e.pointerType !== "touch") live.current.paused = true; }} onPointerLeave={() => (live.current.paused = false)} className="relative overflow-hidden bg-[#c3c9b8]" style={{ height: SCENE_H * 1.16 }} > {/* the painted door: light falling from the upper left, brush marks running with the grain */}

{/* sunk panel with its moulding */}

{/* the edge of the door, the gap, and the frame beyond it */}

{/* back plate of the knob */}

{/* shadow of the card on the door */} {/* the card: one button that turns it over, and something to drag */} {/* the knob, in front of the card while it hangs */}

); } 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/hotel-do-not-disturb-door-hanger-card-that-swings-on-a-brass-knob-and-flips-to-make-up-my-room.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]