Back to the case board

Product Designer · 2025

A Telegram mini-app where a token's supply burns faster the more the internet talks about it. The design problem was making an invisible, server-side burn rate legible at a glance — solved by making the interface's own tempo the reading: a cold token breathes every 6.5 seconds, an extreme one every 2.

My role

I led product and design on it: how the burn mechanic reads, the chart grammar, and the call to throw the first version out whole instead of patching it. The widgets here are rebuilt from the product's shipped components and values; some files were re-authored when this case was assembled, so they are not an untouched export.

View live site
FinTech
Telegram Mini App
Design System
Data Viz
Motion

TrendArena is a Telegram mini-app where a token's supply burns faster the more the internet talks about it. The rate is computed server-side and never arrives as a number a holder could act on, so the design problem was not how to display it — it was whether a reader who understood the mechanic completely would have any move to make. The first version failed that test and was thrown out whole. What follows is what replaced it, and the product widgets are the shipped ones — same components, same computed styles, same motion — not a redesign.

Every figure on the token page is derived from one input, and no screen in the product ever says so out loud. This is that sentence, drawn — the explainer the mini-app never shipped.

Five stations on one wire, and what travels between them is the figure itself: minute samples summed into the 30-minute bucket, the bucket measured against today's three frozen thresholds, the band that admits it, the multiplier that band carries, the −7,320 a cycle it spends, and the price answering a beat later.

The band boundaries are recomputed once a night from the previous day's counts and then held for the whole day, so a reader can decide what a token has to cross without the line moving under them.

The price of that decision is on the card: the same 18K reads Extreme before midnight and Medium after it, because yesterday's spike raised today's bar. It is the question the product gets asked most, answered as a mechanism rather than a footnote.

The internet picks a ticker; TrendArena mints it and it opens cold, burning nothing. Then the talk keeps climbing, and every threshold it crosses steps the burn — ×2, ×5, ×10 — until the price answers. Cause on the left, product on the right, one continuous shot.

One take, one object — the coin that lands is the shipped ThermalAvatar the token page wears, never a second copy of it. Cause and product are both on stage the whole lap; what changes is the page's reading, which is a loading state until the coin hits it. The sphere then turns half over on every band step so the colour cut lands where it cannot be seen, and every figure is derived: mentions set the band, the band sets the burn, the burn moves the price.
Identity, position and the four horizons, above the chart.
The burn banner: the rate as an object rather than a label.
The tape, the buy/sell split and the holder leaderboard.

The product prints no burn rate anywhere. The rate is the object: colour is the band, and the slope of the level is the speed.

Supply remainingEqual start · 87,840 tokens
Coldno burn
87,840
0 / cycle
Medium×2
87,840
−1,464 / cycle
Hot×5
87,840
−3,660 / cycle
Extreme×10
87,840
−7,320 / cycle
Floor, not a trough — supply never increasescycle 01 / 12
Four equal tanks and one clock. Cold does not move at all, because its shipped multiplier is zero; Extreme empties a tank in twelve cycles, with the gridlines there so the ladder is measured rather than claimed. A very cold token could have been made to mint supply, and that was rejected outright — Cold is a floor, not a trough.

The chart grammar was argued out, not defaulted into: counts are discrete and belong in bars that start at zero, price is continuous and belongs on a line, and widening the window has to keep the daily rhythm alive.

The wrong version is drawn first and held — counts as a line on a baseline that starts at 800, which fills the panel and looks perfectly fine — then the baseline drops to zero and the same path resolves into one bar per fixed 5-minute bucket. Widened, buckets merge by max; the ghost behind them is the same merge done by sum, where the rhythm flattens into mush.

Price, heat and burn rate share one time axis, so a burn that lands under a price move reads differently from a burn on its own — the comparison the product was built to make.

Two series, one shared time axis

Price, heat and burns are toggles, not tabs. Any two of them stack, and a burn that lands under a price move stops reading as a coincidence — one range picker feeds the whole column, so both panels are always answering about the same window.

Price at the cursor$0.4612Jul 28 12:00
Ported from the shipped mini-app. It presses its own toggles and scrubs its own cursor, two series at a time.

Supply burns faster the more the internet talks about a token. That rate is not printed as a label anywhere — it is the sphere, and the sphere is one continuous spring you can interrupt mid-flight.

The orb is the reading, not a badge

Colour is the band, size is how hard it is asking for attention, and the pulse is its own rate — 2s at Extreme, 6.5s at Cold.

The shipped component, tapping its own disclosure on a loop.

Three readings, one control

A tape, the buy/sell split and the leaderboard answer different questions about the same hour — so they share a control rather than stacking down the page.

The shipped component, cycling its own segmented control.

One hero number, and it follows the reader

A holder opened the app asking “am I up”, so their stake takes hero scale. Under it, four horizons at once — a day at +30% beside a week at −4.8% is a spike.

Two shipped components, stacked as the screen stacks them. The crosshair walks a day; the four horizons land one at a time.
Reference data, one quiet tap away. The change column is decided by the rows on screen, not by the payload.

What it is worth, how fast it is burning, what is left of the supply, and who is trading it — in that order, because that is the order the questions arrive in.

Eight sections, in the order a holder reads them

Every widget above is one block of this screen. Assembled, the order is the argument — and nothing here is a screenshot: it presses its own controls.

Position01 / 06

A holder opens this to ask what it is worth, so the stake takes hero scale. Four horizons under it: +30% on the day, −4.8% on the week.

Position
$16,419
Unrealised
+$2,956.35 · +18.01%
24h
+30.01%
7d
−4.80%
The shipped screen, assembled from the same components. The camera stops six times; the phone presses its own chart toggles, its own tabs and its own alerts sheet.

More projects