Timeline 22 block design & features
Timeline22 is a four-milestone company timeline built with shadcn/ui. A heading and a short intro sit above a row of chapters. Each chapter is a small square photograph, a year, a title, and one sentence. Sample chapters move from a borrowed meeting room in 2019, to a building with the lights on, to a studio in the trees, to a larger desert building in 2025.
The photographs are the nodes, left aligned above each date, with a soft shadow. Between them, a dashed segment sits at the vertical middle of the squares and stops short of each frame. The same dashes continue out to both edges of the section. The type underneath is compact: the year is small and muted, the title is a medium heading, and the description stays to a sentence. When the section enters view, each chapter fades up in order and the dashes draw in after it.
This is a startup-journey timeline for an about page: dated places, shown small enough that all four stay in view together. Complexity is low and mixed. You need four photographs of rooms or buildings, four years, and a sentence for each chapter.
On wide screens the track runs left to right and the dashes reach the edges of the screen. On small screens the same chapters stack, the squares stay the same size, and a dashed segment drops from one photo to the next.