Timeline 4 block design & features
Timeline4 is a vertical alternating timeline built with shadcn/ui, enclosed in a bordered container section. A header area contains an outline badge with a rocket icon, a large heading, and a muted description. Below, four steps alternate between text-left/image-right and text-right/image-left layouts, connected by a central vertical line with a Framer Motion scroll-progress bar that fills as the user scrolls.
Each step places a nested icon badge at the center axis: a bordered card holding a muted inner square with a Lucide icon. On either side, one column holds the step title and description while the opposite column wraps an image in a diagonal hatch-pattern border made from dashed outlines filled with a small repeating SVG stripe. The entire section uses container border-x rules on both sides and border-y rules at top and bottom, reinforcing the boxy engineering-document feel.
The visual language is technical and grid-heavy, combining dashed borders, diagonal fill patterns, and the scroll-tracking progress line. The outer borders and header badge with its shadow further emphasize a structured, documentation-inspired style.
On mobile the alternating layout collapses to a single column with all text and images stacked sequentially. The vertical progress line shifts to the left edge and icon badges align along it.