Docs·Collection Surfer

Collection Surfer

A 3D scroll-driven collection viewer where items surf along a perspective track. Perfect for immersive showcases.

Installation

pnpm dlx shadcn@latest add @componentry/collection-surfer

Usage

API Reference

PropertyTypeDefault
items

Array of items to display. Each item must have id (number), image (string URL), and title (string).

CollectionItem[]—
variant

Visual interaction style. 'magnetic' scales cards on hover, 'uplift' moves cards vertically, 'simple' has no hover effects.

"magnetic" | "uplift" | "simple""magnetic"

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
import { CollectionSurfer, CollectionItem } from "@/components/ui/collection-surfer"
import { CollectionSurfer, CollectionItem } from "@/components/ui/collection-surfer"