127+ Primitives
Cylinder Carousel
CardsInteractive 3D cylindrical carousel with real-time radial perspective transforms, inertia pan physics, depth blur, and active card path animations.
3D CylinderPan PhysicsDepth BlurSpring Inertia
Kinetic Physics
120 FPS120Hz
Hooke's Law Springs
Velocity conservation:
Fluid gestures with zero stutter.
Library Catalog
v2.0113+
Kinetic Primitives
Accessible & Copy-Paste
Accessibility
WCAG AAInclusive By Default
Arrow keys & reduced-motion.
Source Ownership
CLI Ready100%
Code in your repo
Zero Bloat
Sub-ms< 0.4ms
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/cylinder-carousel.json"
Props
TypeScript props supported by <CylinderCarousel />.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | CylinderCardItem[] | [] | Array of card objects with titles, badges, backgrounds, and content passed via props. |
| cardWidth | number | 280 | Width of each card on the cylinder in pixels. |
| cardHeight | number | 360 | Height of each card on the cylinder in pixels. |
| gap | number | 70 | Circumferential spacing between neighboring cards in pixels. |
| perspective | number | 1400 | CSS 3D perspective distance in pixels controlling depth curvature. |
| initialIndex | number | 0 | Initial zero-based index of the active card facing front. |
| springStiffness | number | 120 | Spring stiffness coefficient governing rotational snap responsiveness. |
| damping | number | 20 | Spring damping coefficient governing angular oscillation decay. |
| mass | number | 0.9 | Virtual mass factor applied to the carousel inertia simulation. |
| showControls | boolean | true | Whether to render navigation chevrons and pagination dots. |
| showDots | boolean | true | Whether to render the progress dot indicators between chevrons. |
Key Features
- Trigonometric 3D radial arrangement calculating exact cylinder radius from card width and gap.
- Dynamic depth blur, saturation, opacity, and specular sheen based on angular distance from stage center.
- Spring-damped inertia panning with velocity projection and tap-to-advance edge navigation.
- Strictly prop-driven architecture: pass custom cards, content, and gradients directly via props.
Keyboard & Accessibility
- Full keyboard navigation with Left and Right arrow keys to rotate cards.
- Accessible role='group' and aria-roledescription='slide' with descriptive labels on cards.
- Respects prefers-reduced-motion by bypassing spring physics and instantly snapping to the selected card.