Timeline 10 block design & features
Timeline10 is a four-phase project timeline built with shadcn/ui. A Timeline heading sits above the track. On desktop, four columns sit on a horizontal separator, each with a double-ring marker, a muted date, a Phase title, and a short description. Sample phases run from January through September 2024. An animated foreground line fills from the left through the current phase, Phase III in the sample. On small screens the same entries stack with a vertical line on the left.
Markers are small double rings (dark outer, light inner) sitting on the hairline. Dates and descriptions are small and muted. Titles are tighter and bolder. The progress line animates in when the section enters view. Density is even across the four columns, with modest gaps. The heading is left-aligned and compact above the track.
This is a classic project-phase or roadmap timeline: dated stages on a single axis, with progress called out. The fill animation is the distinctive touch. Complexity is low to moderate and mixed: four dates, titles, and descriptions, plus a current stage that drives how far the line fills. You would need real milestone dates and copy, and a current stage to highlight.
On desktop the track is horizontal. On smaller screens it becomes a left-aligned vertical list, and the progress fill grows down the side instead of across.