Animated List

Looping feed that springs each item in, newest on top.

Deploy succeeded

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-list.json

Adds components/velora/animated-list.tsx, installs motion.

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`delay` ms between items appearing	`number`	`2000`

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.

Looping feed that springs each item in, newest on top.

Deploy succeeded

pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-list.json

Adds components/velora/animated-list.tsx, installs motion.

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`delay` ms between items appearing	`number`	`2000`

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.