MilestoneTimeline

Interactive horizontal timeline with arc

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. Key features: 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 Where can be used: SaaS and product companies Agencies and studios Startups and tech brands Education, courses, and cohorts Events and conferences Timeline Content: 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

Interactive horizontal timeline with arc