Timeline 21 block design & features
Timeline21 is a fullscreen timeline carousel built with shadcn/ui. It holds four chapters. One photograph fills the frame at a time, with a year, a title, a short paragraph, and an index such as 01 / 04. A short section label sits in the top corner. Previous and next buttons move one chapter to the left or right, and the track also snaps when dragged or swiped. Sample chapters move from an empty meeting room in 2019, to a building with the lights on, to a studio in the trees, to a larger desert building in 2025.
Photographs cover the frame and show rooms and buildings rather than portraits. A foreground-colored gradient darkens toward the bottom so the type stays readable, and the copy uses the inverse foreground color. A thin bar runs along the bottom of the frame. The type is title-led, with the year and index kept small. The only motion is the slide between chapters.
This is a photographic take on a four-phase timeline: each chapter is one full-bleed picture, and you step through them in order. Complexity is moderate and mixed. You need four photographs of places, four years, and a sentence or two for each chapter.
The same one-at-a-time layout is used at every width. The label, chapter copy, and buttons sit inside the container, while the photographs still cover the frame. The buttons stay at the vertical middle.