# Motion Sticky Stack

Feature list on a pricing page, one feature per card.

- id: `motion-sticky-stack`
- Page: https://agentic-ui-kit.com/components/motion-sticky-stack
- Live preview: https://agentic-ui-kit.com/live/component/motion-sticky-stack

## Install

```bash
agentic-ui add motion-sticky-stack
npx shadcn@4.17.0 add @agentic-ui/motion-sticky-stack
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sticky-pinning, scroll-linked-stacking, scale-variant, fade-variant, configurable-offset, hold-before-release, reversible-stacking, focus-brings-card-forward, works-without-js, stack-state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, communicate, explore-detail
- **Suits domains:** saas, devtools, ecommerce, fintech, knowledge
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Feature list on a pricing page, one feature per card, Step-by-step how it works section on a landing page, Case study highlights or release notes told as a stack of cards
- **Avoid when:** App screens, dashboards or forms where content must stay in place, Long lists of more than six or seven cards, where the stack edge gets too thick, Cards that people need to compare side by side
- **Preserve when adapting:** document-order-list, sticky-pinning-without-js, transform-and-opacity-only, focus-brings-card-forward, normal-list-without-motion, work-only-in-view
- **Replace when adapting:** items, offset, scale-step, top, variant, hold
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion