Timeline playground

Component · change a prop and it updates.

Step one
Scaffold the component
One command writes the four files and edits the three registries that have to know about it.
Step two
Write the animation
Motion lives in the same file as the markup, so there is one place to change how it feels.
Step three
Fill in the props table
The table is the source of truth: the playground controls are derived from it, not written twice.
Step four
Open the pull request
The suite checks the reduced-motion guard, the title budget and a pixel baseline before it merges.

Timeline: your configuration

<Timeline
  items={milestones}
  container={scrollArea}
/>

Component · change a prop and it updates.

Step one
Scaffold the component
One command writes the four files and edits the three registries that have to know about it.
Step two
Write the animation
Motion lives in the same file as the markup, so there is one place to change how it feels.
Step three
Fill in the props table
The table is the source of truth: the playground controls are derived from it, not written twice.
Step four
Open the pull request
The suite checks the reduced-motion guard, the title budget and a pixel baseline before it merges.

Timeline: your configuration

<Timeline
  items={milestones}
  container={scrollArea}
/>