ns-ui
Changelog timeline drawn as a beach strand: each release arrives as a foam crest sweeping an arc in from the now edge, breaks at its chronological position, pops a marker in with a spring, and recedes leaving an etched tide-ring — later waves wash past older marks so ring density reads as event history.
Use when a changelog or release history presented as an ambient scroll-story where accumulation is the point, later waves washing past older marks so ring density reads as event history; pick timeline-agent-lanes instead when the events are live and concurrent rather than a settled record, or timeline-reasoning-rail when entries stream in and need to fold as they complete.
Install
npx shadcn add https://design.helpmarq.comns-ui / timeline-changelog-wave
6 RELEASES · 1 MAJOR
The year as a rising tide — every release breaks further up the strand, and older marks collect tide-rings with each wash.
SCRUB WITH THE ARROWS — EACH STEP LAUNCHES THE NEXT WAVE
HOVER A MARK TO REPLAY ITS SWASH
ring density is history — the oldest release, nearest the water, has been washed the most
| Prop | Type | Default | Description |
|---|---|---|---|
| events? | StrandlineEvent[] | DEFAULT_EVENTS | chronological events, oldest first — oldest breaks nearest the now edge |
| autoplay? | number | 3 | waves auto-launched on mount (0 disables the intro tide) |
| className? | string | "h-80" | — |
| aria-label? | string | "Release timeline strand" | — |