Stack — Loopem

A wallet. The deck waits below and behind, each card showing a strip of itself under the one in front, and the card you pass pulls up and out of the way.

stack({ offset: 26, slide: 104, depth: 40 })

import { createPicker } from 'loopem'
import { stack } from 'loopem/layouts'

createPicker(el, {
  items,
  renderItem,
  ...stack(),
})

The demo above is scaled to 72px cards, so it passes smaller numbers than the bare call does.

Tuning it

Option	Default	What it does
`slide`	`140`	Pixels the card being passed travels as it clears the deck.
`offset`	`34`	Pixels of each waiting card left showing under the last.
`depth`	`50`	Pixels each waiting card recedes.
`shrink`	`0.05`	How much each waiting card narrows.
`reach`	`4`	Cards deep before one is out of sight behind the deck.
`perspective`	`900`	Distance to the vanishing point.

It sets axis: 'vertical' itself.

Why the deck points down

On a vertical track the next item is the one below, so a deck stacked upwards would move against your finger: you would drag down and watch the cards go up. That is why the deck sits below the front card.