# Message Scroller animation (/docs/components/message-scroller)



{/* Generated from lib/coverage.json by scripts/gen-components.mjs. Edit the data, then run the script. */}


## What moves [#what-moves]

| When                    | What you see                   | Timing     | How                               |
| ----------------------- | ------------------------------ | ---------- | --------------------------------- |
| Scrolls to new messages | Its own scroll motion          | its own    | Its own motion                    |
| A message arrives       | Through ListCut                | 260–380 ms | [ListCut](/docs/helpers/list-cut) |
| Its jump button         | Dips and nudges toward the end | 150 ms     | Automatic                         |

## Install [#install]

Message Scroller is shadcn's own component. With `<Cuts />` in your root layout ([Quick start](/docs/installation)), there's nothing else to add:

```bash
npx shadcn add message-scroller
```

Install [ListCut](/docs/helpers/list-cut) and wrap the part that changes: `npx shadcn add @keyframery/list-cut`.

## Turn it off [#turn-it-off]

Put `data-cut="none"` on a message scroller (or anything around it) to keep shadcn's own motion there. `<Cuts responses="none" />` turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.