Threshold — How far are you from VIP?

Inspiration

Every major crypto exchange has a VIP program, and almost none of them are built for normal people. VIP1, the entry tier, usually requires $30,000–$100,000 in assets or millions in monthly trading volume. For most users, "VIP" is a row on a fee schedule they'll never reach.

Then MEXC relaunched its VVIP program with a different idea: every eligible user gets an initial M-Score of 350 and enters the Standard tier, with no specified asset or volume requirement. That changes the question from "can I get in?" to "what is it actually worth once I'm in?"

I wanted to build something that answers both questions honestly, with every number shown next to the conditions that come with it.

What it does

Threshold is an interactive field guide with four parts:

• Gate check. Enter roughly what you hold and trade. Threshold compares it with every qualification route into VIP1 at Binance, Bybit, Bitget and OKX, finds the route you're closest to, and shows the gap. You can export the result as a PNG card sized for posts on X.
• Card cashback lab. Set a monthly spend and see what each tier returns, with a live chart showing exactly where each monthly cap kicks in.
• Tier explorer. Drag an M-Score from 350 upward and watch every benefit (vouchers, card cashback, futures subsidy odds, listing limits) update with its limits attached.
• M-Score explainer. The four things that move the score: trading, assets, security settings and daily activity.

How I built it

React 19 + TypeScript (strict), bundled with Vite and deployed on Vercel. There's no UI framework: the design system is hand-written CSS with tokens, the charts are inline SVG, and the share card is drawn on a Canvas.

All programme data lives in one typed module, so the UI never shows a number that isn't stored alongside its conditions. The maths is small but it matters, so it's unit-tested with Vitest.

For the gate check, each exchange has several routes to VIP1 (assets, spot volume, futures volume). Your progress is measured on the route you're closest to:

$$ p = \max_i \; \min!\left(\frac{v_i}{t_i},\, 1\right) $$

where \( v_i \) is your value on route \( i \) and \( t_i \) is its threshold.

Card cashback is a capped linear function of monthly spend \( s \):

$$ \text{cashback}(s) = \min(s \cdot r,\; C) $$

so the cap is reached at \( s = C / r \): 2,500 USDT for Standard (4%, 100 USDT cap), 5,000 for Premier and 8,000 for Elite.

I used AI (Claude Code) as a pair programmer throughout: scaffolding, iterating on the design, checking figures against the source material, and testing layouts across screen sizes.

Challenges I ran into

• Accuracy over excitement. Financial promotions are full of fine print. The hardest part wasn't the code, it was deciding how to present a 1% chance of a subsidy without it reading like a guarantee, and keeping two similarly named features (a loss-coverage voucher and a loss-subsidy campaign) clearly separate.
• Edge cases in the source data. A score of 350 puts you in Standard, but the subsidy campaign starts at 351. The tier explorer handles that exact point instead of rounding it away.
• Values across six orders of magnitude. Assets from $0 to $1M and volume up to $50M on one slider felt terrible on a linear scale, so I built log-scaled sliders with friendly rounding.
• Social previews. X only renders link cards with absolute image URLs, so the build injects the production domain at deploy time.

What I learned

• A good fintech explainer is mostly an information-design problem: where a condition sits on the screen matters as much as the number itself.
• Small, typed data modules make "always show the fine print" something the code enforces rather than something you have to remember.
• Performance comes from restraint: no UI kit, no chart library, and the whole app is about 80 kB gzipped.

What's next

• Fee-tier comparisons, not just entry requirements
• More exchanges and regions
• A dated changelog, so returning users can see what changed in each program

Built With

• canvas-api
• claude-code
• css3
• html5
• javascript
• node.js
• react
• svg
• typescript
• vercel
• vite
• vitest