Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | DEFAULT_ITEMS | Array of notification items |
sound | boolean | true | Enable detent click on scroll |
CarouselItem Interface
interface CarouselItem {
id: string;
title: string;
body: string;
time: string;
}Features
- 3D Cylinder Rotation: Notifications arranged on a vertical cylinder with perspective projection
- Proximity Brightness: Center item is bright and bold, adjacent items fade with distance
- Scroll & Drag: Vertical drag or scroll wheel to rotate through notifications
- Spring Snap: Snaps to nearest notification with spring physics on release
- Rubber-Band Overscroll: Diminishing drag resistance at list boundaries
- CSS Mask Fading: Edge items fade to transparent via mask-image
- Detent Clicks: Audio tick on each notification crossing
- Counter: Shows current position relative to total
Usage
import { NotificationsCarousel } from "@/components/ruixen/notifications-carousel";
export default function Example() {
return <NotificationsCarousel />;
}