Cover Flow

Cards turn away from the center and recede into the page. Real perspective, not a scale trick: items carry a z in pixels and the track has a vanishing point.

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

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

A preset returns a partial options object, not just a layout function, so it can bring the spacing, perspective and overscan its geometry needs. Spread it, and override anything after.

Both demos on this page pass smaller numbers than the bare call, because these swatches are 56px. Each caption gives the exact call.

Tuning it