# Scroll stack

> Cards that stick and stack as you scroll, earlier ones shrinking into the pile.

Component · Pro · https://lodeui.com/components/scroll-stack

## When to use

- Feature or step stories on landing pages.

## When not to use

- Content people need to compare: they overlap.

## Installation

```bash
npx shadcn@latest add @lode/scroll-stack
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ScrollStack } from "@/components/ui/scroll-stack";

<ScrollStack cards={steps.map((s) => <StepCard key={s.id} step={s} />)} top={80} cardHeight={360} />
```

## API reference

### ScrollStack

Sticky cards that stack; earlier cards scale down and darken.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| cards | `ReactNode[]` | – | Card contents. |
| container | `RefObject<HTMLElement>` | – | Scrollable element; omit for the page. |
| top / cardHeight | `number` | `24 / 320` | Sticky offset and card height. |

## Accessibility

- Cards are normal content in reading order; nothing is hidden from assistive tech.

## Motion

- Scale and dimming are tied to scroll position, so they follow your scroll exactly.

## Responsive behavior

- Works at any width; keep cardHeight under the viewport height.

## Performance

- Transforms driven by one scroll motion value.

## Notes for AI

- Add space after the stack so the last card can settle.

## Related

- [Reveal](https://lodeui.com/components/reveal) — Scroll-triggered fade-and-slide, plus a Stagger for groups.
- [Scroll progress](https://lodeui.com/components/scroll-progress) — A reading progress bar that springs with the page or any scroll container.
- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.