Deck

Card decks that merge cyclic stacks, finite advance flows, velocity gestures, keyboard control, and deterministic motion.

A rammed earth corridor with a ceramic vase and wooden bench between tall slit windows

Mode

Visible

Last advance: none

Install

npm install @patternmode/deck

import { Deck } from "@patternmode/deck";
import "@patternmode/deck/styles.css";

export function ProjectDeck() {
  return (
    <Deck mode="cycle" visibleCount={3} onAdvance={({ direction }) => console.log(direction)}>
      <Deck.Card key="one">One</Deck.Card>
      <Deck.Card key="two">Two</Deck.Card>
      <Deck.Card key="three">Three</Deck.Card>
      <Deck.Empty>No cards left</Deck.Empty>
    </Deck>
  );
}

Core API

`Deck`

Root deck with finite and cyclic advance modes.

mode: "cycle" | "finite""cycle"Whether cards wrap forever or exhaust into Deck.Empty.
index: numberControlled active card index.
defaultIndex: number0Initial active card for uncontrolled decks.
visibleCount: number3Number of cards rendered in the visual stack.
onAdvance: (event: DeckAdvanceEvent) => voidCalled when the active card advances by drag or keyboard.

`Deck.Card`

A card child rendered into the animated stack.

children*: ReactNodeCard content.
className: stringClass passed to the rendered motion card.