Bar Race
A ranking that moves through time. Values glide between periods, bars re-rank on springs as they pass each other, the numbers at the bar ends count along and the period rolls in the corner.
$149 once · every Pro piece
An overtake ignites: the bar that moves up flashes in the accent and cools over about a second, so who passed whom stays readable. Underneath, a play / pause button and a timeline you can drag, or step with the arrow keys (Space plays). Point at a bar, or step through the ranks with the arrow keys, to follow that entry: it stays bright while the others step back, wherever the race takes it.
Install
npx shadcn@latest add @obsyde/bar-raceNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { BarRace } from '@/components/obsyde/ember/bar-race/BarRace';
export function Example() {
return (
<BarRace />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/bar-race/BarRace.tsxcomponentember/bar-race/bar-race.cssstylesember/bar-race/BarRaceDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/marks.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
topBars shown | number | 8 |
entriesEntries | number | 10 |
periodPeriod | number | 12 |
autoplayAutoplay | boolean | false |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'none' | 'grid' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 7 |