# Layer Stack
> Isometric stack of five layers with a list beside it – the chosen entry lifts its layer out in color
A shadcn/ui block from the [@affectui](https://www.affectui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/affectui/layer-stack).
- Page, with a live preview: https://shadcn.exchange/r/affectui/layer-stack
- Screenshot: https://shadcn.exchange/shot/affectui/layer-stack/light.png
- Registry item: https://www.affectui.com/r/layer-stack.json
- Listed: 2026-11-01, source last changed 2026-11-01
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/affectui/layer-stack.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Files
### `illustrations/layer-stack/layer-stack.tsx`
```tsx
"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 */}