Card swap
A 3D study deck that promotes a clicked card and swaps the front card by drag or arrow keys.
Study deck
Click a card behind to bring it forward, or drag the front card aside. Arrow keys do the same from the keyboard.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type HTMLAttributes,9 type KeyboardEvent as ReactKeyboardEvent,10 type PointerEvent as ReactPointerEvent,11} from "react";12 13export type CardSwapTone = "paper" | "ink" | "accent" | "wash";14export type CardSwapShape = "circle" | "bar" | "arch" | "tile";15 16export type CardSwapItem = {17 id: string;18 title: string;19 meta: string;20 description: string;21 tone?: CardSwapTone;22 shape?: CardSwapShape;23};24 25export type CardSwapProps = Omit<26 HTMLAttributes<HTMLDivElement>,27 "children" | "onChange"28> & {