CardStack

Options

interval 1800

400 to 12000 ms, good: 1400 to 3200

Milliseconds each card spends at the front before it is moved. This sets the length of the whole loop, which is the interval times the number of cards, so four cards at 1800ms is a 7.2 second cycle and that is what the recording has to span.

travel 900

100 to 4000 ms

Milliseconds the move itself takes, clamped to the interval so a card cannot still be moving when the next one starts. Half the interval is a good rule: it leaves the pile still for as long as it is moving, which is what makes the movement read as a deliberate act rather than as a carousel.

aside 0.62

0.1 to 1.5

How far aside the card goes, as a share of the pile's width. It has to clear the pile, because the far point of the travel is where the stacking order changes: below about 0.4 the card is still overlapping when it flips, and you can see it happen.

spread 18

0 to 60 px

How far each card sits from the one beneath. This is what makes it a pile rather than a single card: at 0 the cards are exactly aligned and the whole thing reads as one object until something moves.

shrink 0.045

0 to 0.2

How much smaller each card down the pile is drawn. A little perspective, and it should be very little: a pile seen from above has almost none, and anything more reads as a fan of cards rather than a stack.

tilt 3

0 to 12 deg

Degrees of scatter. Nobody squares a pile, and at 0 this looks like a specimen diagram. Fixed per card rather than per position, so a card keeps its own angle as it moves through the pile.

lift 26

0 to 120 px

How far the moving card lifts as it goes. A hand picks a card up before moving it sideways, and the lift is most of what makes the move read as a hand rather than as a slide.

seed 7

0 to 9999

Seed for the scatter. The same seed gives the same pile, so a recording and a live page match card for card.

What it needs

Category

Surfaces, an effect

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.3 ms · 0 context

Pinned to

v0.13.0

• The card changes its stacking order only while it is clear of the pile, and that is the difference between this and every version that fades the card out. A card going from front to back has to pass the others, and there is no interpolating between being in front of something and behind it: at some instant the order flips. Done while the card is still over the pile it is visible, as a flicker that reads as a dropped frame; done at the far point of the travel, where nothing overlaps, it cannot be seen at all
• The card goes out to the side and back rather than straight through, which is what makes the far point exist. A card that crosses the pile face on has nowhere clear to change order
• Nobody squares a pile. The scatter is fixed to the card rather than to the position, so the third card is always the one sitting a degree crooked wherever it happens to be, and the pile keeps its own character as the cards move through it. A pile with an even offset per position is a diagram of a pile
• The cards are the author's own markup and are never replaced. They are positioned absolutely over one another, because a pile is a pile and the element keeps the height of one card
• destroy() puts every property it set back, including the element's own position
• Pure in t: which card is moving and how far through its travel it is are both arithmetic on the clock, and the scatter is a hash of the card's index
• A pile seen straight on is one card and a few edges, however much the cards are offset, because they are the same object at the same angle. That is honest and it is also why the scatter and the tilt are worth having: the corners are what tell you there is more than one
• One transform per card per frame, composited, plus a z-index and a shadow written only when they change. Four cards is four transforms
• The box shadow is the one painted property here. It is written per card and only on change, so a pile at rest writes nothing at all