OPUS/UI

Navigation

Animated List

Notification-feed choreography: items drop in from the top with a springy settle while older ones recede.

choreography2 files · 66 locdeps: clsx, tailwind-merge
💸

Payment received · now

$1,240 from Northwind

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/animated-list.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs animated-list

Usage

import { AnimatedList } from "@/components/opus/effects/animated-list";

<AnimatedList interval={1500}>{notifications}</AnimatedList>

API

PropTypeDefaultDescription
intervalnumber1400ms between items.
loopbooleantrueRestart after the last item.
maxnumber5Items visible at once.

Command palette