# Motion Feature Highlight Seq

Landing page feature section that walks through dashboards, funnels, alerts and reports with a product screen per feature.

- id: `motion-feature-highlight-seq`
- Page: https://agentic-ui-kit.com/components/motion-feature-highlight-seq
- Live preview: https://agentic-ui-kit.com/live/component/motion-feature-highlight-seq

## Install

```bash
agentic-ui add motion-feature-highlight-seq
npx shadcn@4.17.0 add @agentic-ui/motion-feature-highlight-seq
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** auto-advancing-tabs, per-tab-progress-bar, synced-media-panel, pause-on-hover-focus-offscreen, pause-play-control, manual-takeover, horizontal-and-vertical-variants, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, analytics, ai-workspace, devtools, ecommerce
- **Interaction:** click, hover, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing page feature section that walks through dashboards, funnels, alerts and reports with a product screen per feature, Onboarding overview in a SaaS app that cycles through what is new until the user picks a topic, Product page highlights for a developer tool with a code or UI preview per capability
- **Avoid when:** The content is a form or a step the user must complete (use a stepper), Panels hold information users compare side by side (use a comparison table or a grid), Enterprise, billing or regulated screens where content must not change on its own (use plain tabs)
- **Preserve when adapting:** tabs-pattern, pause-play-control, pause-on-hover-focus-offscreen, plain-tabs-when-motion-is-off
- **Replace when adapting:** features, media, strings, interval, orientation
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** tabs, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion