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:T49a5,import { useEffect, useLayoutEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring } from "framer-motion"; // The tiles: where each starts (column, row), how many cells it covers and what it is glazed with. type Glaze = "photo" | "white" | "blue" | "black" | "stone"; const tiles: { id: string; name: string; c: number; r: number; w: number; h: number; glaze: Glaze }[] = [ { id: "hero", name: "Hero", c: 0, r: 0, w: 2, h: 2, glaze: "photo" }, { id: "cone", name: "Photo", c: 2, r: 0, w: 1, h: 2, glaze: "photo" }, { id: "flavours", name: "Flavours", c: 0, r: 2, w: 2, h: 1, glaze: "white" }, { id: "order", name: "Order", c: 2, r: 2, w: 1, h: 1, glaze: "blue" }, { id: "hours", name: "Hours", c: 0, r: 3, w: 1, h: 1, glaze: "black" }, { id: "tubs", name: "Tubs", c: 1, r: 3, w: 2, h: 1, glaze: "stone" }, { id: "map", name: "Address", c: 1, r: 4, w: 1, h: 1, glaze: "white" }, ]; const shop = "Pico Gelato"; const headline = "Gelato, churned at dawn."; const flavours = ["Pistachio", "Fior di latte", "Blood orange"]; const photos = { hero: { bg: "#d8456a", src: "https://images.pexels.com/photos/5535554/pexels-photo-5535554.jpeg?auto=compress&cs=tinysrgb&w=500", at: "50% 40%" }, cone: { bg: "#e9e4de", src: "https://images.pexels.com/photos/7761650/pexels-photo-7761650.jpeg?auto=compress&cs=tinysrgb&w=400", at: "42% 46%" }, }; const COLS = 3, ROWS = 5, P = 78, G = 4; // grid, cell pitch and the gap between tiles const BW = G + COLS * P, BH = G + ROWS * P; // the board inside the tray const RIM = 17, TW = BW + RIM * 2, TH = BH + RIM * 2; const K = 0.72; // the phone shows the same board at this scale const HEAD = 26, BEZ = 7, PHW = BW * K + BEZ * 2, PHH = BH * K + HEAD + BEZ * 2; const W = 16 + TW + 34 + PHW + 16, H = TH + 40; const TX = 16, TY = 10, PHX = TX + TW + 34, PHY = TY + (TH - PHH) / 2 + 6; const BLUE = "#4F98FB"; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const RX = 31, RZ = -5; const DIRS = { up: [0, -1], left: [-1, 0], right: [1, 0], down: [0, 1] } as const; type Dir = keyof typeof DIRS; type Pos = Record; const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; const start: Pos = Object.fromEntries(tiles.map((t) => [t.id, { c: t.c, r: t.r }])); const extrude = (edge: string, n: number, cast: string) => `inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(0,0,0,0.18), ${Array.from({ length: n }, (_, i) => `0 ${i + 1}px 0 ${edge}`).join(", ")}, ${cast}`; const GLAZE: Record = { photo: { face: "#F6F4EF", edge: "#b9b4a6" }, white: { face: "linear-gradient(165deg,#ffffff 0%,#F6F4EF 55%,#e9e5db 100%)", edge: "#b9b4a6" }, blue: { face: "linear-gradient(165deg,#86b9ff 0%,#4F98FB 50%,#3f86ee 100%)", edge: "#2459b3" }, black: { face: "linear-gradient(165deg,#3a3f4b 0%,#14171e 40%,#0B0D12 100%)", edge: "#000000" }, stone: { face: "linear-gradient(165deg,#ebe6da 0%,#d9d3c4 60%,#cbc4b3 100%)", edge: "#9d9684" }, }; // Can this tile move one cell that way without leaving the board or meeting another tile? function free(pos: Pos, id: string, dir: Dir) { const t = tiles.find((x) => x.id === id); if (!t) return false; const [dc, dr] = DIRS[dir], c = pos[id].c + dc, r = pos[id].r + dr; if (c < 0 || r < 0 || c + t.w > COLS || r + t.h > ROWS) return false; return tiles.every((o) => o.id === id || c + t.w <= pos[o.id].c || pos[o.id].c + o.w <= c || r + t.h <= pos[o.id].r || pos[o.id].r + o.h <= r); } const back: Record = { up: "down", down: "up", left: "right", right: "left" }; // What is printed on each tile. Drawn at tray size; the phone shows the same drawing scaled down. function Face({ id }: { id: string }): ReactNode { if (id === "hero" || id === "cone") { const p = photos[id]; return (

{id === "hero" && ( <> {headline} )} ); } if (id === "flavours") return ( In the cabinet today {flavours.map((f, i) => {f})} ); if (id === "order") return ( Order ahead ); if (id === "hours") return ( Open 11 to 10 every day ); if (id === "tubs") return ( Take a tub home Half litre or a full one ); return ( 14 Quay Street ); } export default function SlidingSectionTray() { const reduce = useReducedMotion(); const root = useRef(null); const [scale, setScale] = useState(1); const [pos, setPos] = useState(start); const posRef = useRef(pos); posRef.current = pos; const [auto, setAuto] = useState(true); const [stuck, setStuck] = useState(null); const [said, setSaid] = useState("Seven tiles, two free cells. Slide a tile and the homepage follows."); const drag = useRef<{ id: string; x: number; y: number } | null>(null); const swiped = useRef(false); useIsoLayoutEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.34, (el.clientWidth - 12) / W)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); const slide = (id: string, dir: Dir, quiet = false) => { const p = posRef.current; if (!free(p, id, dir)) return false; const [dc, dr] = DIRS[dir]; const next = { ...p, [id]: { c: p[id].c + dc, r: p[id].r + dr } }; posRef.current = next; setPos(next); if (!quiet) setSaid(`${tiles.find((t) => t.id === id)?.name} tile slid ${dir}. Now in column ${next[id].c + 1}, row ${next[id].r + 1}.`); return true; }; const refuse = (id: string) => { setSaid(`${tiles.find((t) => t.id === id)?.name} tile is boxed in. Clear a space beside it first.`); if (reduce) return; setStuck(id); window.setTimeout(() => setStuck((s) => (s === id ? null : s)), 320); }; const attempt = (id: string, dir?: Dir) => { setAuto(false); const d = dir ?? (Object.keys(DIRS) as Dir[]).find((k) => free(posRef.current, id, k)); if (!d || !slide(id, d)) refuse(id); }; // The self-running demo: hold the finished page, make a few legal moves, then take them back in reverse. useEffect(() => { if (reduce || !auto) return; const done: { id: string; dir: Dir }[] = []; let forward = true, rest = 4, seed = 7; const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647; const tick = () => { if (rest > 0) { rest--; return; } if (forward) { const last = done[done.length - 1]; const options = tiles.flatMap((t) => (Object.keys(DIRS) as Dir[]).filter((d) => free(posRef.current, t.id, d) && !(last && last.id === t.id && back[last.dir] === d)).map((d) => ({ id: t.id, dir: d }))); const pick = options[Math.floor(rand() * options.length)]; if (pick && slide(pick.id, pick.dir, true)) done.push(pick); if (done.length >= 6) { forward = false; rest = 1; } } else { const m = done.pop(); if (m) slide(m.id, back[m.dir], true); if (!done.length) { forward = true; rest = 3; } } }; const id = window.setInterval(tick, 1150); return () => window.clearInterval(id); }, [reduce, auto]); const onKey = (e: ReactKeyboardEvent, id: string) => { const d = ({ ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" } as Record)[e.key]; if (!d) return; e.preventDefault(); attempt(id, d); }; const onUp = (e: ReactPointerEvent) => { const d = drag.current; drag.current = null; if (!d || e.pointerType === "touch") return; const dx = e.clientX - d.x, dy = e.clientY - d.y; if (Math.max(Math.abs(dx), Math.abs(dy)) < 14) return; swiped.current = true; attempt(d.id, Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? "right" : "left") : dy > 0 ? "down" : "up"); }; // The table top leans a little towards the pointer. const px = useMotionValue(RZ), py = useMotionValue(RX); const rotateZ = useSpring(px, { stiffness: 80, damping: 16 }), rotateX = useSpring(py, { stiffness: 80, damping: 16 }); const onMove = (e: ReactPointerEvent) => { if (reduce || e.pointerType === "touch") return; const b = e.currentTarget.getBoundingClientRect(); px.set(RZ + ((e.clientX - b.left) / b.width - 0.5) * 4); py.set(RX - ((e.clientY - b.top) / b.height - 0.5) * 6); }; const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 520, damping: 34, mass: 0.9 }; return (
{ px.set(RZ); py.set(RX); }} style={{ fontFamily: FONT }} className="relative flex min-h-[400px] w-full flex-col items-center justify-center gap-1 overflow-hidden bg-[#E4DFD4] bg-[radial-gradient(72%_62%_at_46%_40%,#faf8f2_0%,#E4DFD4_55%,#cbc5b6_100%)] py-6 sm:min-h-[700px]">

{/* the tray */}
`0 ${i + 1}px 0 ${i < 2 ? "#23262f" : "#050608"}`).join(", ")}, 0 34px 34px rgba(60,48,26,0.45), 22px 60px 70px rgba(60,48,26,0.4)` }} className="absolute rounded-[22px] bg-[#14171e] bg-[linear-gradient(160deg,#4a505d_0%,#1d2029_24%,#0B0D12_100%)]"> {/* the floor of the tray */}
{tiles.map((t) => { const g = GLAZE[t.glaze], w = t.w * P - G, h = t.h * P - G; return ( { if (swiped.current) { swiped.current = false; return; } attempt(t.id); }} onKeyDown={(e) => onKey(e, t.id)} onPointerDown={(e) => { drag.current = { id: t.id, x: e.clientX, y: e.clientY }; }} onPointerUp={onUp} aria-label={`${t.name} tile, column ${pos[t.id].c + 1}, row ${pos[t.id].r + 1}. Press to slide it into a free space, or use the arrow keys.`} style={{ width: w, height: h }} className="group absolute left-0 top-0 cursor-pointer rounded-[10px] outline-none focus-visible:ring-2 focus-visible:ring-[#4F98FB] focus-visible:ring-offset-2 focus-visible:ring-offset-[#1b2030]" > ); })}
{/* the phone lying beside it, showing the same arrangement as a page */}
`0 ${i + 1}px 0 ${i < 1 ? "#3a3f4b" : "#050608"}`).join(", ")}, 0 20px 22px rgba(60,48,26,0.45), 14px 36px 44px rgba(60,48,26,0.35)` }} className="absolute rounded-[24px] bg-[#0B0D12]"> {shop} {tiles.map((t) => ( ))}

); } 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/sliding-block-puzzle-tray-where-page-sections-are-thick-glazed-tiles-you-slide-to-rearrange-a-homepage-on-a-phone.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]