Pose

Defined in: types.ts:12

A card’s visual state. Mutated in place by layouts; never allocated per frame.

Example

import { createPose, fan } from '@rpxl/riffle'

const pose = createPose()
fan().pose(0, geometry, pose) // the front card's resting pose

Properties

cross

cross: number

Defined in: types.ts:16

Pixels across the drag axis.

---

main

main: number

Defined in: types.ts:14

Pixels along the drag axis.

---

opacity

opacity: number

Defined in: types.ts:32

0..1. Cards fade out as they exit or fall past maxVisible.

A card whose opacity reaches 0 (after rounding to three decimals) is parked at the neutral pose: its transform is written with no translation, rotation or scale, not at its layout offset, so an invisible card never widens the page. Do not rely on a CSS opacity transition to fade such a card out in place: the transform moves to neutral in the same write, so a transitioned fade plays at the neutral position. Fade through the pose’s own opacity instead.

---

rotation

rotation: number

Defined in: types.ts:18

Degrees.

---

scale

scale: number

Defined in: types.ts:20

1 at full size, shrinking toward 0 further back in the fan.

---

zIndex

zIndex: number

Defined in: types.ts:34

Stacking order. Higher paints on top.