Hour Timeline Slider
Click anywhere to wipe in the next slide with a clip-path reveal while an elastic timeline of hours redistributes its flex spacing, compressing the past and stretching the present.
npx shadcn@latest add https://ui.aryank.space/r/hour-timeline-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[] | 5 BLANK-hosted JPGs | Slides wiped in by the clip-path reveal. |
| duration | number | 1.5 | Length of the wipe and timeline redistribution. |
imagesasset-urlThe five looping slides.
navLeft / navRight / footerLeft / footerRighttextThe chrome copy around the slider.
gsap