Documentation

Card Pinwheel

Four imaginary card products in a radial X. Each card sits over one neighbour and under the next, in a loop. That overlap is clip-path, not 3D.

All effects start on, matching the finished layout. Turn them off in the Dial Kit panel to see what each piece is doing.

How the overlap works

Everything is positioned from one point. Each slot is position: absolute; top: 50%; left: 50% with a negative margin equal to half the card, then translated outward. The whole group then rotateZ(-45deg). No perspective.

Each card is drawn twice. An outer half is clipped to the side away from the center. An inner half is the side toward the center. The two clips overlap by a couple of pixels so the join does not show a seam. Outer copies paint first. Inner copies paint later, in cyclic order (right, bottom, left, top), so the center overlap tucks each card under the next instead of one card covering the rest.

The shadow is not box-shadow. A blurred sibling the same shape as the card is translated inside overflow: hidden on the shell. Private and Debit start in the top-right of their card. Reserve and Signature start in the bottom-left. As Reach goes from Far Reach in to Near Reach, that copy slides toward the opposite corner by the same pixel amount on both axes, 0 to half card height, not a percentage of each edge. Scale grows from that same corner. Opacity and Blur are the wash. Angle and Amount are a later, screen-space nudge (0° is down).

Above pulls one card out of the weave, draws it whole, and paints it last. That is the first frame of a fly-out: swap the halves for a full card, then move it. Hover (or focus) slides a card further from the origin. The shadow on that card slides the same distance the other way, so it stays under the neighbour. The shadow that card casts on the neighbour slides with it. Hover Out is how far that pair travels.