Fan

The fan preset, a hand of cards or a paint deck.

Every card turns about one point below the track, so they splay out and down the way a hand of cards does. The centered one lifts clear of its neighbors.

fan({ angle: 8, pivot: 300, lift: 22, reach: 6 })
ts
import { createPicker } from 'loopem'
import { fan } from 'loopem/layouts'

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

The demo above passes smaller numbers, because its cards are 48px.

Tuning it

OptionDefaultWhat it does
angle7Degrees between one card and the next.
pivot440Pixels from a card down to the point they all turn about.
lift30Pixels the centered card rises out of the hand.
reach7Cards each side before one has finished fading.

When to use it

Use it where the real object is already a fan: paint chips, swatch books, a hand of cards. It also puts a lot of options within reach without a scrollbar.

The paint deck example uses loop: 'clamp', because a deck has two ends.