Timeline 11 block design & features
Timeline11 is a horizontal project timeline built with shadcn/ui, displaying four phases in an equal-width grid beneath a bold heading. A full-width shadcn Separator spans the top of the grid, and a Framer Motion animated bar grows from the left to indicate the currently active phase. Each phase shows a nested icon badge, a date, a phase title, and a short description.
The icon badges use a triple-nested border pattern: an outer background circle, a bordered square container, and an inner muted square holding a Lucide icon. These badges sit above the separator line on desktop, anchored by absolute positioning. The animated progress bar is a foreground-colored line that widens on scroll into view, its width calculated from the current phase index.
The aesthetic is structured and milestone-driven, combining the horizontal rule and icon markers with a clear progress signal. The nested icon containers give each phase a polished, layered look without relying on color fills for differentiation.
On mobile the grid stacks vertically with a vertical separator running down the left side and a corresponding vertical animated bar. Icon badges shift to the left edge and text content indents to the right of the vertical line.