Rarity tiers
Six tiers ship, the six loot is sorted into almost everywhere: common, uncommon, rare, epic, legendary and mythic. Each arrives its own way. A common is set down in a puff of dust. A mythic puts the lights out, pulls everything in, and arrives in an impact frame with the air cracking around it.
One of each. Open them left to right.
The six that ship
| Tier | Colour | Weight | Roughly | How it arrives |
|---|---|---|---|---|
common | grey | 45 | nearly one in two | Set down: a ring along the floor, and dust. |
uncommon | green | 27 | one in four | Alive: ripples, leaves on an updraft, fireflies. |
rare | blue | 15 | one in seven | Ice: rings close in, then a crystal, a hex wave and shards. |
epic | purple | 8 | one in twelve | Arcane: light is drawn in, then a turning sigil and a spiral. |
legendary | orange | 4 | one in twenty five | The sun: a flash, a pillar of light, a sunburst, coins. |
mythic | red | 1 | one in a hundred | A cataclysm: the lights fail, then a nova, cracks, lightning, a quake, and fire. |
The colours are the same on every theme, because a tier's colour is how it is known: a rare is blue whatever the page around it looks like.
A tier is four things
An id, a word to show, a weight that says how often it comes up, and an effect level that says how loud the card's own reveal is. On top of that reveal, each tier plays a show of its own from the effects library. Effect plans lists what is in each and how to change it.
Four effect levels
The effect level is the part of the reveal that belongs to the card itself: how it waits face down, and what it does as it turns.
| Effect | On the grid | Face down | As it turns | Stays up at least |
|---|---|---|---|---|
quiet | ring and sparks | glow, then a hop | burst | 1.75 s |
loud | adds a flash and a shake | glow, then a shake | burst and rays | 1.75 s |
legendary | the same | a longer shake | adds a flash, shockwaves, a foil border, a shine and sparkles | 2.65 s |
mythic | the same | the longest shake, harder every time | everything a legendary does | 3.4 s |
A card names its tier
const card = { id: "ash-phoenix", rarity: "mythic", name: "Ash Phoenix" };A card whose rarity is not in the list still opens: quietly, in the theme's muted colour, and never from a roll. A typo in a tier id should not take a reveal down with it.
Weights are ratios
Only the proportion between weights matters. A card's chance in a draw is its tier's weight over the weights of every card in the pool, so two legendaries in a pool each come up half as often as one would. Rolls and odds has the functions.
Tiers of your own
import type { RarityTier } from "@react-cards-opening/core";
const tiers: RarityTier[] = [
{ id: "bronze", label: "Bronze", weight: 70, effect: "quiet" },
{ id: "silver", label: "Silver", weight: 25, effect: "loud" },
{ id: "gold", label: "Gold", weight: 5, effect: "legendary" },
];
<CardHunt rarities={tiers} theme={{ ...theme, rarity: { bronze: "#d08a5a", silver: "#c3ccd6", gold: "#f2cc60" } }} />The label is shown as written, under the card's name, in normal case. Custom tiers walks through a full example.