Central spine with alternating-side events. Dots light up and a gradient progress line fills as you scroll past each milestone.
A vertical line down the page with events alternating between the left and right sides. Each event has a date, title, description, and a dot on the spine. As the reader scrolls, the dot for the current event becomes active and a colored progress line fills from the top down. Used on company history pages, product changelogs, conference agendas, and personal portfolios.
The container has a ::before pseudo-element 2px wide running the full height, centered horizontally — that's the spine. Each event is a 50%-width block that alternates side via :nth-child(odd/even) rules: odd items are right-aligned with margin-left:0, even items have margin-left:50%. The dot is absolutely-positioned at the inner edge of each block. An IntersectionObserver adds an .in class when each item enters view, lighting up the dot. A second absolutely-positioned line (the progress) has its height updated on scroll to fill from the top.
Scroll inside. Watch the dots activate and the amber line fill from the top.
A short history, one jacket at a time.
The studio opens in a 240 sq ft loft. Batch 01 ships to 12 friends.
FoundedThe first one we couldn't make fast enough. We learn to forecast.
MilestoneA small concept shop in Reykjavík takes 18 jackets on consignment.
DistributionThe team is now five. Average shipping time falls from 6 weeks to 9 days.
TeamSend any jacket back. We strip, re-wax, and return it for $40. 1,400 served in year one.
Service240 numbered pieces. The biggest run we've ever done. Quietly.
LatestBuild a vertical timeline component for a company history page. Container has position:relative, max-width:880px. Add a ::before pseudo-element that's a 2px-wide line running the full height, centered horizontally — that's the spine. Also add an absolutely-positioned "progress" line at the same position with height:0, background:linear-gradient(amber → cyan). Each event is a div, width:50%, with :nth-child(odd) margin-left:0 + text-align:right + padding-right:56px, and :nth-child(even) margin-left:50% + text-align:left + padding-left:56px. Each event has a date (uppercase monospace), title (display serif), description, and tag pill. Each event has an absolutely-positioned circular dot (18px, 2px border) on the inner edge of the block — :nth-child(odd) dot is at right:-10px, :nth-child(even) dot is at left:-10px. Use IntersectionObserver (threshold 0.4) to add an .in class to each item as it enters view — .in dot scales up, gets accent background, glow shadow. On scroll, update the progress line's height to (scrollTop / scrollHeight) * containerHeight. On mobile (under 720px), collapse to a single left-side layout — spine moves to left:18px, all items use padding-left:44px and text-align:left.