Skip to content
react-cards-opening

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.

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.

Last updated . Read this page as Markdown.