Options — Loopem

Every option is a plain key on the object you pass to createPicker. Move a control and the picker above updates. The code block is the config you would paste, showing only what you changed.

picker.js

Layout

layout'line' | 'arc' | (d) => Placement

The shape items are laid along. Pass a function of your own to get any curve at all.

axis'horizontal' | 'vertical'

Which way the track runs. It also decides which wheel and swipe direction the picker claims, and which way the arrow keys step.

spacingnumber · px

Pixels between one item and the next. It is also the drag ratio, so this many pixels of finger moves the track by exactly one item.

radiusnumber · px

How tightly the arc bends. A magnitude, not a direction: larger is flatter, and a big enough radius is indistinguishable from a line.

bend'down' | 'up' | 'right' | 'left'

Which side the ends fall away from the centered item. Down or up on a horizontal track, right or left on a vertical one.

tiltboolean

Sit each item tangent to the curve rather than upright, so the track reads as one bent ribbon.

Appearance

minScalenumber · 0 to 1

How small an item gets once it is falloff items from the center. 1 leaves every item full size.

minOpacitynumber · 0 to 1

The same ramp for opacity. Useful for pointing at the center without moving anything.

falloffnumber · items

How many items those two ramps take to reach their minimum. Past that they hold, so distant items all look alike.

fadenumber · px

Pixels the track dissolves into its container at each end. A mask rather than an overlay, so it works over any background, including a photo. It sits on the container edge, so a container much wider than the track shows no fade.

Motion

stiffnessnumber · rad/s

How briskly a move settles onto its item. Every move uses it except a flick, which coasts on its own inertia instead.

frictionnumber · 0 to 1

The fraction of a flick’s speed left after one second. Lower stops it sooner; higher lets one throw cross the whole list.

Behavior

loop'wrap' | 'clamp'

Whether the ends join. clamp stops at the last item and rubber-bands against it, which is what a closed set of ten colorways wants.

select'auto' | 'manual'

Whether settling counts as choosing. Under manual the track can be browsed freely and only a click or Enter commits, so nothing expensive loads on the way past.

autoplaynumber · ms

Milliseconds to dwell on an item before advancing on its own. 0 turns it off. It holds while you are on the track and while the tab is hidden, and never starts at all under reduced motion.

interactiveboolean

Whether the track answers to drag, wheel and keys at all. Turn it off for one driven from elsewhere, and the touch goes back to the page it sits in.

Everything at a glance

Option	Default	What it does
`items`	required	The list. Any array; loopem never looks inside an item.
`renderItem`	none	Builds one item’s element. Omit it and fill the slots yourself.
`layout`	`'line'`	`'line'`, `'arc'`, or your own `(d) => Placement`.
`axis`	`'horizontal'`	Which way the track runs.
`spacing`	`72`	Pixels between items, and the drag ratio.
`radius`	`360`	Arc only. Larger is flatter.
`bend`	per axis	Which side the arc’s ends fall away.
`tilt`	`false`	Arc only. Sit items tangent to the curve.
`minScale`	`1`	Size reached `falloff` items out.
`minOpacity`	`1`	Opacity reached `falloff` items out.
`falloff`	`1`	Items those two ramps take to get there.
`fade`	`0`	Pixels the track dissolves at each end.
`perspective`	`1200`	Pixels to the vanishing point. `0` turns it off.
`stiffness`	`12`	Radians per second. How briskly a move settles.
`friction`	`0.02`	Fraction of a flick’s speed left after one second.
`loop`	`'wrap'`	Or `'clamp'`, which stops at the ends.
`select`	`'auto'`	Or `'manual'`, to browse without choosing.
`initialIndex`	`0`	Where the track starts.
`autoplay`	off	Milliseconds of dwell before advancing on its own.
`overscan`	`2`	Extra items rendered past the visible window.
`interactive`	`true`	Whether it answers to drag, wheel and keys.