# Toss Deck (`toss-deck`) > A card deck with weight — drag the top card past the threshold and it flies off with a spin, then slips back under the pile. - **Docs:** https://www.mellowui.com/components/toss-deck - **Markdown:** https://www.mellowui.com/components/toss-deck.md - **Registry:** https://www.mellowui.com/r/toss-deck.json - **Tool prompt:** https://www.mellowui.com/api/prompt/toss-deck - **Categories:** display, interactive, animation - **Dependencies:** motion ## AI prompt Add a TossDeck component from the mellow library — a draggable card stack for testimonials or portfolios. The top card follows the cursor with a tilt; drag it past a third of its width (or flick it, or press an arrow key) and it flies off with a spin, then restacks at the back with springs. Pass `items` as an array of ReactNode card faces and size them with `width` / `height`. `peek` controls how many cards fan out behind, `counter` shows the 01 / 05 readout, `onChange` reports the index that lands on top. Fully keyboard accessible and respects prefers-reduced-motion. ## Install ```bash npx shadcn@latest add https://mellowui.com/r/toss-deck.json ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `items` | `ReactNode[]` | — | Card faces, front of deck first. | | `width` | `number` | `320` | Card width in px. | | `height` | `number` | `420` | Card height in px. | | `peek` | `number` | `2` | Cards visible behind the top card. | | `counter` | `boolean` | `true` | Show the 01 / 05 counter under the deck. | | `onChange` | `(index: number) => void` | — | Called with the item index that lands on top after a toss. | | `className` | `string` | — | Additional CSS classes. | ## Design notes - Client component (`"use client"`) — required for animation and refs. - Uses Mellow design tokens: `--ink`, `--ink-rgb`, `--background`, `--background-rgb`, `--rule`, `--font-sans`, `--font-serif`, `--font-mono`. Tokens auto-flip between light and dark themes — never hardcode colors. - Respects `prefers-reduced-motion: reduce` where applicable. - Self-contained — no shared utilities. Copy-paste, not a package. ## Source ```tsx "use client"; import React, { useState } from "react"; import { motion, useMotionValue, useReducedMotion, useTransform, type PanInfo, } from "motion/react"; export interface TossDeckProps { /** Card faces, front of deck first. */ items: React.ReactNode[]; /** Card size in px. */ width?: number; height?: number; /** Cards visible behind the top card. */ peek?: number; /** Show the 01 / 05 counter under the deck. */ counter?: boolean; /** Called with the item index that lands on top after a toss. */ onChange?: (index: number) => void; className?: string; style?: React.CSSProperties; } /** * A card deck with weight — drag the top card past the threshold (or press * an arrow key) and it flies off with a spin, then slips back under the pile. */ export function TossDeck({ items, width = 320, height = 420, peek = 2, counter = true, onChange, className, style, }: TossDeckProps) { const [order, setOrder] = useState(() => items.map((_, i) => i)); const [fly, setFly] = useState<{ key: number; dir: 1 | -1 } | null>(null); const reduced = useReducedMotion(); const n = items.length; const toss = (dir: 1 | -1) => { if (fly || n < 2) return; setFly({ key: order[0], dir }); }; const completeToss = () => { const next = [...order.slice(1), order[0]]; setOrder(next); setFly(null); onChange?.(next[0]); }; return (
{ if (e.key === "ArrowLeft") { e.preventDefault(); toss(-1); } if (e.key === "ArrowRight") { e.preventDefault(); toss(1); } }} className="relative outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--ink-rgb),0.3)]" style={{ width, height: height + peek * 10 }} > {order.map((itemIdx, pos) => ( {items[itemIdx]} ))}
{counter && ( {String(order[0] + 1).padStart(2, "0")} /{" "} {String(n).padStart(2, "0")} )}
); } function DeckCard({ children, pos, n, peek, width, height, flying, isTop, onToss, onFlown, reduced, }: { children: React.ReactNode; pos: number; n: number; peek: number; width: number; height: number; flying: 0 | 1 | -1; isTop: boolean; onToss: (dir: 1 | -1) => void; onFlown: () => void; reduced: boolean; }) { const x = useMotionValue(0); const dragRotate = useTransform( x, [-width * 0.5, width * 0.5], [-5, 5], ); // Cards deeper than `peek` park exactly under the last visible slot instead // of fading out, so a tossed card never vanishes — it just tucks under. const depth = Math.min(pos, peek); const fan = depth === 0 ? 0 : (depth % 2 === 1 ? 1 : -1) * depth * 1.8; const stackX = depth === 0 ? 0 : (depth % 2 === 1 ? -1 : 1) * depth * 6; const stackY = depth * 10 + (depth % 2 === 1 ? 3 : 0); const slotSpring = reduced ? ({ duration: 0 } as const) : ({ type: "spring", stiffness: 360, damping: 34, mass: 0.8 } as const); const handleDragEnd = (_: unknown, info: PanInfo) => { const past = Math.abs(info.offset.x) > width * 0.24 || Math.abs(info.velocity.x) > 500; if (!past) return; const dir = Math.abs(info.velocity.x) > 500 ? Math.sign(info.velocity.x) : Math.sign(info.offset.x); onToss(dir >= 0 ? 1 : -1); }; return ( { if (flying !== 0) onFlown(); }} style={{ x, rotate: dragRotate }} className={[ "relative h-full w-full overflow-hidden rounded-[1.25rem] border border-[var(--rule)] bg-[var(--background)] shadow-[0_24px_50px_-24px_color-mix(in_srgb,light-dark(var(--ink),var(--background))_42%,transparent)]", isTop ? "cursor-grab active:cursor-grabbing" : "", ] .filter(Boolean) .join(" ")} >