61: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"] 62: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"] 63:T4aba,import { useEffect, useLayoutEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent, ReactNode } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring } from "framer-motion"; // The units that slide into the rack, top to bottom. Each one becomes a section of the page when it reaches the back. const units = [ { id: "shop", name: "Shop" }, { id: "blog", name: "Blog" }, { id: "form", name: "Contact" }, ] as const; const bakery = "Oat & Ember"; const headline = "Bread at seven. Gone by ten."; const loaves = [ { name: "Country loaf", price: "$9", bg: "#b08a63", src: "https://images.pexels.com/photos/4444069/pexels-photo-4444069.jpeg?auto=compress&cs=tinysrgb&w=240" }, { name: "Seeded batard", price: "$8", bg: "#cdb79a", src: "https://images.pexels.com/photos/5567093/pexels-photo-5567093.jpeg?auto=compress&cs=tinysrgb&w=240" }, { name: "Almond twist", price: "$5", bg: "#c9a273", src: "https://images.pexels.com/photos/13439698/pexels-photo-13439698.jpeg?auto=compress&cs=tinysrgb&w=240" }, ]; const heroPhoto = { bg: "#b08a63", src: "https://images.pexels.com/photos/4444069/pexels-photo-4444069.jpeg?auto=compress&cs=tinysrgb&w=600" }; const BLUE = "#4F98FB"; const W = 500, H = 580; // the drawing; scaled as one object const IW = 300, FR = 14, CW = IW + FR * 2, D = 160; // inner width, frame, cabinet width, depth const HEAD = 146, UH = 76, GAP = 6; const CH = FR + HEAD + (UH + GAP) * units.length + GAP + FR; const OUT = 104; // how far a unit stands proud of the rack when pulled const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const P3 = { transformStyle: "preserve-3d" as const }; const METAL = "linear-gradient(180deg,#2b303c 0%,#171a22 100%)"; const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; // The glass window in a faceplate. Dark until the unit is home, then the section wipes on behind a blue line. function Glass({ on, className, children }: { on: boolean; className: string; children: ReactNode }) { const reduce = useReducedMotion(); const t = reduce ? { duration: 0 } : { duration: 0.45, ease: [0.2, 0.8, 0.2, 1] as [number, number, number, number], delay: on ? 0.2 : 0 }; return ( Not connected {children} ); } const PLATE = "bg-[#F1EEE7] bg-[linear-gradient(180deg,#ffffff_0%,#f4f1ea_30%,#e3dfd4_100%)] shadow-[inset_0_1px_0_#ffffff,inset_0_-1px_0_rgba(11,13,18,0.25),inset_1px_0_0_rgba(255,255,255,0.8),inset_-1px_0_0_rgba(11,13,18,0.12)]"; export default function WebsiteFeatureRack() { const reduce = useReducedMotion(); const root = useRef(null); const [scale, setScale] = useState(1); const [home, setHome] = useState(units.map(() => true)); const [auto, setAuto] = useState(true); const [said, setSaid] = useState(""); useIsoLayoutEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.3, (el.clientWidth - 16) / W)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); // The self-running demo: the units roll home in turn, then one is drawn out and pushed back every few seconds. useIsoLayoutEffect(() => { if (reduce || !auto) return; const ids: number[] = []; const at = (ms: number, fn: () => void) => { ids.push(window.setTimeout(fn, ms)); }; const put = (i: number, v: boolean) => setHome((s) => s.map((x, k) => (k === i ? v : x))); setHome(units.map(() => false)); // The last unit waits outside for a few seconds so the first still picture shows a part on its way in. units.forEach((_, i) => at(i === units.length - 1 ? 4300 : 300 + i * 420, () => put(i, true))); let n = 0; const cycle = () => { const i = [1, 0, 2][n++ % 3]; put(i, false); at(2600, () => put(i, true)); at(5600, cycle); }; at(7800, cycle); return () => ids.forEach((id) => window.clearTimeout(id)); }, [reduce, auto]); const toggle = (i: number) => { setAuto(false); setHome((s) => s.map((x, k) => (k === i ? !x : x))); setSaid(`${units[i].name} unit ${home[i] ? "drawn out" : "pushed home"}.`); }; // The rack turns a few degrees towards the pointer. const px = useMotionValue(-26), py = useMotionValue(-21); 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 b = e.currentTarget.getBoundingClientRect(); px.set(-26 + ((e.clientX - b.left) / b.width - 0.5) * 12); py.set(-21 + ((e.clientY - b.top) / b.height - 0.5) * 8); }; const content: Record = { shop: ( {loaves.map((l) => (

{l.name} {l.price}Add ))} ), blog: (

From the bakehouse How we feed the starter ), form: ( Your name Order a cake for Saturday Send ), }; return (

{ px.set(-26); py.set(-21); }} style={{ fontFamily: FONT }} className="relative flex min-h-[500px] w-full items-center justify-center overflow-hidden bg-[#D7E3F4] bg-[radial-gradient(80%_62%_at_50%_42%,#f3f8ff_0%,#D7E3F4_50%,#b9cbe4_100%)] py-6 sm:min-h-[820px]">

{/* shadow lying on the table */} {/* inside of the cabinet */} {/* top of the cabinet */} {/* right side of the cabinet with cooling slots */} {/* front frame, in strips so nothing cuts through the sliding units */} {units.map((u, i) => )} {/* rack-ear holes */} {[0, 1].map((side) => ( ))} {/* the fixed head of the page: menu and hero */} {/* the sliding units */} {units.map((u, i) => ( {/* top of the unit: brushed lid with a paper label you only see when it is out */} {u.name} U{i + 1} {/* right side of the unit with its slide rail */} {/* faceplate */} ))}

{said}

); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/website-rack-with-feature-units-that-slide-home-on-rails-and-light-up-as-sections-of-the-page.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]