Multiplier Chart
The rising curve of a crash-style round. The crash is a state, not an animation that ends — the frozen curve and the final figure stay on screen so a player who looked away still sees what happened.
src/components/ui/multiplier-chart.tsxAbout
From the component's own source, where it was written.
A live multiplier curve — the crash-game shape.
The y-axis is logarithmic. These curves are exponential by construction, and a linear axis renders everything below 10× as a flat line against a spike, which is exactly the region the player is watching.
The cash-out marker is drawn on the curve rather than in a legend, because the question is always "where did I get out relative to where it stopped".
Colour carries the state and nothing moves: this component updates several times a second, and any transform animation would fight the next frame.
Install
npx astralyx-ui add multiplier-chart
Usage
import { MultiplierChart } from '@/components/ui/multiplier-chart'
<MultiplierChart values={values} current={current} crashed={crashed} cashedOutAt={cashout} />Composer
Change the props and the source below follows.
<MultiplierChart values={values} current={current} cashedOutAt={4.2} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
MultiplierChart
A live multiplier curve — the crash-game shape.
Extends Omit<ComponentProps<'figure'>, 'height'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| values | number[] | required | Samples over the round, starting at 1. The caller drives the tick; the component never runs a timer of its own. |
| current | number | — | The live figure, shown large. Falls back to the last sample. |
| crashed | boolean | false | Freezes the curve and switches to the crash colour. It is a state you stay in, not a flash. |
| cashedOutAt | number | — | Marks where the player got out, so the outcome is legible against the crash point. |
| height | number | 160 | — |
| max | number | — | — |
| label | ReactNode | — | — |
| crashedLabel | ReactNode | 'Crashed' | — |
| runningLabel | ReactNode | 'Running' | — |
| logScaleLabel | ReactNode | 'log scale' | Note shown once the curve switches to a logarithmic axis. |
| scale | auto, non-shrinking | — | The vertical range grows with the curve but never shrinks mid-round; a rescaling axis makes a rising line look flat. |