Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA changelog or roadmap timeline whose beam fills with a gradient as you scroll, lighting each entry as it is reached, with a sticky date column.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
The beam tracks the page scroll, from when the list's top reaches 65% of the viewport to when its bottom does. It works inside any page that scrolls the window.
| Prop | Type | Default | Description |
|---|---|---|---|
items | ScrollTimelineItem[] | - | The entries, top to bottom. |
headingLevel | 2 | 3 | 4 | 3 | Heading level for each entry title. |
className | string | - | Classes for the root. |
Also accepts all div props.
| Field | Type | Description |
|---|---|---|
id | string | Stable key. Defaults to the index. |
date | ReactNode | Date or version label. |
dateTime | string | Machine-readable date; wraps date in a time element. |
title | ReactNode | Entry heading. |
description | ReactNode | Supporting text. |
tags | string[] | Small labels such as "New" or "Fix". |
content | ReactNode | Extra content under the description. |
ol) with real headings at the level you choose, so the timeline shows up in a screen reader's heading list. Dates use time when you pass dateTime.aria-hidden; reaching an entry changes only its visual state.prefers-reduced-motion: reduce the beam is fully drawn, the head is hidden and every marker is lit, so nothing moves as you scroll.