||

Cylinder Carousel

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A draggable, looping carousel projected onto a concave or convex cylinder.

cylinder-carousel-demo

Overview

Use Cylinder Carousel for visually browsable items where spatial exploration matters. Pointer drag, wheel input, momentum, and snapping share one continuous position model.

Installation
npx honestui@latest add cylinder-carousel

Usage

 
import { CylinderCarousel } from "@/components/animated/cylinder-carousel"

<CylinderCarousel visibleItems={5} variant="concave">
  {items.map((item) => <Card key={item.id} {...item} />)}
</CylinderCarousel>

Accessibility

Do not use the carousel as the only route to essential content. Give interactive children accessible names and provide an equivalent list or navigation path when exact selection matters.

API Reference
PropTypeDefaultDescription
children*ReactNode–Carousel items.
itemSizenumber200Maximum square item size in pixels.
visibleItemsnumber5Item slots across the stage.
variantconcave|convex"concave"Cylinder projection direction.
minScalenumber0.55Smallest item scale.
snapbooleantrueSettles on the nearest item.
autoRotatebooleanfalseRotates until the user interacts.
onIndexChange(index: number) => void–Runs when the settled item changes.