Cylinder Carousel

Items rolling around a cylinder: inside it, the centre item smallest and dipped, like logo discs in a valley; or outside it, the centre item largest and raised, like screens on a drum. Drag, swipe or use the arrow keys; it can roll on its own and pauses under the pointer.

Loading preview…

Install

Steps for Next.js.

1
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-components
2
Load the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";
3
Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";

Props

Name	Type	Default	Description
children	ReactNode	—	The items, one child each.
variant	"concave" \| "convex"	"concave"	Inside the cylinder, centre smallest; or outside it, centre largest.
itemSize	number	—	The largest an item gets, in pixels. Items shrink in narrow containers.
visibleItems	number	—	How many item slots span the width.
minScale	number	—	The smallest item's scale; the biggest reaches 1.
arc	number	—	Curve depth in pixels. 0 is a flat line.
dragSpeed	number	—	Items rolled per item-width dragged.
snap	boolean	—	Snaps to the nearest item when the roll settles.
autoRotate	boolean	—	Rolls on its own until interacted with.
autoRotateSpeed	number	—	Items per second.
defaultIndex	number	—	The item at the centre at first.
onIndexChange	(index: number) => void	—	Called when another item reaches the centre.
height	number	—	Stage height in pixels; or use heightRatio, a multiple of the fitted item size.
aria-label	string	—	The carousel's accessible name.
className	string	—	Classes for the root element.

Cylinder Carousel

Loading preview…

Install

Steps for Next.js.

1
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-components
2
Load the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";
3
Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";

Props

Name	Type	Default	Description
children	ReactNode	—	The items, one child each.
variant	"concave" \| "convex"	"concave"	Inside the cylinder, centre smallest; or outside it, centre largest.
itemSize	number	—	The largest an item gets, in pixels. Items shrink in narrow containers.
visibleItems	number	—	How many item slots span the width.
minScale	number	—	The smallest item's scale; the biggest reaches 1.
arc	number	—	Curve depth in pixels. 0 is a flat line.
dragSpeed	number	—	Items rolled per item-width dragged.
snap	boolean	—	Snaps to the nearest item when the roll settles.
autoRotate	boolean	—	Rolls on its own until interacted with.
autoRotateSpeed	number	—	Items per second.
defaultIndex	number	—	The item at the centre at first.
onIndexChange	(index: number) => void	—	Called when another item reaches the centre.
height	number	—	Stage height in pixels; or use heightRatio, a multiple of the fitted item size.
aria-label	string	—	The carousel's accessible name.
className	string	—	Classes for the root element.

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props