Stepwise UI

Arc Carousel

A continuously drifting strip of photographs riding a shallow arc. Every card follows one shared path, offset per card so the set spreads evenly along the curve - no per-frame work, and the strip lands in the right place on the first paint. Hovering halts it.

Installation

npx stepwise-ui add arc-carousel

Default

Cards tilt tangentially to the curve, so the ends of the strip lean away from the middle.
import { ArcCarousel } from '@/components/stepwise/arc-carousel'

<ArcCarousel items={photos} />

Props

PropTypeDescription
items
ArcCarouselItem[]
Images to loop. { src, alt? }.
arc
number
Degrees of arc swept across the visible width - sets both the bow and the card tilt, which on a real curve are the same thing. 0 is flat. Default 30.
duration
number
Seconds for one full pass. Default 38.
itemWidth
number
Card width in px. Default 128.
ratio
number
Card height ÷ width. Default 1.3.
gap
number
Space between cards, px. Default 10.
radius
number
Card corner radius. Default 18.
reverse
boolean
Travel left-to-right instead.
pauseOnHover
boolean
Halt travel while hovered. Default true.
className
string
Merged onto the root.