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:T5cbe,import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; import { ChevronLeft, ChevronRight } from "lucide-react"; /** One slip per client. They start on the left spike in this order, first one on top. */ const notes = [ { name: "Arjun Mehta", company: "Mehta Optics", quote: "I asked for a simple page. I got a simple page. You would be amazed how rare that is.", paper: "#fbeeb4", photo: { src: "https://images.pexels.com/photos/15241179/pexels-photo-15241179.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Young man in a white t-shirt in front of a pink lit wall", tone: "#c2559a", focus: "50% 38%" }, }, { name: "Clara Voss", company: "Voss Joinery", quote: "You built a joiner's site that somehow smells of sawdust. The first enquiry was for a staircase.", paper: "#fdfaf1", photo: { src: "https://images.pexels.com/photos/18490818/pexels-photo-18490818.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Woman in a denim dress and silver necklace leaning against a mustard wall", tone: "#a8851e", focus: "55% 26%" }, }, { name: "Ingrid Solberg", company: "Solberg Yarn", quote: "My daughter said the shop looked like me. Best review I have had since I opened the place.", paper: "#f8d5da", photo: { src: "https://images.pexels.com/photos/7544773/pexels-photo-7544773.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Older woman with long grey hair in a green dress talking on a phone against a blue backdrop", tone: "#1f4f7a", focus: "45% 18%" }, }, { name: "Walter Finch", company: "Finch and Daughter, Tailors", quote: "Forty years of cutting cloth and nobody had ever measured my business this carefully.", paper: "#d5ecd8", photo: { src: "https://images.pexels.com/photos/33041187/pexels-photo-33041187.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Elderly man with a white beard in an orange jacket and scarf holding a straw hat", tone: "#4a2f22", focus: "50% 22%" }, }, { name: "Paloma Reyes", company: "Casa Reyes Hats", quote: "They kept every hat, kept the mess I like, and somehow the checkout takes one thumb.", paper: "#d6e6f6", photo: { src: "https://images.pexels.com/photos/18506131/pexels-photo-18506131.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Woman with curly hair holding a black hat on her head, sitting against an orange backdrop", tone: "#e2660c", focus: "50% 22%" }, }, { name: "Sana Qureshi", company: "Loop Denim Repair", quote: "Launch day was so quiet I thought it had broken. It had just worked the first time.", paper: "#f7e2cc", photo: { src: "https://images.pexels.com/photos/34366695/pexels-photo-34366695.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Woman looking over the raised collar of a denim jacket against a red backdrop", tone: "#b3141c", focus: "40% 30%" }, }, ]; const TURNS = [-19, 13, -7, 26, -13, 8]; // how each slip happens to sit on a spike, in degrees // A slip is drawn at reading size. Everything on the desk lives on a plane tipped away by TILT. const PW = 300; const PH = 420; const HOLE_X = 150; const HOLE_Y = 196; const TILT = 60; const GAP = 5; // rise of the pile per slip const WIDE = { w: 1100, h: 660, gy: 500, spx: 378, kit: 1.1, small: 0.47, big: 1, cy: 290 }; const TALL = { w: 400, h: 740, gy: 630, spx: 108, kit: 0.6, small: 0.47, big: 0.9, cy: 236 }; const SPIKE_H = 250; const BASE_R = 94; const BASE_H = 17; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const ease = (t: number) => t * t * (3 - 2 * t); const rad = (d: number) => (d * Math.PI) / 180; const HAND = `"Bradley Hand", "Segoe Print", "Noteworthy", "Marker Felt", cursive`; const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; const FIBRE = svg( ``, ); // sx is which spike the slip is over (-1 left, 1 right, in between while it crosses), dest is the one it belongs on type Slip = { h: number; hv: number; u: number; uv: number; rot: number; rv: number; sx: number; sxv: number; dest: number; held: boolean; landed: boolean }; type Layout = typeof WIDE; const levelOf = (k: number, side: number) => (side > 0 ? k : notes.length - 1 - k); const restH = (k: number, side: number, L: Layout) => (BASE_H + 5 + levelOf(k, side) * GAP) * L.kit; export default function DeskSpikeNotes() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const sceneRef = useRef(null); const slipRefs = useRef<(HTMLDivElement | null)[]>([]); const shadowRef = useRef(null); const [tall, setTall] = useState(false); // slips before `at` are on the right spike, slips after it on the left, and slip `at` is in the hand once `holding` const [at, setAt] = useState(1); const [holding, setHolding] = useState(reduce); const where = useRef({ at: 1, holding: reduce }); const sim = useRef(notes.map((_, k) => ({ h: restH(k, k < 1 ? 1 : -1, WIDE), hv: 0, u: reduce && k === 1 ? 1 : 0, uv: 0, rot: TURNS[k], rv: 0, sx: k < 1 ? 1 : -1, sxv: 0, dest: k < 1 ? 1 : -1, held: reduce && k === 1, landed: true }))); const env = useRef({ scale: 1, layout: WIDE as Layout, touched: false, inside: false, visible: true, wake: () => {} }); const paint = useCallback((k: number) => { const el = slipRefs.current[k]; if (!el) return; const L = env.current.layout; const s = sim.current[k]; const e = ease(clamp(s.u, 0, 1)); // where the hole has to be for the slip to sit centred and facing you const hx = k % 2 ? 6 : -6; const hz = (L.gy - L.cy + (PH / 2 - HOLE_Y) * L.big) / Math.sin(rad(TILT)); const x = lerp(s.sx * L.spx, hx, e); const z = lerp(s.h, hz, e) + Math.sin(e * Math.PI) * 34 * L.kit; const size = lerp(L.small * L.kit, L.big, e); const turn = lerp(s.rot, k % 2 ? 1.6 : -1.8, e); // it rattles on the steel while it travels along the spike const rattle = (1 - e) * clamp(s.hv / 60, -1, 1) * Math.sin(s.h * 0.16) * 7; el.style.transform = `translate3d(${x.toFixed(2)}px, 0px, ${z.toFixed(2)}px) rotateX(${(-TILT * e).toFixed(2)}deg) rotateZ(${turn.toFixed(2)}deg) rotateY(${rattle.toFixed(2)}deg) scale(${size.toFixed(4)})`; el.style.setProperty("--lit", e.toFixed(3)); // the slip in the hand throws a soft shadow on the pad below it if (shadowRef.current) shadowRef.current.style.opacity = Math.max(...sim.current.map((o) => clamp(o.u, 0, 1))).toFixed(3); // slips further down a pile sit in the shade of the ones above const w = where.current; const deep = s.dest > 0 ? w.at - 1 - k : k - w.at - (w.holding ? 1 : 0); el.style.setProperty("--under", (clamp(deep, 0, 4) * 0.07 * (1 - e)).toFixed(3)); }, []); const go = useCallback( (nextAt: number, byHand: boolean) => { if (byHand) env.current.touched = true; const w = where.current; const to = clamp(nextAt, 0, notes.length - 1); if (w.holding && to === w.at) return; w.at = to; w.holding = true; setAt(to); setHolding(true); const L = env.current.layout; sim.current.forEach((s, k) => { s.held = k === to; if (!s.held) { const dest = k < to ? 1 : -1; if (s.u > 0.02 || s.dest !== dest) s.landed = false; s.dest = dest; } else s.landed = false; if (reduce) { s.u = s.held ? 1 : 0; s.sx = s.dest; s.h = restH(k, s.dest, L); s.landed = !s.held; } paint(k); }); env.current.wake(); }, [paint, reduce], ); useEffect(() => { const root = rootRef.current; const scene = sceneRef.current; if (!root || !scene) return; const measure = () => { const narrow = root.clientWidth < 700; const L = narrow ? TALL : WIDE; const sc = clamp(root.clientWidth / L.w, 0.5, 1.14); const was = env.current.layout; env.current.scale = sc; env.current.layout = L; root.style.height = `${Math.round(L.h * sc)}px`; scene.style.width = `${L.w}px`; scene.style.height = `${L.h}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; setTall(narrow); sim.current.forEach((s, k) => { if (was !== L && s.landed) s.h = restH(k, s.dest, L); paint(k); }); }; measure(); const ro = new ResizeObserver(measure); ro.observe(root); return () => ro.disconnect(); }, [paint]); useEffect(() => { sim.current.forEach((_, k) => paint(k)); }, [tall, paint]); useEffect(() => { if (reduce) return; const root = rootRef.current; if (!root) return; const e = env.current; let raf = 0; let last = performance.now(); let wait = 0.45; let dir = 1; let breeze = 2.4; const tick = (now: number) => { raf = 0; const dt = Math.min(0.03, (now - last) / 1000); last = now; const L = e.layout; const top = (SPIKE_H + 30) * L.kit; if (!e.touched && !e.inside) { wait -= dt; if (wait < 0) { const w = where.current; if (!w.holding) go(w.at, false); else { if (w.at + dir > notes.length - 1 || w.at + dir < 0) dir = -dir; go(w.at + dir, false); } wait = 4.2; } } breeze -= dt; sim.current.forEach((s, k) => { const floor = restH(k, s.dest, L); const lift = () => { s.hv += (210 * (top - s.h) - 21 * s.hv) * dt; s.h += s.hv * dt; }; if (s.held) { if (s.u < 0.04 && s.h < top - 5) lift(); // up the spike first else { s.h = top; s.hv = 0; s.uv += (58 * (1 - s.u) - 13.5 * s.uv) * dt; s.u += s.uv * dt; } } else if (s.u > 0.03) { // out of the hand and over the tip of the spike it belongs on s.h = top; s.sx = s.dest; s.uv += (64 * (-0.04 - s.u) - 14 * s.uv) * dt; s.u = Math.max(0, s.u + s.uv * dt); if (s.u <= 0.03) { s.u = 0; s.uv = 0; s.hv = -120 * L.kit; s.rv += k % 2 ? 150 : -150; } } else if (!s.landed && Math.abs(s.sx - s.dest) > 0.01) { // caught half way: clear the tip, then cross to the other spike if (s.h < top - 5) lift(); else { s.sxv += (46 * (s.dest - s.sx) - 12 * s.sxv) * dt; s.sx += s.sxv * dt; } } else if (!s.landed) { // and down the steel under its own weight s.sx = s.dest; s.sxv = 0; s.hv -= 2300 * L.kit * dt; s.h += s.hv * dt; if (s.h <= floor) { s.h = floor; s.hv = -s.hv * 0.34; if (s.hv < 70 * L.kit) { s.hv = 0; s.landed = true; } } } // every slip can swivel on the steel if (breeze < 0 && s.landed && k % 3 === 1) s.rv += (k % 2 ? 1 : -1) * 22; s.rv += (34 * (TURNS[k] - s.rot) - 5.5 * s.rv) * dt; s.rot += s.rv * dt; const still = s.held ? Math.abs(1 - s.u) < 0.0006 && Math.abs(s.uv) < 0.002 : s.landed && Math.abs(s.rv) < 0.05 && Math.abs(TURNS[k] - s.rot) < 0.02; if (!still) paint(k); }); if (breeze < 0) breeze = 3.6; if (e.visible && !document.hidden) raf = requestAnimationFrame(tick); }; const start = () => { if (!raf && e.visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(tick); } }; e.wake = start; const io = new IntersectionObserver(([en]) => { e.visible = en.isIntersecting; start(); }); io.observe(root); document.addEventListener("visibilitychange", start); start(); return () => { cancelAnimationFrame(raf); io.disconnect(); document.removeEventListener("visibilitychange", start); e.wake = () => {}; }; }, [go, paint, reduce]); // a passing pointer turns the top slips on their spikes const onMove = (ev: React.PointerEvent) => { const scene = sceneRef.current; if (!scene || reduce) return; const e = env.current; const L = e.layout; const r = scene.getBoundingClientRect(); const x = (ev.clientX - r.left) / e.scale - L.w / 2; const y = (ev.clientY - r.top) / e.scale - L.gy; const reach = 150 * L.kit; sim.current.forEach((s, k) => { if (!s.landed || s.held) return; if (Math.abs(x - s.dest * L.spx) < reach && Math.abs(y) < reach * 0.6) s.rv += clamp(ev.movementX, -30, 30) * 0.5 * (levelOf(k, s.dest) + 1); }); }; const L = tall ? TALL : WIDE; const now = notes[at]; const canNext = !holding || at < notes.length - 1; const canPrev = holding && at > 0; const next = () => go(where.current.holding ? where.current.at + 1 : where.current.at, true); const prev = () => go(where.current.at - 1, true); const ring = "focus:outline-none focus-visible:ring-2 focus-visible:ring-[#f4d27a] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0d1626]"; return (

(env.current.inside = true)} onPointerLeave={() => (env.current.inside = false)}>

{/* the desk: everything in here is laid on a plane tipped back from the eye */}

{/* leather desk pad with a stitched edge */} {[-1, 1].map((sd) => { const R = BASE_R * L.kit; const BH = BASE_H * L.kit; const SH = SPIKE_H * L.kit; const SW = Math.max(4, 6.5 * L.kit); return ( ); })} {notes.map((n, k) => (

void (slipRefs.current[k] = el)} aria-hidden="true" className="desk-spike-notes-slip absolute overflow-hidden rounded-[3px]" style={{ left: -HOLE_X, top: -HOLE_Y, width: PW, height: PH, transformOrigin: `${HOLE_X}px ${HOLE_Y}px`, transform: `translate3d(${(k < 1 ? 1 : -1) * L.spx}px, 0px, ${restH(k, k < 1 ? 1 : -1, L)}px) rotateZ(${TURNS[k]}deg) scale(${L.small * L.kit})`, backgroundColor: n.paper, backgroundImage: `${FIBRE}, linear-gradient(140deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%, rgba(120,80,30,0.14))` }}>

Kind word No. {String(214 + k * 7).padStart(4, "0")}

From

{n.name}

{n.company}

{/* where the spike went through */}

{n.quote}

File copy Keep on the spike

))}

{/* pressing a pile is a shortcut for the pointer; the arrow buttons below are the real controls */}

canNext && next()} className={`absolute bottom-16 left-0 top-0 w-[30%] ${canNext ? "cursor-pointer" : ""}`} />

canPrev && prev()} className={`absolute bottom-16 right-0 top-0 w-[30%] ${canPrev ? "cursor-pointer" : ""}`} />

Spike file Read on the left, done on the right

{holding && ( <>

{now.quote}

{now.name}, {now.company}

)}

); } 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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/desk-spike-testimonials-with-handwritten-note-slips-that-lift-off-one-steel-spindle-and-drop-onto-another.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]