Wave Carousel
A high-performance, sine-wave driven infinite carousel. Items mathematically scale up and down based on a cosine wave, creating a rolling hills visual effect using strictly 2D DOM manipulation for maximum FPS.
Last Modified:Aug 17, 2026
Install
CLI
wave-carousel
Or install a specific demo variant:
wave-carousel-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | WaveCarouselItem[] | Required | Array of image objects to display. Automatically duplicated to ensure an infinite loop. |
visibleItems | number | 9 | Mobile-first default for visible items. |
waves | number | 2 | How many repeating "hills" (sine waves) are visible across the screen at once. |
maxHeight | number | 400 | Mobile-first default for the peak item's max height in pixels. |
minHeight | number | 150 | Mobile-first default for the valley items' min height in pixels. |
breakpoints | Record<number, CarouselBreakpoint> | undefined | Tailwind-style min-width breakpoints for responsive sizing. e.g., { 640: { visibleItems: 5 } } |
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. |