Message Scroller animation
Keeps its own scroll motion; new messages arrive through ListCut, and the jump button dips and nudges.
with <Cuts />
- Write the release notes
- Review the onboarding flow
- Reply to Priya
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 |
| Its jump button | Dips and nudges toward the end | 150 ms | Automatic |
Install
Message Scroller is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add message-scrollerInstall ListCut and wrap the part that changes: npx shadcn add @keyframery/list-cut.
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.