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 @compronents/detroit-paris-sliderInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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.