Animated List
Looping feed that springs each item in, newest on top.
- 1.1 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Deploy succeeded
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-list.jsonAdds components/velora/animated-list.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
delayms between items appearing | number | 2000 |
Accessibility
- Reduced motion
- The loop stops and all items are shown at once, newest on top, with no spring, scale or layout animation.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Without reduced motion items are added on a timer, so a screen reader finds only the items revealed so far; the loop pauses while the list is hovered or has focus.