Ascent Carousel
A high-performance, exponential 3D-perspective carousel. Items mathematically scale down as they retreat to the right, creating a profound sense of spatial depth using strictly 2D DOM manipulation for maximum FPS.
Last Modified:Aug 17, 2026
Install
CLI
ascent-carousel
Or install a specific demo variant:
ascent-carousel-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AscentCarouselItem[] | Required | Array of image objects to display. Automatically duplicated to ensure an infinite loop. |
visibleItems | number | 6 | Mobile-first default for visible items. |
maxHeight | number | 600 | Mobile-first default for the foreground item's max height in pixels. |
minHeight | number | 150 | Mobile-first default for the background items' min height in pixels. |
breakpoints | Record<number, CarouselBreakpoint> | undefined | Tailwind-style min-width breakpoints for responsive sizing. e.g., { 640: { visibleItems: 8 } } |
autoMove | boolean | false | Whether the carousel should move automatically. |
autoMoveType | "continuous" | "step" | "continuous" | The type of auto-movement. |
autoMoveSpeed | number | 0.01 | The velocity of the continuous auto-scroll. |
stepInterval | number | 3000 | The delay (in ms) between steps if autoMoveType is "step". |
stepDuration | number | 1 | The duration (in seconds) of the snapping animation. |
scrollMultiplier | number | 0.005 | How aggressively the carousel responds to drag velocity. |
friction | number | 0.95 | The physics friction applied to drag momentum. |