shadcn.io is not affiliated with official shadcn/ui
Animated Timeline Team Block for Svelte
The order nine people joined a bakery-supply portal, as a vertical rail with each hire's initials as its node, drawn once from the top, beside a header that stays in view.
Installation
Overview
A hiring-order timeline for Svelte with Ark UI, written for Brackenby Mills, a fictional bakery-supply portal. A split on a solid divider: at the start a header ("Brackenby Mills, hire by hire") that stays in view while you read on a wide screen; at the end a rail of nine hires in the order they joined, each node being the hire's own initials sitting on the line. A hire is an employee number ("No. 10"), a relative time ("Year 1", never a calendar date), what made them first ("The tenth person"), their name and role, and one line on why they came. The rail draws once from the top when the block loads, with a CSS transition, and fades out under the last node. On a phone the header sits above the rail, the first five hires show, and a "Show all 9" button opens the rest. It's built from Avatar, Button and Guides, with your theme's tokens. The people are fictional and the numbers are example data.
FAQ
How do I change the hires?
Edit HIRES at the top of the file: a name, a role, the employee number, a title ("The first engineer"), a relative time and one line on why they came. Keep them in the order they joined. The header counts them and reads the last number ("9 of our first 125 people"), and the phone's "Show all 9" counts them too.
How is the rail drawn?
The line is one decorative element behind the avatars, drawn from the top by a CSS transition once when the block loads and masked so it fades under the last node. Each avatar carries a ring in the page colour that cuts the line around it. With reduced motion the line is simply there.
How does the Show all button work?
Below sm the first five hires show. The button says "Show all 9", states whether the list is expanded and which list it controls, and keeps the same label either way. The hidden hires are still in the page; pressing it shows them.
Does the header really stay in view?
From lg the header is sticky beside the rail, a little below the top of the window, so the title stays visible as you read down the hires. On a phone it simply sits above the rail.