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:T4eba,import { useEffect, useLayoutEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; import { motion, useReducedMotion } from "framer-motion"; // One cartridge per feature. `shell` is the plastic colour, `ink` the colour of the moulded name on its top band. const carts = [ { id: "book", name: "Bookings", code: "A", shell: ["#6aabff", "#4F98FB", "#3b7fdc"], edge: "#2d62ae", ink: "#0B0D12" }, { id: "shop", name: "Shop", code: "B", shell: ["#2a2f3c", "#161a23", "#0B0D12"], edge: "#030406", ink: "#F6F4EF" }, { id: "blog", name: "Journal", code: "C", shell: ["#e9e5dc", "#d8d3c7", "#c6c1b4"], edge: "#a39e91", ink: "#0B0D12" }, ] as const; const shopName = "Marlow & Fern"; const days = ["Thu 12", "Fri 13", "Sat 14", "Sun 15"]; const products = [ { name: "White tulips", price: "$28", src: "https://images.pexels.com/photos/33934121/pexels-photo-33934121.jpeg?auto=compress&cs=tinysrgb&w=240", bg: "#d9cdb8" }, { name: "Blush bunch", price: "$34", src: "https://images.pexels.com/photos/8393921/pexels-photo-8393921.jpeg?auto=compress&cs=tinysrgb&w=240", bg: "#3a3440" }, { name: "Dried posy", price: "$22", src: "https://images.pexels.com/photos/9957266/pexels-photo-9957266.jpeg?auto=compress&cs=tinysrgb&w=240", bg: "#b9b3ad" }, ]; const hero = { src: "https://images.pexels.com/photos/39753063/pexels-photo-39753063.jpeg?auto=compress&cs=tinysrgb&w=480", bg: "#d8cfc9" }; const BLUE = "#4F98FB"; const W = 460, H = 632; // drawn at this size, then scaled as one object const OUT = 0, IN = 58; // how far a cartridge travels down into its slot const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; function Icon({ id, color }: { id: string; color: string }) { const p = { fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const }; return ( ); } // A section of the little site. It is dark and dashed until its cartridge is seated, then it wipes on behind a blue scan line. function Row({ on, label, children }: { on: boolean; label: string; children: ReactNode }) { const reduce = useReducedMotion(); const t = reduce ? { duration: 0 } : { duration: 0.5, ease: [0.2, 0.8, 0.2, 1] as [number, number, number, number], delay: on ? 0.16 : 0 }; return (

Slot {label} empty

{children}

); } export default function WebsiteFeatureCartridgeConsole() { const reduce = useReducedMotion(); const root = useRef(null); const [scale, setScale] = useState(1); const [seated, setSeated] = useState([true, true, true]); const [auto, setAuto] = useState(true); const [day, setDay] = useState(1); const [said, setSaid] = useState(""); useIsoLayoutEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.16, (el.clientWidth - 24) / W)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); // The self-running demo: three cartridges click home one after another, then every so often one is pulled and pushed back. 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) => setSeated((s) => s.map((x, k) => (k === i ? v : x))); setSeated([false, false, false]); at(320, () => put(0, true)); at(780, () => put(1, true)); at(4300, () => put(2, true)); // the last one waits, so the first still picture shows a cartridge standing proud let n = 0; const cycle = () => { const i = [1, 0, 2][n++ % 3]; put(i, false); at(2400, () => put(i, true)); at(5400, cycle); }; at(7800, cycle); return () => ids.forEach((id) => window.clearTimeout(id)); }, [reduce, auto]); // The booking marker steps along the days while its cartridge is in, so the screen never sits still. useEffect(() => { if (reduce || !seated[0]) return; const id = window.setInterval(() => setDay((d) => (d + 1) % days.length), 1700); return () => window.clearInterval(id); }, [reduce, seated]); const toggle = (i: number) => { setAuto(false); setSeated((s) => s.map((x, k) => (k === i ? !x : x))); setSaid(`${carts[i].name} cartridge ${seated[i] ? "ejected" : "seated"}.`); }; const all = seated.every(Boolean); const setAll = () => { setAuto(false); setSeated([!all, !all, !all]); setSaid(all ? "All cartridges ejected." : "All cartridges seated."); }; const live = seated.filter(Boolean).length; return (

{/* Shadow on the table */} {/* The top face of the console, seen at a glancing angle, with the three slot mouths */} {/* Cartridges. They sit behind the front of the console, so pushing one down hides its label and leaves only the grip showing. */} {carts.map((c, i) => ( toggle(i)} initial={false} animate={{ y: seated[i] ? IN : OUT }} whileHover={reduce ? undefined : { y: seated[i] ? IN - 5 : OUT - 6 }} transition={reduce ? { duration: 0 } : seated[i] ? { type: "spring", stiffness: 520, damping: 24, mass: 0.9 } : { type: "spring", stiffness: 300, damping: 13, mass: 0.8 }} style={{ left: 50 + i * 126, background: `linear-gradient(180deg, ${c.shell[0]} 0%, ${c.shell[1]} 30%, ${c.shell[2]} 100%)`, boxShadow: `inset 0 1.5px 0 rgba(255,255,255,0.55), inset 2px 0 0 rgba(255,255,255,0.16), inset -2px 0 0 rgba(0,0,0,0.18), 0 0 0 1px ${c.edge}, 8px 10px 14px -6px rgba(11,13,18,0.45)` }} className="group absolute top-[34px] h-[170px] w-[108px] cursor-pointer rounded-t-[13px] rounded-b-[4px] outline-none focus-visible:ring-2 focus-visible:ring-[#0B0D12] focus-visible:ring-offset-2 focus-visible:ring-offset-[#F6F4EF]" > {/* moulded grip */} ))} {/* The front of the console */}
{/* slot lamps */} {/* The screen: a black bezel, then glass, then the little site */}

{shopName} {carts.map((c, i) => {c.name})}

Flowers, cut this morning. See the stems

Workshops Hand-tied basics {days.map((d) => ( {d.split(" ")[0]} {d.split(" ")[1]} ))} Book

{products.map((p) => ( {p.name} {p.price} Add ))}

Journal Why tulips keep growing in the vase

{/* reflection on the glass */}

{/* The strip under the screen: speaker holes, an engraved line and one real button */}
Site / {live} of 3 on

{said}

); } 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/website-console-with-feature-cartridges-that-click-into-slots-and-switch-on-sections-of-the-screen.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]