# Hum

The hum is the half second where the viewer knows the tier before they know the card. The back's edge glows in the tier's colour, and the card moves: a small hop for a quiet tier, a side to side shake for a loud one, a longer shake for a legendary.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/hum/
>
> Open them left to right and watch only the back: each tier waits differently.

## When it plays

Every card gets it, whatever its tier.

## How it is built

The glow is a box shadow tweened from a faint white ring to a 70 pixel bloom in the tier's colour over half a second.

A quiet tier hops 8 pixels and settles in 0.4 seconds. A loud tier shakes 5 pixels each way in the same time. A legendary shakes for 0.7 seconds. That one number is the only thing that tells a legendary apart before it turns.

A press on the card during the hum skips straight to the turn. With reduced motion the glow stays and the movement goes.

## What changes it

- The tier's `effect` picks the hum: `quiet` hops, `loud` and `legendary` shake.
- `showFor(effect)` returns the plan as data (`hum.kind`, `hum.seconds`) if you draw the reveal yourself.

## Related

- [Flight](https://bettertyped.github.io/react-cards-opening/docs/effects/flight/)
- [Flip](https://bettertyped.github.io/react-cards-opening/docs/effects/flip/)
- [Shockwaves](https://bettertyped.github.io/react-cards-opening/docs/effects/shockwaves/)
- [Effects](https://bettertyped.github.io/react-cards-opening/docs/effects/)
- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)

Source: https://bettertyped.github.io/react-cards-opening/docs/effects/hum/