Cover Flow

3D Cover Flow effect for showcasing items.

This was built on top of the Coverflow component.

Install

npx shadcn add https://ashishgogula.in/r/coverflow.json

Name	Type	Default	Description
items	CoverFlowItem[]	—	Array of items to render in the coverflow.
itemWidth	number	400	Width of each card in pixels.
itemHeight	number	400	Height of each card in pixels.
stackSpacing	number	100	Horizontal spacing between off-center stacked cards.
centerGap	number	250	Horizontal offset distance from center to side stacks.
rotation	number	50	Y-axis rotation angle applied to side cards.
initialIndex	number	0	Initially focused item index.
enableReflection	boolean	false	Shows mirrored reflection under each card.
enableClickToSnap	boolean	true	Clicking side cards snaps them to center.
enableScroll	boolean	true	Enables horizontal wheel navigation.
scrollThreshold	number	100	Wheel delta threshold before changing item.
className	string	undefined	Additional classes for the root container.
onItemClick	(item: CoverFlowItem, index: number) => void	undefined	Called when the active centered item is clicked.
onIndexChange	(index: number) => void	undefined	Called whenever active index changes.