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:T37c4,import { useEffect, useMemo, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** The pie on the pan. `cx`, `cy` and `r` say where the pizza sits inside its photograph, as fractions of the picture's width. */ const pizza = { name: "Pepperoni, 14 inch", price: 19.5, currency: "£", min: 2, max: 8, start: 6, photo: { src: "https://images.pexels.com/photos/29829308/pexels-photo-29829308.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Whole pepperoni pizza with a charred crust seen from directly above", tone: "#c4572b", cx: 0.5035, cy: 0.5215, r: 0.444, }, }; // Design pixels. The scene is a square that is scaled down as one object on narrow screens. const SCENE = 676; const PAN = 614; const D = 468; // pizza diameter const GAP = 7; // how far every slice sits from the centre once cut const PULL = 58; // extra travel of the slice that is yours const NUDGE = 13; // lift under the pointer const STIFF = 190; const DAMP = 15; const HOLD_MS = 2600; const DEMO = [8, 4, 3, 5, 6]; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const rad = (d: number) => (d * Math.PI) / 180; function wedge(a0: number, a1: number) { const pts = ["50% 50%"]; const steps = Math.max(2, Math.ceil((a1 - a0) / 4)); for (let s = 0; s <= steps; s += 1) { const a = rad(a0 + ((a1 - a0) * s) / steps); pts.push(`${(50 + 50 * Math.cos(a)).toFixed(3)}% ${(50 + 50 * Math.sin(a)).toFixed(3)}%`); } return `polygon(${pts.join(",")})`; } const WELL = "conic-gradient(from 200deg, #d9dadb 0deg, #9da0a3 34deg, #cfd0d1 70deg, #7e8285 112deg, #bfc1c2 150deg, #8f9396 190deg, #dcdddd 230deg, #868a8d 268deg, #c6c8c9 306deg, #9a9ea1 336deg, #d9dadb 360deg)"; const BRUSHED = "conic-gradient(from 218deg, #f6f6f4 0deg, #b9bbbd 28deg, #e6e7e7 58deg, #8d9093 96deg, #d5d6d6 132deg, #a2a5a8 170deg, #efefee 204deg, #969a9d 244deg, #dcdddd 286deg, #a9acae 322deg, #f6f6f4 360deg)"; export default function PizzaSharePicker() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const sliceRefs = useRef<(HTMLDivElement | null)[]>([]); const [n, setN] = useState(pizza.start); const [mineAt, setMineAt] = useState(18); // compass angle (0 is right, 90 is down) of the slice that is pulled out const [focus, setFocus] = useState(-1); const live = useRef({ n: pizza.start, mineAt: 18, hover: -1, closed: false, openAt: 0, touched: false, pos: Array(pizza.max).fill(GAP), vel: Array(pizza.max).fill(0) }); const span = 360 / n; const mine = Math.floor((((mineAt + 90) % 360) + 360) % 360 / span) % n; live.current.n = n; live.current.mineAt = mineAt; const bg = useMemo(() => { const size = D / (2 * pizza.photo.r); return { backgroundImage: `url(${pizza.photo.src})`, backgroundSize: `${size.toFixed(1)}px auto`, backgroundPosition: `${(D / 2 - pizza.photo.cx * size).toFixed(1)}px ${(D / 2 - pizza.photo.cy * size).toFixed(1)}px`, backgroundColor: pizza.photo.tone, filter: "saturate(1.18) contrast(1.06)" }; }, []); // close the pie, cut it again, then let the slices spring apart one after another const timer = useRef(0); const cut = (to: number) => { const next = clamp(to, pizza.min, pizza.max); if (next === live.current.n) return; if (reduce) { setN(next); return; } live.current.closed = true; window.clearTimeout(timer.current); timer.current = window.setTimeout(() => { setN(next); live.current.closed = false; live.current.openAt = performance.now(); }, 300); }; useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE - 30), 0.46, 1); wrap.style.height = `${Math.round(SCENE * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); useEffect(() => { const s = live.current; let raf = 0; let last = performance.now(); let seen = true; const io = new IntersectionObserver(([e]) => (seen = e.isIntersecting)); if (wrapRef.current) io.observe(wrapRef.current); const frame = (now: number) => { raf = requestAnimationFrame(frame); if (!seen || document.hidden) { last = now; return; } const dt = Math.min(0.032, (now - last) / 1000); last = now; const sp = 360 / s.n; const my = Math.floor((((s.mineAt + 90) % 360) + 360) % 360 / sp) % s.n; for (let i = 0; i < pizza.max; i += 1) { const el = sliceRefs.current[i]; if (!el || i >= s.n) continue; const waiting = now - s.openAt < i * 42; const target = s.closed || waiting ? 0 : GAP + (i === my ? PULL : 0) + (i === s.hover ? NUDGE : 0); if (reduce) { s.pos[i] = target; s.vel[i] = 0; } else { s.vel[i] += (-STIFF * (s.pos[i] - target) - DAMP * s.vel[i]) * dt; s.pos[i] += s.vel[i] * dt; } const mid = rad(-90 + (i + 0.5) * sp); const p = s.pos[i]; const lift = clamp((p - GAP) / PULL, 0, 1.2); el.style.transform = `translate(${(Math.cos(mid) * p).toFixed(2)}px, ${(Math.sin(mid) * p).toFixed(2)}px) rotate(${(lift * 3.2).toFixed(2)}deg)`; el.style.filter = `drop-shadow(${(2 + lift * 7).toFixed(1)}px ${(3.5 + lift * 11).toFixed(1)}px ${(2.5 + lift * 9).toFixed(1)}px rgba(24,12,4,${(0.7 - lift * 0.25).toFixed(2)}))`; } }; raf = requestAnimationFrame(frame); return () => { cancelAnimationFrame(raf); io.disconnect(); }; }, [reduce]); // the demo: start from the finished picture, then try other head counts until someone touches it useEffect(() => { if (reduce) return; let k = 0; let loop = 0; // the first hold is longer, so the opening picture is the finished one const first = window.setTimeout(() => { loop = window.setInterval(() => { if (live.current.touched || document.hidden) return; cut(DEMO[k % DEMO.length]); k += 1; }, HOLD_MS); }, 2400); return () => { window.clearTimeout(first); window.clearInterval(loop); window.clearTimeout(timer.current); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); const each = (pizza.price / n).toFixed(2); const step = (by: number) => { live.current.touched = true; cut(live.current.n + by); }; const round = "grid h-11 w-11 place-items-center rounded-full bg-[#1d1a16] text-[#f4eee2] transition-transform duration-150 hover:scale-105 active:scale-95 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#b3311b] focus-visible:ring-offset-2 focus-visible:ring-offset-[#ebe4d5]"; return (

{/* the pan: its shadow on the table, the rolled rim, the spun well */}

{/* knife scores left by other pies */} {[[22, 38, 190, 24], [48, 64, 240, -41], [30, 71, 150, 8], [55, 30, 210, 63], [18, 52, 260, -12]].map(([x, y, w, r], i) => ( ))} {/* oil and a few crumbs left where the pie was cut */}

{[ [44, 31, 5], [57, 68, 4], [29, 55, 3], [66, 40, 4], [49, 52, 5], [38, 72, 3], [71, 60, 3], [52, 24, 3], ].map(([x, y, w], i) => ( ))}

{/* the pizza: one photograph, cut into wedges */}

{Array.from({ length: pizza.max }, (_, i) => { const on = i < n; const a0 = -90 + i * span; return (

{ sliceRefs.current[i] = el; }} className="absolute inset-0" style={{ display: on ? "block" : "none", zIndex: i === mine ? 3 : i === focus ? 2 : 1, willChange: "transform", pointerEvents: "none" }} >

); })}

Shared between {n} {pizza.currency} {each} a slice

{pizza.name} · {pizza.currency} {pizza.price.toFixed(2)}

); } 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/pepperoni-pizza-share-picker-on-an-aluminium-pan-that-cuts-the-photograph-into-equal-slices-and-pulls-one-out.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]