Duck Timeline
A vertical spine that draws itself on scroll, with a node per entry that lights on hover.
DisplayClient componentmotion
Preview
- 2026 — 04Noir shipsA second theme proves the tokens reach the components.
- 2026 — 02Media layerSliders, volume, media cards. Thirty runtime dependencies retired.
- 2025 — 11The pond opensTheme, buttons, cards, and a registry the CLI can read.
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-timelinePulls in @duck/theme, @duck/hud-label. Already installed items are skipped.
Usage
import { DuckTimeline, DuckTimelineItem } from "@/components/ui/duck-timeline"The file lands in components/ui/duck-timeline.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| when | React.ReactNode | - | On an item: the date, version or milestone it is pinned to. |
| title | React.ReactNode | - | On an item: the headline. |
| active | boolean | false | On an item: keep the node lit. For the current entry. |
Rules
What keeps this component from turning into noise.
- Progress is measured across the list rather than the window, so the line completes at the last node instead of a screen later.
- Under reduced motion the lime line is drawn in full. A spine that never fills reads as a broken component.
- The spine is decorative — the list element already carries the order.