Watch the WebM (sharper, smaller file)

Riffle

Cards, cascading.

Riffle is a framework-agnostic carousel card stack: a fixed set of cards that cycle through stack positions under a horizontal or vertical drag gesture. The front card sits full size, the cards behind it fan out at decreasing scale, and dragging the front card away brings the next one forward. It is explicitly not a swipe-to-dismiss deck: cards are never discarded, there is no like/nope state, and nothing runs out.

Install

npm install @rpxl/riffle

Usage

cardWidth and cardHeight describe each card's geometry to the engine (how far a drag travels, how the fan is laid out) and do not size or style any element: give the cards their own size, background and radius in your markup or CSS. Every snippet below does.

Vanilla

<div id="stack"></div>

import { createRiffle } from '@rpxl/riffle'

const stack = document.getElementById('stack')!
// One grid cell for every card: Riffle positions them from there with transforms.
// justify-content keeps that cell the card's own width (centred), so the fan
// scales about the card itself.
stack.style.cssText = 'display: grid; justify-content: center; padding: 32px 0'
// Name the carousel: screen readers announce this label with it.
stack.setAttribute('aria-label', 'Films')

const riffle = createRiffle(stack, { count: 5, cardWidth: 300, cardHeight: 400 })

for (let i = 0; i < 5; i++) {
  const card = stack.appendChild(document.createElement('div'))
  card.textContent = String(i + 1)
  card.style.cssText = `grid-area: 1 / 1; width: 300px; height: 400px; border-radius: 16px;
    background: hsl(${i * 72} 65% 45%); color: white; display: grid; place-items: center`
  riffle.registerNode(i, card)
}

// Drag the front card, or wire riffle.next(), riffle.prev() and riffle.goTo(index)
// to controls of your own.

React

import { Riffle } from '@rpxl/riffle/react'

export function Stack({ films }: { films: { title: string }[] }) {
  return (
    // justifyContent keeps the stack's one grid column, and so every card, the
    // card's own width (centred), so the fan scales about the card itself.
    <Riffle
      aria-label="Films"
      cards={films}
      cardWidth={300}
      cardHeight={400}
      style={{ justifyContent: 'center' }}
    >
      {(film, index) => (
        <div
          style={{
            width: 300,
            height: 400,
            borderRadius: 16,
            background: `hsl(${index * 72} 65% 45%)`,
            color: 'white',
            display: 'grid',
            placeItems: 'center',
          }}
        >
          {film.title}
        </div>
      )}
    </Riffle>
  )
}

Vue

<template>
  <!-- justify-content keeps the stack's one grid column, and so every card, the
       card's own width (centred), so the fan scales about the card itself. -->
  <Riffle
    aria-label="Films"
    :cards="films"
    :card-width="300"
    :card-height="400"
    style="justify-content: center"
  >
    <template #card="{ card, index }">
      <div class="card" :style="{ background: `hsl(${index * 72} 65% 45%)` }">
        {{ card.title }}
      </div>
    </template>
  </Riffle>
</template>

<script setup lang="ts">
import { Riffle } from '@rpxl/riffle/vue'

interface Film {
  title: string
}

defineProps<{ films: Film[] }>()
</script>

<style scoped>
.card {
  width: 300px;
  height: 400px;
  border-radius: 16px;
  color: white;
  display: grid;
  place-items: center;
}
</style>

Every TypeScript and Vue block above is typechecked against the built package (the Vue one with vue-tsc, template included) as part of pnpm --filter @rpxl/docs check:api (apps/docs/scripts/check-readme-examples.mjs), and the package README's copy must match it, so neither can drift from what actually ships.

Size

6.76 kB minified and gzipped (createRiffle alone, measured by size-limit; see package.json's size-limit field for the enforced budget).

Docs

Full docs, API reference and a live demo: https://reactivepixels.github.io/riffle