A 3D scroll-driven collection viewer where items surf along a perspective track. Perfect for immersive showcases.
| Prop | Type | Default |
|---|---|---|
itemsArray of items to display. Each item must have id (number), image (string URL), and title (string). | CollectionItem[] | — |
variantVisual interaction style. 'magnetic' scales cards on hover, 'uplift' moves cards vertically, 'simple' has no hover effects. | "magnetic" | "uplift" | "simple" | "magnetic" |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { CollectionSurfer, CollectionItem } from "@/components/ui/collection-surfer"