Rank Race

A bar chart race: rows re-rank with spring layout animation as the years play, with a scrubbable timeline.

Market Share Race

2016

1Drift

73.0

2Quark

66.7

3Ember

63.6

4Halo

60.2

5Nova

48.8

6Vertex

48.8

7Lumen

43.6

8Pulse

39.0

9Orbit

37.9

10Atlas

33.8

6 options

Accent Color

Rows

Years

Step Interval

1400

Auto Play

Animation Speed

100

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add rank-race

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

PropertyTypeDefaultDescription

theme'dark' | 'light''dark'Colour scheme of the card.

compactbooleanfalseShrinks the card to a smaller fixed height.

colorstring (hex)'#ff8a3d'Leader and bar color.

rowsnumber5Number of ranked rows.

yearsnumber10Length of the timeline.

intervalnumber1400Milliseconds per year.

autoPlaybooleantrueStart playing automatically.

speednumber100Playback speed of entry and transition animations, as a percentage.