Fanned Card Deck Features Block for React

The deck sets a custom property, --f, to 0 at rest and 1 when it is hovered, has focus inside it or has the toggle pressed. Each card reads its place in the hand from --k (from minus two to two) and sets its rotate and translate from both, so one CSS transition spreads them all. There is no script on the cards themselves.

Edit PLAYS (a title and a sentence each) and the five drawings above Card. The pose maths assumes five cards, with the middle one at zero; for another count change at() so the middle card is still zero, and the width of the stage.

The Fan out toggle is a real button with a pressed state, so a keyboard or a touch screen can open the fan and keep it open. Focus on the toggle also spreads the deck while it has focus. On a touch device, where there is no hover, the toggle is the way in.

Every card is in the reading order as a heading with its sentence, whether the deck is fanned or not; the drawings are hidden from assistive technology. Stacked cards overlap on screen only.

The fan and the lift transitions are off, so the cards jump between stacked and spread. Nothing plays by itself.

The cards are narrower and the arc is shallower, so the fan fits inside 320 pixels. Each card's title strip shows when fanned, and a card's sentence is readable on the front card and on whichever card you lift.