60: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"] 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:T42dd,import { useEffect, useRef, useState } from "react"; import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; const SHOP = "Marlowe Street Barbers"; // small line under the rack const DAY = "Friday 16 October"; // printed on the enamel plate const CHAIRS = ["Ines", "Tomas"]; // one column of pockets each const HOURS = ["10:00 am", "10:45 am", "11:30 am", "12:15 pm", "1:00 pm", "1:45 pm", "2:30 pm", "3:15 pm"]; // one row each const MINE = { name: "You", job: "Cut and beard trim" }; // what is typed on the card being placed const START = "6-0"; // row-column the card sits in at first const AUTOPLAY = true; // move the card between free pockets until someone picks one // Cards already in the rack, keyed row-column. Everything not listed is a free pocket. const TAKEN: Record = { "0-0": { name: "D. Achterberg", job: "Skin fade", stock: "#e6cf9c", no: "0412" }, "0-1": { name: "S. Lindqvist", job: "Hot towel shave", stock: "#b7cddd", no: "0388" }, "1-0": { name: "M. Okafor", job: "Cut and wash", stock: "#eeb39c", no: "0431" }, "2-1": { name: "J. Petrakis", job: "Beard shape", stock: "#e6cf9c", no: "0297" }, "3-0": { name: "A. Whitcombe", job: "Scissor cut", stock: "#bcd6b8", no: "0440" }, "3-1": { name: "R. Balogun", job: "Skin fade", stock: "#eeb39c", no: "0356" }, "5-0": { name: "T. Nakamura", job: "Cut and shave", stock: "#b7cddd", no: "0419" }, "5-1": { name: "L. Fairweather", job: "Restyle", stock: "#ece3cc", no: "0402" }, "7-1": { name: "C. Moreau", job: "Buzz cut", stock: "#bcd6b8", no: "0375" }, }; const LEAN = -11; // degrees the rack is turned away from the viewer; the pointer adds a little more const UP = 68; // how far a card is lifted to clear the lip of its pocket const noise = (f: number, o: number) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${f}' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='${o}'/%3E%3C/svg%3E")`; const PAPER = noise(0.9, 0.55), HAMMER = noise(0.16, 0.9), PLASTER = noise(0.7, 0.35); const tilt = (id: string) => ((id.charCodeAt(0) * 7 + id.charCodeAt(2) * 13) % 9) / 6 - 0.66; function Card({ name, job, stock, no, mine }: { name: string; job: string; stock: string; no: string; mine?: boolean }) { return (

{mine &&

}

{name} · {job}

No. {no}

); } function Screw({ className }: { className: string }) { return ; } export default function BarbershopAppointmentCardRack() { const reduce = useReducedMotion(); const [slot, setSlot] = useState(START); // the pocket chosen const [seat, setSeat] = useState(START); // the pocket the card is drawn in (it lags behind while the card is in the air) const [flight, setFlight] = useState<{ x0: number; y0: number; x1: number; y1: number; w: number } | null>(null); const [thud, setThud] = useState({ id: "", n: 0 }); const y = useMotionValue(0), px = useMotionValue(0), py = useMotionValue(0), sway = useMotionValue(0); const sx = useSpring(px, { stiffness: 70, damping: 15 }), sy = useSpring(py, { stiffness: 70, damping: 15 }); const rotateY = useTransform([sx, sway], ([a, b]: number[]) => LEAN + a * 7 + b * 1.6), rotateX = useTransform(sy, (v) => -v * 3.5); const rack = useRef(null), pockets = useRef>({}), touched = useRef(false), run = useRef(0), seatRef = useRef(START); useEffect(() => { if (slot === seatRef.current) return; const me = ++run.current, from = seatRef.current, land = () => { seatRef.current = slot; setSeat(slot); setFlight(null); }; const a = pockets.current[from], b = pockets.current[slot]; if (reduce || !a || !b) { land(); y.set(0); return; } // measured in the rack's own flat coordinates, so the turn of the rack does not matter const at = (el: HTMLElement) => { const row = el.offsetParent as HTMLElement; return { x: el.offsetLeft + row.offsetLeft, y: el.offsetTop + row.offsetTop }; }; const pa = at(a), pb = at(b); (async () => { await animate(y, -UP, { duration: 0.2, ease: [0.3, 0, 0.3, 1] }); // pulled up out of the old pocket if (me !== run.current) return; setFlight({ x0: pa.x, y0: pa.y, x1: pb.x, y1: pb.y, w: a.offsetWidth }); await new Promise((done) => window.setTimeout(done, 430)); // carried across the front of the rack if (me !== run.current) return; land(); y.set(-UP); await animate(y, 0, { type: "spring", stiffness: 520, damping: 19, mass: 0.9 }); // dropped behind the lip if (me === run.current) setThud((t) => ({ id: slot, n: t.n + 1 })); })(); }, [slot, reduce, y]); useEffect(() => { if (reduce) return; const s = animate(sway, [-1, 1], { duration: 6.5, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }); if (!AUTOPLAY) return () => s.stop(); const tour = ["4-1", "2-0", "6-1", "1-1", "6-0"]; let i = 0, timer = 0; const first = window.setTimeout(() => { const tick = () => { if (touched.current || document.hidden) return; setSlot(tour[i % tour.length]); i++; }; tick(); timer = window.setInterval(tick, 3000); }, 3100); return () => { s.stop(); window.clearTimeout(first); window.clearInterval(timer); }; }, [reduce, sway]); const [row, col] = slot.split("-").map(Number); const choose = (id: string) => { touched.current = true; setSlot(id); }; const onMove = (e: ReactPointerEvent) => { if (e.pointerType !== "mouse") return; const b = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - b.left) / b.width - 0.5) * 2); py.set(((e.clientY - b.top) / b.height - 0.5) * 2); }; const deep: CSSProperties = { transformStyle: "preserve-3d" }; const plate = "linear-gradient(180deg,#f7f2e4,#e3dac4)", plateEdge = "inset 0 1px 0 #fff, inset 0 0 0 1px rgba(60,48,20,0.3), 0 2px 3px rgba(0,0,0,0.5)"; const cols = "grid grid-cols-[46px_1fr_1fr] gap-x-2 sm:grid-cols-[72px_1fr_1fr] sm:gap-x-3"; return (

{ px.set(0); py.set(0); }} className="relative flex min-h-[820px] w-full flex-col items-center justify-center overflow-hidden bg-[#e4ddcf] px-4 py-10 sm:px-6" style={{ backgroundImage: "radial-gradient(90% 70% at 30% 20%,#f4efe4 0%,#e4ddcf 55%,#cfc7b6 100%)" }}>

Appointments

{DAY}

{CHAIRS.map((c, i) => (

Chair {i + 1} · {c}

))}

{HOURS.map((h, r) => (

{CHAIRS.map((chair, c) => { const id = `${r}-${c}`, card = TAKEN[id], here = seat === id && !flight, near = thud.id.endsWith(`-${c}`) && Math.abs(Number(thud.id.split("-")[0]) - r) === 1, z = r * 3; // lower pockets stand a little further out, as on a real rack return ( { pockets.current[id] = el; }} className={`group relative block h-full ${card ? "cursor-not-allowed" : "cursor-pointer"}`} style={deep}> choose(id)} aria-label={`${h} with ${chair}${card ? ", taken" : ""}`} /> {card && ( )} {here && ( )} ); })}

))} {flight && ( )}

{DAY}, {HOURS[row]} with {CHAIRS[col]} {SHOP} / drop your card in a free pocket

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/barbershop-appointment-card-rack-time-slot-picker-where-your-card-lifts-out-and-drops-into-a-free-hour-pocket.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]