MilestoneTimeline

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