Skip to content
Riffle

Riffle

A cycling card stack, physics based and framework agnostic. Cards fan out behind the front one and cycle in place, nothing is ever swiped away or discarded.
Choose your frameworkGitHub
Midnight Drift
Paper Lantern
Glass Orchard
Low Tide
Ember Field

Drag a card, or use the buttons.

Choose your framework

Section titled “Choose your framework”

Start with Vanilla JS

npm install @rpxl/riffleGet started →

Start with React

npm install @rpxl/riffleGet started →

Start with Vue

npm install @rpxl/riffleGet started →

6.76 kB gzipped, zero dependencies. Add 1.14 kB for the React adapter, or 1.31 kB for Vue.

One engine, three frameworks

Section titled “One engine, three frameworks”

One engine driving two frameworks at once: drag either stack below and it advances independently of the other.

React

Neon Harbor

Vue

Neon Harbor

Why Riffle

Section titled “Why Riffle”
  • A cycling stack, not a deck. Cards fan out behind the front one at decreasing scale, and dragging the front card away brings the next one forward. There is no like/nope state, nothing is discarded, and nothing runs out: reach the last card and the next drag brings back the first, or clamp it to stop at the ends.
  • One engine, three ways to hold it. The core has zero runtime dependencies and never imports React, Vue or any other framework. @rpxl/riffle/react and @rpxl/riffle/vue are thin adapter entries over the same engine, proven live above: the React and Vue stacks run side by side, driven by the same engine as the drag demo at the top of the page, but the feel never changes between them.
  • Real physics, not a canned transition. A spring drives every settle, drag velocity carries into a fling, and a release short of the threshold eases back rather than snapping. Gestures has a live tuning panel for the exact numbers.
  • Accessible by construction. Roving tabindex, genuine inert on background cards, a debounced live region, and keyboard support out of the box. See Accessibility for what Riffle does and what you still have to do.

Next

Section titled “Next”

Each link below opens that page in the framework you chose above, or asks you to pick one first.

  • Getting Started walks through your first stack, step by step.
  • Concepts explains the position scalar the whole engine is built on.
  • Examples is the gallery of runnable apps for your framework, each with its source.
  • Recipes covers infinite feeds, clamped controls, programmatic control, and forms inside cards.