VIP Progress

Usage

import { VipProgress } from '@wdzyi/ui';

<VipProgress
  points={account.loyaltyPoints}
  tiers={[
    { name: 'Bronze', threshold: 0, perks: ['Weekly 1% cashback'] },
    { name: 'Silver', threshold: 2500, perks: ['Weekly 3% cashback', 'Faster withdrawals'] },
    { name: 'Gold', threshold: 6000, perks: ['Weekly 5% cashback', 'Same-day withdrawals'] },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

pointsnumber

The player’s points. Give it new ones and it moves towards them.

tiersVipProgressTier[]

Lowest first, each with its name, the points it starts at and its perks. They take bronze, silver, gold and platinum in turn. Bronze, Silver, Gold and Platinum by default.

classNamestring

Added to the card. It’s 360px wide at most, and narrows with the space it’s in.

Notes

• Each tier has its metal, bronze, silver, gold then platinum, on its crest, its mark on the track and its name. The bar is in the metal of the tier you’re heading for, with a light passing along it every 3s, and the perks’ ticks are green.
• Points arriving roll the count and fill the bar over 700ms, and what’s left to the next tier pops. Crossing into a tier, the count rolls only as far as where that tier starts while the bar fills to the end and says Unlocking Gold. 220ms later the crest turns over in 780ms on a small spring under a band of foil cut to its shape, and as it’s side on the name changes, the track moves on and the bar starts again, empty, in the next tier’s metal, before the count rolls on to the points. So the card never shows points beyond a tier it hasn’t reached.
• The crest is pixel art, 15 by 15 and drawn 3px to the pixel, with a pip for each tier up to yours, in metals bright enough to hold on either theme. Under the bar it says how far there is to go, plainly, and nothing more. Reaching a tier sends success.
• The bar is a progress bar to screen readers, and the tier is read with its name.
• With reduced motion, it goes straight to the new tier, with nothing turning, sweeping or filling.