# 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.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/
>
> 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](https://bettertyped.github.io/react-cards-opening/docs/theming/), 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](https://bettertyped.github.io/react-cards-opening/docs/effects/library/). [Effect plans](https://bettertyped.github.io/react-cards-opening/docs/effects/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](https://bettertyped.github.io/react-cards-opening/docs/effects/burst/) | 1.75 s |
| `loud` | adds a flash and a shake | glow, then a shake | burst and [rays](https://bettertyped.github.io/react-cards-opening/docs/effects/rays/) | 1.75 s |
| `legendary` | the same | a longer shake | adds a [flash](https://bettertyped.github.io/react-cards-opening/docs/effects/flash/), [shockwaves](https://bettertyped.github.io/react-cards-opening/docs/effects/shockwaves/), a [foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/), a [shine](https://bettertyped.github.io/react-cards-opening/docs/effects/shine/) and [sparkles](https://bettertyped.github.io/react-cards-opening/docs/effects/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

```ts
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](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/) has the functions.

## Tiers of your own

```tsx
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](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-tiers/) walks through a full example.

## Related

- [Custom tiers](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-tiers/)
- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/)
- [Rolls and odds](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/)
- [Effects](https://bettertyped.github.io/react-cards-opening/docs/effects/)

Source: https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/