Skip to content

RiffleOptions (core)

Defined in: types.ts:184

Everything createRiffle accepts. Only count is required; everything else has a default.

import type { RiffleOptions } from '@rpxl/riffle'
const options: RiffleOptions = { count: 5, cardWidth: 300, cardHeight: 400, bounds: 'clamp' }

optional axis?: Axis

Defined in: types.ts:198

The drag axis. Default 'x'. Immutable after construction: update() throws on a change.


optional bounds?: Bounds

Defined in: types.ts:196

'loop' wraps past the ends, 'clamp' stops there. Default 'loop'.


optional cardHeight?: number | "auto"

Defined in: types.ts:190

Pixels, or 'auto' to measure a registered card. Default 400 when omitted as a number.


optional cardWidth?: number | "auto"

Defined in: types.ts:188

Pixels, or 'auto' to measure a registered card. Default 300 when omitted as a number.


count: number

Defined in: types.ts:186

How many cards are in the stack.


optional crossFollow?: number

Defined in: types.ts:212

How much the card follows the finger across the axis, 0..1. Default 0.18.


optional draggable?: boolean

Defined in: types.ts:206

Whether dragging is enabled. Keyboard navigation stays on regardless. Default true.


optional flingVelocity?: number

Defined in: types.ts:202

Pixels per millisecond. Default 0.5.


optional gap?: number

Defined in: types.ts:192

Pixels of space the default fan layout leaves between cards. Default 20.


optional getLabel?: (index) => string

Defined in: types.ts:222

A caller-supplied label per card index. The card’s aria-label becomes ${getLabel(i)}, ${i + 1} of ${count}, and announcements use the same string. Omit it for the bare position.

number

string


optional layout?: LayoutStrategy

Defined in: types.ts:216

The pose strategy. Default fan().


optional maxVisible?: number

Defined in: types.ts:194

How many cards behind the front one stay visible before fading out. Default 4.


optional reducedMotion?: ReducedMotionMode

Defined in: types.ts:214

Whether to honour prefers-reduced-motion. Default 'auto'.


optional rotation?: false | RotationOptions

Defined in: types.ts:210

Tilt while dragging, or false to disable it. Default the RotationOptions defaults.


optional spring?: SpringPreset | SpringConfig

Defined in: types.ts:208

A named preset, or your own stiffness and damping. Default { stiffness: 340, damping: 34 }.


optional startIndex?: number

Defined in: types.ts:204

The active card at construction. Read once; call goTo to move later. Default 0.


optional threshold?: number

Defined in: types.ts:200

Fraction of one step, 0..1. Default 0.25.