Timeline 20 block design & features
Timeline20 is a shadcn/ui vertical timeline block that presents four project phases in a stacked column, each marked by a Lucide icon inside a nested square frame on the left track. A left-aligned heading introduces the section, and every phase row carries a date, bold title, and short description aligned to the right of its icon marker.
Styling stays light and structured, with a vertical separator as the spine and an animated foreground line that fills proportionally to show how far along the timeline has progressed. Icon containers use subtle bordered frames on a muted inner surface, giving each phase a distinct visual anchor without wrapping the whole block in a card border. Motion animates the progress fill on scroll into view.
The result is a moderate-complexity vertical timeline that pairs iconography with phase copy for quick scanning. It mirrors the horizontal icon timeline pattern but commits to a single-column layout at all screen sizes, making it useful when horizontal space is limited or a scrolling narrative fits better than a wide grid.