Detroit Paris Slider
An infinite image stream whose slides grow along an exponential baseline. Wheel, drag, and idle motion push one scroll target while each poster wraps through the track and swaps images as it re-enters.
npx shadcn@latest add https://ui.aryank.space/r/detroit-paris-slider.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 10 Compronents-hosted JPGs | Poster images wrapped through the stream. |
| title | string | "Perpetual Motion" | Display title placed over the slider. |
| lerp / scrollSpeed | number | 0.075 / 3.5 | Smoothing and input sensitivity. |
| minSize / growth / aspect | number | 0.1 / 0.25 / 0.8 | The math that determines slide sizes along the track. |
| autoplay / autoplaySpeed | boolean / number | true / 0.004 | Idle motion so the stream moves before user input. |
imagesasset-urlTen poster images hosted through https://ui.aryank.space/assets/detroit-paris-slider/slide-img-1.jpg and the numbered set.
titletextLarge header over the stream.
growth / scrollSpeedtextExponential spacing strength and pointer/wheel sensitivity.
None.