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.

Component

1^pm

2^pm

3^pm

4^pm

5^pm

6^pm

7^pm

8^pm

Install

npx shadcn@latest add @compronents/hour-timeline-slider

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

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.

Customize

imagesasset-url

The five looping slides.

navLeft / navRight / footerLeft / footerRighttext

The chrome copy around the slider.

Dependencies

gsap