Turn a list into a picker.
Any shape you want.
A framework-agnostic library for building pickers: date wheels, color swatches, photo carousels, anything where someone drags through options and lands on one. You pick the shape, from a straight line to an arc, a wheel, or a layout you write yourself.
import { createPicker } from 'loopem'
const picker = createPicker(document.getElementById('sizes'), {
items: ['XS', 'S', 'M', 'L', 'XL'],
layout: 'arc',
renderItem: (size) => {
const button = document.createElement('button')
button.textContent = size
return button
},
})
picker.on('select', ({ item }) => {
console.log('Picked size', item)
})
Works with any framework. React, Vue and Svelte also get an adapter, so it feels native there.
One list. Every shape.
The same twenty items, the same event handlers, the same value coming back. Only the layout changed.
A color picker that updates the page.
Pick a color, the product updates. The picker only tells you which item is live. What happens next is yours.
A date picker from three wheels.
The same component three times, on a vertical axis. Each column keeps its own focus and its own value.
500 photos, about a dozen in the DOM.
Loopem only renders the ones you can actually see, so a list of five hundred photos costs about what a list of ten does. The full image loads once the track settles, never on the ones flying past.
A card stack you flick through.
The deck waits below and behind, each card showing the strip that identifies it.
Paint chips, fanned out.
Every card turns about a single point below the deck. Spreading the fan preset is the whole setup.
Or write the layout yourself.
A layout is just a function from distance-to-center to a position. The Cover Flow layout is fourteen lines, and it ships as a preset.
The page scroll drives it.
Page scroll can own the track instead of a finger. linkToScroll wires it up and turns input off, since one offset can only have one driver.