03 / INTERACTION ARCHITECTURE
Cards
Split realistic card interactions into replaceable strategies, state models, and scene orchestration instead of putting every animation timeline into one component.
The 3D cards are the visual entry point; the real experiment is software abstraction: identifying stable inputs and outputs, then separating changing shuffle, spread, and draw flows into composable strategies.
The outer hook only dispatches by mode, while useOverhand and useRiffle follow the same input-output contract. A new shuffle can be added as a conforming module without continuously expanding a central switch-case or existing flows.
DeckPile describes shuffle-domain actions with cut() and release(); a length invariant protects the parallel mapping between card data and DOM elements. The underlying imperative animation workflow sits behind a thin declarative hook API.
useStraight, useHandFan, and useArchedRibbon implement different spread strategies; useCardsState, useCardsAnimate, useDrawCards, breakpoints, and responsive callbacks each handle an independent concern.
CardsFanStage and DeckDrawStage orchestrate complete interactions, while the Card component remains props-driven. Blueprint further enforces one-way dependencies and module entries across pages → layouts → containers → components → hooks.
Interact directly with shuffling, spreading, and drawing. Each on-screen action is composed from the strategy modules and Stages described above.