Animated crypto price ticker (the dashboard primitive)

A price ticker is the universal "live data" cliché. Every fintech ad, every crypto exchange landing page, every trading-app onboarding has one. They all look approximately the same: a number that ticks, a line that moves, two flash chips for bid and ask. The version below renders deterministically, exports to MP4, and looks more credible than most production tickers.

The structure

Four elements, top to bottom:

1. The label. Asset symbol + interval. HFRAME · 24h.
2. The big number. Last price, tabular numerals, large.
3. The delta. Percentage change vs the interval open, with a colored arrow.
4. The chart. Three line series — price, EMA, VWAP — with a gradient area fill under price.

Plus a side panel for bid/ask flash. Plus a tiny legend. That's the whole composition.

The data

For a recorded (not live) animation, the data is a fixed array — typically 60 points representing the last 24 hours. The animation draws the chart left-to-right over the first 6 seconds, then hovers the last point for 2 seconds to let the eye land.

const N = 60;
const series = [];
for (let i = 0; i < N; i++) {
  // Synthesize a believable-looking series. For real data, replace with an array.
  const p = 30 + 14 * Math.sin(i * 0.36) + 6 * Math.sin(i * 1.25 + 1.4);
  series.push(p);
}

For production, pull a real time series from your data warehouse. The shape stays the same: array of N numbers, one per bar.

The three lines

• Price. The main signal. Use your brand's signal color (red, blue, green — whatever).
• EMA(12). Trailing weighted average. Quieter color, secondary.
• VWAP. Cumulative volume-weighted average. Third color, even quieter.

The trick: the EMA and VWAP shouldn't pop. They support the price line; they don't compete with it. Use 1.5-2px stroke and a desaturated brand color.

The gradient under price is the secret. A 22% opacity at top, 0% at bottom, in the brand color. It anchors the chart to the bottom of its container.

The bid/ask flash

The flair element. Two chips on the side that briefly highlight when the price ticks up or down:

const diff = currentPrice - previousPrice;
bidFlash.style.opacity = diff > 0 ? 1 : 0.25;
askFlash.style.opacity = diff < 0 ? 1 : 0.25;

The flash is what makes the ticker feel live. Without it, you have a chart. With it, you have a trading screen.

Determinism for MP4 export

Every value above is computed from the time t. The price array is fixed; the cursor index is Math.floor(N * t / 6); the flash states are derived from comparing the current and previous values. There is no wall clock anywhere. The MP4 export from the playground produces a byte-identical file every time.

Use cases

• Trading-app onboarding video. First 8 seconds the user sees in the app.
• Crypto exchange landing-page hero. A 12-second loop above the fold.
• Earnings-call macro snapshot. The 30-day price action as a video clip embedded in a slide deck.
• Discord / Slack alerts. A 4-second "BTC ripped +8%" auto-generated clip when a threshold trips.

The chart-animation primitive shows up in animated bar chart from JSON and stock chart animation — different surfaces, same render pattern.

A close

The reason most crypto tickers look fake is they are fake — they animate with setInterval(updatePrice, 200) and ship a webm of someone watching it. The deterministic version is more honest and looks better. Same shape; the time axis is the parameter instead of the side effect.