4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T306b,"use client"; import { useEffect, useId, useRef, useState, type ReactNode } from "react"; /* * Layer Stack – an interactive card illustration, in a single self-contained file. * An isometric stack of five layers next to a list of five entries. The chosen entry lifts its layer * out of the stack in blue, with a soft glow underneath; the others settle back to glassy gray. * It steps through the entries on its own and pauses while you hover; click or focus an entry to pick it. * The artwork is laid out on a 600 × 400 grid inside a 3 : 2 frame and scales with its container. */ export type LayerStackItem = { /** Main line of the entry */ title: string; /** Short muted hint on the right */ hint?: string; /** Icon drawn onto the layer: one of the built-in names */ icon?: LayerIcon; }; export type LayerIcon = "bolt" | "database" | "plug" | "spark" | "pulse"; export type LayerStackProps = { /** Up to five entries, top layer first */ items?: LayerStackItem[]; /** Entry to start on */ defaultIndex?: number; /** Time per entry while it plays on its own, in ms */ interval?: number; /** Called when an entry is picked by the user */ onChange?: (index: number) => void; className?: string; }; const defaultItems: LayerStackItem[] = [ { title: "Triggered by events", hint: "Webhooks", icon: "bolt" }, { title: "Grounded in your data", hint: "Context", icon: "database" }, { title: "Connected to your apps", hint: "APIs", icon: "plug" }, { title: "Works with any model", hint: "Routing", icon: "spark" }, { title: "Traced at every step", hint: "Logs", icon: "pulse" }, ]; /* Layer geometry on the 600 × 400 grid */ const SIZE = 104; // side of a layer before the isometric projection (rhombus 208 × 104) const STEP = 26; // vertical distance between resting layers const GAP = 34; // the chosen layer lifts off the ones below it const ABOVE = 24; // and the layers above it lift a little further, so it shows const THICK = 9; // layer thickness const CX = 168; // stack centre const TOP = 109; // y of the top layer's back corner when nothing is lifted export function LayerStack({ items = defaultItems, defaultIndex = 0, interval = 2600, onChange, className }: LayerStackProps) { const id = "ui-lyr" + useId().replace(/[^a-zA-Z0-9_-]/g, ""); const list = items.slice(0, 5); const [active, setActive] = useState(Math.min(defaultIndex, list.length - 1)); const [paused, setPaused] = useState(false); const touched = useRef(false); // Step through the entries on its own until someone interacts; never with reduced motion useEffect(() => { if (paused || touched.current || list.length < 2) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const timer = window.setInterval(() => setActive((i) => (i + 1) % list.length), interval); return () => window.clearInterval(timer); }, [paused, interval, list.length]); const pick = (i: number) => { touched.current = true; setActive(i); onChange?.(i); }; // Resting y of each layer: gaps open below and above the chosen one. The bottom layer has nothing // below it, so when it's chosen it stays put and only the layers above it rise const last = list.length - 1; const yOf = (i: number) => TOP + i * STEP - (i < active ? GAP + ABOVE : i === active && active < last ? GAP : 0); return (

setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)} > {/* React 19 hoists this into once, no matter how many instances render */}

{list.map((item, i) => ( ))}

); } /* ---------- Icons, drawn on a 24 grid and laid onto the layer ---------- */ const icons: Record = { bolt: , database: ( <> ), plug: , spark: , pulse: , }; /* ---------- Styles ---------- */ const css = /* css */ ` .ui-lyr { /* 1 unit of the 600 × 400 layout grid */ --u: calc(100cqw / 600); --ui-lyr-row: calc(52 * var(--u)); /* The accent blue used across the library */ --ui-lyr-accent: #2f6bff; --ui-lyr-accent-deep: #2557d9; --ui-lyr-tint: #e9f0ff; --ui-lyr-glow: rgba(47, 107, 255, 0.28); --ui-lyr-face: rgba(255, 255, 255, 0.6); --ui-lyr-edge: rgba(10, 10, 10, 0.11); --ui-lyr-side: #ececef; --ui-lyr-face-above: rgba(255, 255, 255, 0.3); --ui-lyr-side-above: rgba(236, 236, 239, 0.55); --ui-lyr-panel: #f5f5f5; --ui-lyr-pill: #ffffff; --ui-lyr-pill-ring: #e5e5e5; --ui-lyr-text: #171717; --ui-lyr-muted: #8f8f8f; --ui-lyr-ease: cubic-bezier(0.65, 0, 0.25, 1); position: relative; width: 100%; aspect-ratio: 3 / 2; container-type: inline-size; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } .ui-lyr *, .ui-lyr *::before, .ui-lyr *::after { box-sizing: border-box; } /* ---------- Stack ---------- */ .ui-lyr-stack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ui-lyr-layer { transition: transform 560ms var(--ui-lyr-ease); } .ui-lyr-glow { fill: var(--ui-lyr-glow); opacity: 0; transition: opacity 420ms ease; } .ui-lyr-layer[data-active] .ui-lyr-glow { opacity: 1; } .ui-lyr-side-on { fill: var(--ui-lyr-accent-deep); opacity: 0; transition: opacity 360ms ease; } .ui-lyr-side { fill: var(--ui-lyr-side); stroke: var(--ui-lyr-edge); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 360ms ease, stroke 360ms ease; } .ui-lyr-face { fill: var(--ui-lyr-face); stroke: var(--ui-lyr-edge); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 360ms ease, stroke 360ms ease; } .ui-lyr-face-on { fill: var(--ui-lyr-tint); stroke: var(--ui-lyr-accent); opacity: 0; stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: opacity 360ms ease; } .ui-lyr-icon { fill: none; stroke: var(--ui-lyr-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 300ms ease; } /* Layers above the chosen one turn more glassy, so its color shows through */ .ui-lyr-layer[data-above] .ui-lyr-face { fill: var(--ui-lyr-face-above); } .ui-lyr-layer[data-above] .ui-lyr-side { fill: var(--ui-lyr-side-above); } .ui-lyr-layer[data-active] .ui-lyr-side-on { opacity: 1; } .ui-lyr-layer[data-active] .ui-lyr-face-on { opacity: 1; } .ui-lyr-layer[data-active] .ui-lyr-icon { opacity: 1; transition-delay: 120ms; } /* ---------- Menu ---------- */ .ui-lyr-menu { position: absolute; left: calc(326 * var(--u)); top: 50%; width: calc(248 * var(--u)); padding: calc(8 * var(--u)); transform: translateY(-50%); border-radius: calc(18 * var(--u)); background: var(--ui-lyr-panel); } /* White card that glides behind the chosen row */ .ui-lyr-pill { position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(8 * var(--u)); height: var(--ui-lyr-row); border-radius: calc(12 * var(--u)); background: var(--ui-lyr-pill); box-shadow: 0 0 0 1px var(--ui-lyr-pill-ring), 0 1px 2px rgba(0, 0, 0, 0.05); transition: transform 460ms var(--ui-lyr-ease); } .ui-lyr-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); width: 100%; height: var(--ui-lyr-row); margin: 0; padding: 0 calc(14 * var(--u)); border: 0; border-radius: calc(12 * var(--u)); background: transparent; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ui-lyr-row:focus-visible { outline: 2px solid var(--ui-lyr-accent); outline-offset: -2px; } .ui-lyr-title { min-width: 0; overflow: hidden; font-size: calc(14 * var(--u)); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-lyr-text); transition: color 300ms ease; } .ui-lyr-hint { flex: none; font-size: calc(12 * var(--u)); line-height: 1.3; color: var(--ui-lyr-muted); } .ui-lyr-row[aria-selected="true"] .ui-lyr-title { color: var(--ui-lyr-accent); } @media (prefers-reduced-motion: reduce) { .ui-lyr-layer, .ui-lyr-glow, .ui-lyr-pill { transition: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-lyr { --ui-lyr-accent: #6b95ff; --ui-lyr-accent-deep: #2f6bff; --ui-lyr-tint: #1f2c4d; --ui-lyr-glow: rgba(47, 107, 255, 0.3); --ui-lyr-face: rgba(255, 255, 255, 0.04); --ui-lyr-edge: rgba(255, 255, 255, 0.13); --ui-lyr-side: #26262a; --ui-lyr-face-above: rgba(255, 255, 255, 0.025); --ui-lyr-side-above: rgba(38, 38, 42, 0.5); --ui-lyr-panel: #161618; --ui-lyr-pill: #232326; --ui-lyr-pill-ring: rgba(255, 255, 255, 0.08); --ui-lyr-text: #ededed; --ui-lyr-muted: #8f8f8f; } `; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"illustrations/layer-stack/layer-stack.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]