03 / INTERACTION ARCHITECTURE
Cards
把真實卡牌互動拆成可替換策略、狀態模型與場景編排，而不是把所有動畫時間軸塞進一個元件。
3D 卡片是視覺入口，真正的實驗是程式抽象：辨認行為中穩定的輸入輸出，將會變動的洗牌、展牌與抽牌流程拆成可組合的策略。
外層 hook 只負責依模式派送，useOverhand 與 useRiffle 遵守相同的輸入輸出契約。新增洗牌方式時，可以加入符合契約的模組，不必持續擴張中央 switch-case 與既有流程。
DeckPile 以 cut()／release() 描述洗牌領域動作；卡片資料與 DOM elements 的平行映射由長度 invariant 保護。底層 imperative animation workflow 被收在薄的 declarative hook API 之後。
useStraight、useHandFan、useArchedRibbon 負責不同展牌策略；useCardsState、useCardsAnimate、useDrawCards、breakpoint 與 responsive callbacks 各自處理獨立 concern。
CardsFanStage 與 DeckDrawStage 編排一段完整互動，Card component 則保持由 props 驅動。Blueprint 進一步約束 pages → layouts → containers → components → hooks 的單向依賴與 module entry。
直接操作洗牌、展牌與抽牌；畫面中的不同動作，正是由上面的策略模組與 Stage 組合而成。