Milestone Arc Timeline lets you showcase a sequence of events or milestones on a horizontal ruler with smooth drag and scroll interactions. Each milestone has a year/label, title above the ruler, and a description that animates in at the center bottom of the component, keeping your story readable even on dense timelines.
Arc‑shaped ruler with dynamic ticks
Center needle for active milestone
Drag, scroll, and autoplay
Animated description block
Fully configurable typography
Layout and density controls
Edge vignette fade
SaaS and product companies
Agencies and studios
Startups and tech brands
Education, courses, and cohorts
Events and conferences
Milestones array: edit year/label, title, and description for each milestone
Tick Height: control maximum tick height at the center
Arc Depth: change how curved the tick arc is (flat to strong curve)
Tick Weight, color, needle color, needle's width, and glow.
Year Color, weight, tracking, and text size etc
Title Size, color, and weight.
Description text size, color, font family, weight etc
Background: component background color
Vignette Color and width
Auto Play: enable or disable autoplay
Speed (s): control autoplay interval in seconds
Loop toggle, drag toggle, and scroll whell toggle
Design by Saqlain
