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:T56f8,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 blocks, in the order they start in (top of the page first). `h` is the block height in the drawing. type Finish = "resin" | "ceramic" | "metal" | "lacquer"; const blocks: { id: string; name: string; finish: Finish; h: number; dx: number; turn: number }[] = [ { id: "hero", name: "Hero", finish: "resin", h: 104, dx: 0, turn: 0.8 }, { id: "features", name: "Features", finish: "ceramic", h: 70, dx: -7, turn: -2.2 }, { id: "pricing", name: "Pricing", finish: "metal", h: 84, dx: 6, turn: 1.6 }, { id: "footer", name: "Footer", finish: "lacquer", h: 58, dx: -3, turn: -0.7 }, ]; const shop = "Fern & Vetch"; const headline = "Flowers cut this morning."; const heroPhoto = { bg: "#d9b9c0", src: "https://images.pexels.com/photos/4499921/pexels-photo-4499921.jpeg?auto=compress&cs=tinysrgb&w=600" }; const perks = ["Same-day bunches", "Wedding flowers", "Sunday workshops"]; const sizes = [ { name: "Posy", price: "$24" }, { name: "Bunch", price: "$42" }, { name: "Armful", price: "$68" }, ]; const BLUE = "#4F98FB"; const BW = 240, BD = 150, PAD = 9; // block width, depth, and the margin of material around each inlaid panel const OUT = BD + 36; // how far a block is drawn forward before it changes place const TOTAL = blocks.reduce((s, b) => s + b.h, 0); const NAV = 26, SG = 3; // page menu height and the gap between page sections const PW = BW - PAD * 2; const PAGE_H = NAV + blocks.reduce((s, b) => s + b.h - PAD * 2 + SG, 0) + 6; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const P3 = { transformStyle: "preserve-3d" as const }; const RX = -23, RY = 29; const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; // Front, top and side of each material. The side is seen in shade, the top catches the light. const FINISH: Record = { resin: { front: "bg-[#4F98FB] bg-[radial-gradient(130%_100%_at_50%_118%,#b9d8ff_0%,#6aaafc_34%,#4F98FB_58%,#2f6fd3_100%)] shadow-[inset_0_1.5px_0_rgba(255,255,255,0.9),inset_2px_0_0_rgba(255,255,255,0.45),inset_0_0_20px_rgba(214,232,255,0.55),inset_0_-2px_1px_rgba(214,232,255,0.7)]", top: "bg-[#8bbcff] bg-[linear-gradient(118deg,#d4e6ff_0%,#8fbeff_30%,#5fa3fc_62%,#4F98FB_100%)] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.7),inset_0_0_26px_rgba(255,255,255,0.45)]", side: "bg-[#2b68c9] bg-[linear-gradient(180deg,#2459b3_0%,#2f6fd3_45%,#5a9bf2_100%)] shadow-[inset_0_1px_0_rgba(214,232,255,0.8),inset_0_0_20px_rgba(160,200,255,0.4),inset_0_-2px_1px_rgba(214,232,255,0.6)]", chip: "#4F98FB", }, ceramic: { front: "bg-[#F6F4EF] bg-[linear-gradient(180deg,#ffffff_0%,#F6F4EF_36%,#e4e0d6_100%)] shadow-[inset_0_1px_0_#ffffff,inset_0_-2px_0_rgba(11,13,18,0.14)]", top: "bg-[#fbfaf7] bg-[linear-gradient(118deg,#ffffff_0%,#fbfaf7_45%,#ebe8df_100%)] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.9)]", side: "bg-[#cfcabd] bg-[linear-gradient(90deg,#dedacf_0%,#cbc6b9_40%,#b4afa2_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]", chip: "#F6F4EF", }, metal: { front: "bg-[#b3b9c4] bg-[linear-gradient(180deg,#dfe3ea_0%,#bcc2cd_30%,#a3a9b5_72%,#8a909c_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),inset_0_-2px_0_rgba(11,13,18,0.28)]", top: "bg-[#d3d8e0] bg-[linear-gradient(118deg,#f4f6f9_0%,#d3d8e0_40%,#b4bac5_100%)] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.75)]", side: "bg-[#7d838f] bg-[linear-gradient(90deg,#959ba7_0%,#7d838f_40%,#676d79_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.6)]", chip: "#b3b9c4", }, lacquer: { front: "bg-[#0B0D12] bg-[linear-gradient(180deg,#343945_0%,#161920_22%,#0B0D12_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-2px_0_rgba(0,0,0,0.6)]", top: "bg-[#1b1e27] bg-[linear-gradient(118deg,#6b7282_0%,#2a2e39_26%,#14161d_60%,#0B0D12_100%)] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.22)]", side: "bg-[#07080b] bg-[linear-gradient(90deg,#15181f_0%,#090a0e_50%,#040507_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.28)]", chip: "#0B0D12", }, }; const BRUSH = "[background:repeating-linear-gradient(90deg,rgba(255,255,255,0.16)_0_1px,rgba(0,0,0,0.05)_1px_3px)]"; const order0 = blocks.map((b) => b.id); const byId = (id: string) => blocks.find((b) => b.id === id) ?? blocks[0]; // One section of the florist's page. The same drawing is inlaid in a block and laid out on the live page. function Section({ id }: { id: string }): ReactNode { if (id === "hero") return (

{headline} Order a bunch ); if (id === "features") return ( {perks.map((p, i) => ( {p} ))} ); if (id === "pricing") return ( {sizes.map((s, i) => ( {s.name} {s.price} ))} ); return ( {shop} 9 Mill Lane, open Tuesday to Sunday VisitCareWrite ); } export default function PageSectionBlockStack() { const reduce = useReducedMotion(); const root = useRef(null); const timers = useRef([]); const busy = useRef(false); const [box, setBox] = useState({ scale: 1, narrow: false }); const [order, setOrder] = useState(order0); const [lifted, setLifted] = useState(null); const [closed, setClosed] = useState(false); // true while the pile has closed up over the space the lifted block left const [auto, setAuto] = useState(true); const [said, setSaid] = useState("Four blocks, one page. Lift any block to move its section."); const W = box.narrow ? 400 : 800, H = box.narrow ? 836 : 520; useIsoLayoutEffect(() => { const el = root.current; if (!el) return; const fit = () => { const narrow = el.clientWidth < 700; setBox({ narrow, scale: Math.min(1.3, (el.clientWidth - 16) / (narrow ? 400 : 800)) }); }; fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); const later = (ms: number, fn: () => void) => { timers.current.push(window.setTimeout(fn, ms)); }; useEffect(() => () => timers.current.forEach((t) => window.clearTimeout(t)), []); // Draw a block forward, let the others settle into the space, then seat it in its new place. const move = (id: string, to: number) => { const from = order.indexOf(id); if (busy.current || from === to || to < 0 || to >= order.length) return; const next = order.filter((x) => x !== id); next.splice(to, 0, id); const b = byId(id); if (reduce) { setOrder(next); setSaid(`${b.name} moved to place ${to + 1} of ${order.length}.`); return; } busy.current = true; setLifted(id); setSaid(`${b.name} lifted out.`); later(420, () => { setClosed(true); setSaid(`${b.name} lifted out. The stack settles.`); }); later(960, () => { setOrder(next); setClosed(false); }); later(1400, () => { setLifted(null); setSaid(`${b.name} seated in place ${to + 1}. The page follows.`); }); later(1800, () => { busy.current = false; }); }; const moveRef = useRef(move); moveRef.current = move; // The self-running demo starts from the finished page, holds it, then shuffles a block every few seconds. useEffect(() => { if (reduce || !auto) return; const steps: [string, number][] = [["pricing", 1], ["pricing", 0], ["hero", 0], ["features", 1]]; let n = 0; const step = () => { const s = steps[n++ % steps.length]; moveRef.current(s[0], s[1]); }; let every = 0; const first = window.setTimeout(() => { step(); every = window.setInterval(step, 3600); }, 5000); return () => { window.clearTimeout(first); window.clearInterval(every); }; }, [reduce, auto]); const press = (id: string) => { setAuto(false); move(id, order.indexOf(id) === 0 ? order.length - 1 : 0); }; const onKey = (e: ReactKeyboardEvent, id: string) => { if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return; e.preventDefault(); setAuto(false); move(id, order.indexOf(id) + (e.key === "ArrowUp" ? -1 : 1)); }; // The stack turns a few degrees towards the pointer. const px = useMotionValue(RY), py = useMotionValue(RX); const rotateY = useSpring(px, { stiffness: 90, damping: 16 }), rotateX = useSpring(py, { stiffness: 90, damping: 16 }); const onMove = (e: ReactPointerEvent) => { if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); px.set(RY + ((e.clientX - r.left) / r.width - 0.5) * 10); py.set(RX + ((e.clientY - r.top) / r.height - 0.5) * 7); }; // Page sections are measured from the top. Blocks are measured up from the plinth, so taking one out lets the ones above it drop. const pageY = (id: string) => { let y = 0; for (const o of order) { if (o === id) break; y += byId(o).h - PAD * 2 + SG; } return y; }; const blockY = (id: string) => { let y = TOTAL; for (let i = order.length - 1; i >= 0; i--) { const o = order[i]; if (closed && o === lifted && o !== id) continue; y -= byId(o).h; if (o === id) break; } return y; }; const stackAt = box.narrow ? { left: 82, top: 62 } : { left: 138, top: 112 }; const pageAt = box.narrow ? { left: 67, top: 424 } : { left: 488, top: 74 }; return (

{ px.set(RY); py.set(RX); }} style={{ fontFamily: FONT }} className="relative flex min-h-[640px] w-full items-center justify-center overflow-hidden bg-[#E3E6EC] bg-[radial-gradient(78%_64%_at_42%_40%,#fbfcfe_0%,#E3E6EC_52%,#c6ccd8_100%)] py-6 sm:min-h-[700px]">

{/* the stack */}

{/* shadow on the table, then the plinth */} {blocks.map((b) => { const slot = order.indexOf(b.id), up = lifted === b.id, f = FINISH[b.finish]; return (

); } 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/page-section-blocks-in-resin-ceramic-and-anodised-metal-that-lift-out-of-a-stack-to-reorder-a-live-page.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]