# Motion Text Roll

Navbar links whose label rolls up to a second copy on hover.

- id: `motion-text-roll`
- Page: https://agentic-ui-kit.com/components/motion-text-roll
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-roll?piece=motion-text-roll

## Install

```bash
agentic-ui add motion-text-roll
npx shadcn@4.17.0 add @agentic-ui/motion-text-roll
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hover-letter-roll, stacked-two-line-roll, per-letter-stagger, whole-block-roll, different-hover-text, up-or-down-direction, link-and-button-aware, keyboard-focus-roll, controlled-active, no-layout-shift, accessible-text-once, reduced-motion-fallback
- **Intents:** navigate, execute-flow
- **Suits domains:** marketing, saas, ecommerce, media, devtools
- **Interaction:** hover, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** navbar links whose label rolls up to a second copy on hover, call to action button where the text rolls into a different line on hover, text roll hover effect for menu items and footer links, letter by letter slide up hover animation on a link
- **Avoid when:** Long sentences or paragraphs (the cell cannot wrap in whole mode), Touch-first screens, where there is no hover, Text that rotates through several words on its own (use motion-word-rotate), Controls that already have a strong hover background change and need no extra effect
- **Preserve when adapting:** text-in-dom-once, aria-hidden-stacked-layer, shared-grid-cell, focus-visible-trigger
- **Replace when adapting:** text, hover-text, direction, stagger, duration, element, controlled-active
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **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