# Motion Horizontal Scroll Section

Product roadmap timeline on a marketing page.

- id: `motion-horizontal-scroll-section`
- Page: https://agentic-ui-kit.com/components/motion-horizontal-scroll-section
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-horizontal-scroll-section?piece=motion-horizontal-scroll-section

## Install

```bash
agentic-ui add motion-horizontal-scroll-section
npx shadcn@4.17.0 add @agentic-ui/motion-horizontal-scroll-section
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pinned-section, scroll-linked-horizontal-track, cards-variant, timeline-variant, progress-bar, configurable-gap, speed-control, focus-brings-item-into-view, native-scroll-snap-fallback, works-without-js, state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, communicate, explore-detail
- **Suits domains:** saas, devtools, ecommerce, media, knowledge
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product roadmap timeline on a marketing page, Recently shipped features or case studies shown as a row of cards, Company history or release timeline on an about page
- **Avoid when:** App screens, dashboards or forms where content must stay in place, Content people must compare side by side or scan quickly, Fewer items than fit in one screen width, where there is nothing to scroll
- **Preserve when adapting:** document-order-list, focus-brings-item-into-view, no-focus-trap, native-scroll-snap-without-motion, transform-and-opacity-only, work-only-in-view
- **Replace when adapting:** items, heading, gap, top, variant, item-width
- **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