Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { InfiniteDragSlider } from "@/registry/tween/infinite-drag-slider"
export function InfiniteDragSliderDemo() {
return <InfiniteDragSlider />
}
import { InfiniteDragSlider } from "@/components/ui/infinite-drag-slider"<InfiniteDragSlider
slides={[
{ img: "/one.jpg", title: "Northern Drift" },
{ img: "/two.jpg", title: "Coastal Haze" },
// ...
]}
/>The track repeats your slides sequence copies times and wraps seamlessly,
so the slider never reaches an edge. Drag with the pointer or scroll the
wheel to move it; the position eases toward its target via lerpFactor,
giving the motion a weighted, inertial feel that decays after a flick. Each
slide image is scaled by parallaxScale and shifted by parallaxAmount
relative to its distance from center, so images drift subtly as they pass
through the viewport. The component drops to mobileSlideWidth and
mobileSlideHeight below a 1000px container so it stays readable on small
screens. Provide your own slides array with { img, title } entries to
populate the carousel with real content.
| Prop | Type | Default | Description |
|---|---|---|---|
slides | InfiniteDragSlide[] | 8 defaults | Each entry is { img, title, alt? }. |
scrollSpeed | number | 1.75 | Multiplier on wheel deltaY → targetX. |
lerpFactor | number | 0.05 | Linear interpolation factor between current and target X. |
maxVelocity | number | 150 | Cap on per-event wheel delta (px). |
slideWidth | number | 390 | Desktop slide width (px). |
slideHeight | number | 560 | Desktop slide height (px). |
mobileSlideWidth | number | 215 | Slide width below 1000px container width. |
mobileSlideHeight | number | 300 | Slide height below 1000px container width. |
parallaxScale | number | 2.25 | Constant scale applied to slide images. |
parallaxAmount | number | -0.25 | Multiplier on distanceFromCenter for the parallax offset. |
copies | number | 6 | Number of times the slide sequence is repeated in the track. |
className | string | — | Extra classes on the outer container. |