Card Stack

Accessibility

• The top print is a real button named by its title, meta and price. Prints behind it are hidden from screen readers.
• The arrows are labelled, so nothing needs dragging.
• The counter is announced politely.

Motion

• The top print follows the pointer and tilts by x / 20. The cards below move up one step as you drag.
• Past 30% of its width or at velocity 500 it flings away in 350 ms. Otherwise it springs back.
• Details scales the print up in 350 ms.
• With reduced motion, dragging is off and the arrows swap prints in place.

Responsive behavior

• 448 px on Web and 358 px on Mobile. The stage stays 380 px tall.
• Details grows the tray to fit, and Add to cart is taller on Mobile.

Performance

• At most four prints are in the DOM, whatever the length of items.
• A drag writes straight to the stage through a motion value, so it never re-renders per frame.
• The swap to a new top print runs before paint, so it never flashes.

• Import CardStack from @/components/fetaui/card-stack. Without items it shows five sample prints.
• Each item needs name, meta, price and art. description and specs fill the details view.
• Add to cart only calls onAdd. Wire it to your cart.
• The stack wraps at both ends. Past 30% of the card width, or at 500 px/s, a drag skips. Composes Card, Button and Icon Button.