{"slug":"crash","name":"Crash","description":"A crash game: a paper plane flies the multiplier up a curve, banking with its slope through a speed field that streams faster as it climbs, until the round crashes at a fair random point. Cash out by hand or at an auto target and a parachute pops open at the cash point while the plane flies on, so you see where it would have crashed. On a crash the plane tumbles out of the sky in a burst of paper shreds, milestones pulse the readout, and recent rounds slide into a history strip. Server-decided crash points, optional synthesized sound, reduced-motion safe.","category":"casino","source_url":"https://beui.dev/r/crash/raw","detail_url":"https://beui.dev/r/crash","raw_url":"https://beui.dev/r/crash/raw","page_url":"https://beui.dev/casino/crash","markdown_url":"https://beui.dev/casino/crash.md","published_at":"2026-11-05","updated_at":"2026-11-05","dependencies":["@floating-ui/dom","clsx","lucide-react","motion","react","react-dom","tailwind-merge"],"internal":["../magnetic","./action-swap","./base","./crash/crash-parts","./crash/use-crash-game","./magnetic","./metallic","./stateful","./tooltip/grace","./tooltip/positioner","./tooltip/use-position","./use-crash-game","./use-position","@/components/motion/action-swap-cascade","@/components/motion/button","@/components/motion/crash","@/components/motion/number-ticker","@/components/motion/select","@/components/motion/tooltip","@/components/motion/tooltip-surface","@/lib/audio-context","@/lib/ease","@/lib/game-sounds","@/lib/hooks/use-dismiss","@/lib/hooks/use-hover-capable","@/lib/hooks/use-hover-gesture","@/lib/hooks/use-listbox","@/lib/hooks/use-on-open","@/lib/hooks/use-row-cursor","@/lib/hooks/use-tap-gesture","@/lib/presence-gate","@/lib/touch","@/lib/utils"],"files":[{"path":"components/motion/crash.tsx","type":"component","content":"\"use client\";\n// beui.dev/casino/crash\n\nimport { AnimatePresence, motion, type Transition } from \"motion/react\";\nimport { useId } from \"react\";\nimport { EASE_IN, EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport {\n CHUTE,\n type CrashMiniatureProps,\n CrashShell,\n MINI,\n MINI_REPLAY,\n niceAtLeast,\n Parachute,\n PRIMARY_TEXT,\n STAGE_LABEL,\n STAGE_W,\n wrap,\n} from \"./crash/crash-parts\";\nimport {\n BURST,\n type CrashProps,\n EXIT,\n formatShort,\n GROWTH,\n growth,\n SWAP,\n timeAt,\n useCrashGame,\n} from \"./crash/use-crash-game\";\n\nexport { type CrashProps, type CrashReveal, crashPoint, formatMultiplier } from \"./crash/use-crash-game\";\n\n// Graph geometry in SVG units, matching the shell's 10:7 stage.\nconst W = STAGE_W;\nconst H = 280;\n// The y labels sit in the right pad; the left pad clears the parked plane's tail.\nconst PAD = { left: 18, right: 40, top: 20, bottom: 24 };\n// The axes start at 8s and 2.2×, then grow so the head stays near 82% across\n// and 72% up, which keeps them continuous with no rescale jumps.\nconst X_MIN = 8;\n// 2.2×, not lower: while the axes are fixed the head must stay under the\n// readout's corner (top 40%, left 45%) even on a narrow stage.\nconst Y_MIN = 2.2;\nconst HEAD_X = 0.82;\nconst HEAD_Y = 0.72;\n\n/**\n * A crash game: a paper plane flies the multiplier up a curve until it\n * crashes at a random point. Cash out before it does. After a cash out the\n * flight keeps going, so the player sees what they left on the table.\n */\nexport function Crash({ \"aria-label\": ariaLabel = \"Crash\", className, ...options }: CrashProps) {\n const game = useCrashGame(options);\n // The shell pins the readout top left: an exponential curve never reaches\n // that corner, so the flight can't run under the numbers.\n return (\n }>\n \n \n );\n}\n\ninterface GraphProps {\n t: number;\n cashed: number | null;\n crashed: boolean;\n round: number;\n reduce: boolean;\n skipping: boolean;\n target: number | null;\n}\n\n/** The flight: a curve from 1× at 0s to the current multiplier, on axes that grow with it. */\nfunction Graph({ t, cashed, crashed, round, reduce, target, skipping }: GraphProps) {\n const fill = `crash-fill-${useId().replace(/:/g, \"\")}`;\n const m = growth(t);\n const xMax = Math.max(X_MIN, t / HEAD_X);\n const yMax = Math.max(Y_MIN, 1 + (m - 1) / HEAD_Y);\n const x = (seconds: number) => PAD.left + (seconds / xMax) * (W - PAD.left - PAD.right);\n const y = (value: number) => H - PAD.bottom - ((value - 1) / (yMax - 1)) * (H - PAD.top - PAD.bottom);\n const base = y(1);\n\n // Sampled densely enough that the bend reads as smooth at any scale.\n const path = (from: number, to: number) => {\n let d = \"\";\n for (let i = 0; i <= 48; i++) {\n const s = from + ((to - from) * i) / 48;\n d += `${i === 0 ? \"M\" : \"L\"}${x(s).toFixed(2)},${y(growth(s)).toFixed(2)}`;\n }\n return d;\n };\n const cashT = cashed === null ? null : timeAt(cashed);\n const flown = cashT === null ? t : Math.min(t, cashT);\n const line = path(0, flown);\n const area = `${line}L${x(flown).toFixed(2)},${base}L${x(0)},${base}Z`;\n const lost = crashed && cashed === null;\n const missed = cashT !== null && t > cashT && !crashed ? path(cashT, t) : null;\n\n const yStep = niceAtLeast((yMax - 1) / 4);\n // 1× plus round multiples of the step (500×, 1K×, not 501×), skipping one\n // too close to the baseline. The epsilon keeps 0.8 / 0.2 from flooring to 3.\n const yTicks = [1];\n for (let k = Math.ceil(1 / yStep + 1e-9); k * yStep <= yMax + 1e-9; k++) {\n if (k * yStep - 1 >= yStep * 0.5) yTicks.push(+(k * yStep).toFixed(6));\n }\n const xStep = niceAtLeast(xMax / 4);\n const xTicks = Array.from({ length: Math.floor(xMax / xStep + 1e-9) }, (_, i) => (i + 1) * xStep);\n\n const head = { x: x(t), y: y(m) };\n // Bank along the curve's on-screen slope, levelling out on the runway at\n // 0s and easing up over the first 0.6s of take-off. A slight bob keeps it\n // airborne; reduced motion drops the bob and the take-off ease, so the\n // plane just points along the curve.\n const slope = Math.atan2(\n -((H - PAD.top - PAD.bottom) / (yMax - 1)) * GROWTH * m,\n (W - PAD.left - PAD.right) / xMax,\n );\n const flying = t > 0 && !crashed;\n const bob = flying && !reduce ? Math.sin(t * 6) * 3 : 0;\n const takeOff = reduce ? (t > 0 ? 1 : 0) : Math.min(1, t / 0.6);\n const bank = Math.max(-70, (slope * 180) / Math.PI) * takeOff + bob;\n\n const travel = reduce ? 0 : 30 * t + 9 * Math.min(t, 20) ** 2 + 360 * Math.max(0, t - 20);\n const near = travel;\n const far = travel * 0.35;\n const streakLength = 4 + Math.min(14, (30 + 18 * Math.min(t, 20)) * 0.035);\n const marker = cashT === null || cashed === null ? null : { x: x(cashT), y: y(cashed) };\n\n const targetLine =\n target === null ? null : { y: y(Math.min(target, yMax)), above: target > yMax, label: formatShort(target) };\n\n return (\n \n \n \n \n \n \n {/* Grid lines fade in from the left, leaving the readout's corner clear. */}\n \n \n \n \n \n \n \n \n\n {/* Speed field: far dots and near streaks stream past, faster as the\n plane climbs. Positions derive from t, so a skip would only\n flicker; it fades out then. Shown only in flight, so a parked or\n crashed graph is clean. */}\n \n {FAR.map((dot) => (\n \n ))}\n {NEAR.map((streak) => {\n const from = wrap(streak.x - near, W);\n return (\n \n );\n })}\n \n\n \n \n {yTicks.map((value) => (\n \n \n {/* Labels on the right, past the head, which stays at 82% across.\n Right-aligned, so a label grown for a narrow stage stays on it. */}\n \n {formatShort(value)}\n \n \n ))}\n {xTicks.map((value) => (\n // Motion reads `x` as a transform, so the position sits on a plain text.\n \n \n {`${+value.toFixed(1)}s`}\n \n \n ))}\n \n \n\n \n {targetLine ? (\n // The auto target, ahead of the plane: a dashed line that fades in\n // from the left like the grid, or a caret at the top while it is\n // still above the axes. It fades out once it pays.\n \n {targetLine.above ? null : (\n \n )}\n \n {`Auto ${targetLine.label}${targetLine.above ? \" ↑\" : \"\"}`}\n \n \n ) : null}\n \n\n \n \n \n \n \n {missed ? (\n // After a cash out the plane's trail shows what was left on the\n // table while it flies on; it clears at the crash so a finished\n // graph doesn't keep a stray line behind the result.\n \n ) : null}\n \n\n {marker ? (\n \n {reduce ? null : (\n // The player bails out: a parachute opens at the cash point and\n // drifts down, swaying, before it fades.\n \n \n \n \n \n )}\n {/* The badge in the readout names the value; the curve marks where. */}\n \n \n ) : null}\n\n \n {crashed && !reduce ? (\n \n \n {SHREDS.map((shred) => (\n \n ))}\n \n ) : null}\n {/* Screen-space fall on the outside, the plane's bank inside it. */}\n \n \n \n \n \n {crashed ? (\n // Where the flight ended, left behind once the plane has fallen, so\n // a finished graph still says how far it got.\n \n \n \n \n ) : null}\n \n \n );\n}\n\n// The crashed plane tumbles and drops out of the sky, accelerating.\nconst TUMBLE: Transition = { duration: 0.6, ease: EASE_IN, opacity: { duration: 0.6, times: [0, 0.6, 1] } };\n\n// Paper shreds thrown out by the crash, spread round the head and pulled\n// down a little, as if by gravity. Fixed, so every crash is the same shape.\nconst SHREDS = Array.from({ length: 7 }, (_, i) => {\n const angle = ((-160 + i * 50 + (i % 2) * 14) * Math.PI) / 180;\n const reach = 20 + (i % 3) * 8;\n return {\n id: i,\n x: Math.cos(angle) * reach,\n y: Math.sin(angle) * reach + 12,\n spin: (i % 2 ? 1 : -1) * (140 + i * 30),\n };\n});\n\n// Speed field points, scattered over the plot by fixed strides.\nconst PLOT_H = H - PAD.top - PAD.bottom;\nconst FAR = Array.from({ length: 22 }, (_, i) => ({ id: i, x: (i * 97.3) % W, y: PAD.top + ((i * 53.7) % PLOT_H) }));\nconst NEAR = Array.from({ length: 9 }, (_, i) => ({ id: i, x: (i * 151.9) % W, y: PAD.top + 8 + ((i * 71.3) % (PLOT_H - 16)) }));\n\n/** A folded paper plane, nose to the right, about 26 units long. */\nfunction PaperPlane() {\n return (\n \n \n \n \n \n );\n}\n\n/**\n * The round's flight in miniature, on its own axes so a skip to a huge crash\n * still reads: the curve replays up to your cash out, runs on dashed to the\n * crash, and ends in a cross; a missed target is a dashed line above.\n */\nfunction MiniFlight({\n crash,\n cashed,\n target,\n reduce,\n}: CrashMiniatureProps) {\n const top = Math.max(crash, target ?? 1, 1.01);\n const end = timeAt(top);\n const x = (seconds: number) => 4 + (seconds / end) * (MINI.width - 8);\n const y = (value: number) => MINI.height - 4 - ((value - 1) / (top - 1)) * (MINI.height - 8);\n const path = (from: number, to: number) => {\n let d = \"\";\n for (let i = 0; i <= 24; i++) {\n const s = from + ((to - from) * i) / 24;\n d += `${i === 0 ? \"M\" : \"L\"}${x(s).toFixed(2)},${y(growth(s)).toFixed(2)}`;\n }\n return d;\n };\n const crashT = timeAt(crash);\n const cashT = cashed === null ? null : timeAt(cashed);\n const draw = (delay: number) => ({\n initial: { pathLength: reduce ? 1 : 0 },\n animate: { pathLength: 1 },\n transition: { ...MINI_REPLAY, delay: reduce ? 0 : delay },\n });\n return (\n \n \n {target !== null ? (\n \n ) : null}\n {cashT === null ? (\n \n ) : (\n <>\n \n \n \n \n )}\n \n \n );\n}\n"},{"path":"components/motion/crash/crash-parts.tsx","type":"util","content":"\"use client\";\n\n// Pieces every Crash design shares, so each design only draws its stage.\n\nimport { Check, History as HistoryIcon, Volume2, VolumeX, X } from \"lucide-react\";\nimport { AnimatePresence, motion, type Transition } from \"motion/react\";\nimport { memo, type ReactNode, type Ref, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { ActionSwapCascadeIcon } from \"@/components/motion/action-swap-cascade\";\nimport { Button } from \"@/components/motion/button\";\nimport { NumberTicker } from \"@/components/motion/number-ticker\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/motion/select\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { EASE_IN_OUT, EASE_OUT, SPRING_LAYOUT } from \"@/lib/ease\";\nimport { PresenceGate, type PresenceGateRenderProps } from \"@/lib/presence-gate\";\nimport { cn } from \"@/lib/utils\";\nimport {\n type CrashGame,\n EXIT,\n formatMultiplier,\n formatShort,\n growth,\n heat,\n PULSE,\n SHAKE,\n SWAP,\n useStable,\n} from \"./use-crash-game\";\n\n/**\n * Primary for small text: a shade darker on light surfaces and lighter on\n * dark ones, so 10-12px labels keep 4.5:1. Large text and marks use plain\n * primary.\n */\nexport const PRIMARY_TEXT =\n \"text-[color:color-mix(in_oklab,var(--color-primary)_75%,black)] dark:text-[color:color-mix(in_oklab,var(--color-primary)_80%,white)]\";\n\n// Readout and history colours per heat: neutral, then primary, then amber.\nconst HEAT_TEXT = {\n cool: \"text-foreground\",\n warm: \"text-primary\",\n hot: \"text-amber-700 dark:text-amber-400\",\n} as const;\nconst HEAT_PILL = {\n cool: \"bg-foreground/5 text-muted-foreground\",\n warm: `bg-primary/10 ${PRIMARY_TEXT}`,\n hot: \"bg-amber-500/15 text-amber-700 dark:text-amber-400\",\n} as const;\n\n/** The width of the viewBox an SVG stage draws in. */\nexport const STAGE_W = 400;\n/**\n * SVG stage labels: 10px on screen however narrow the card. A viewBox scales\n * its text with the stage, so the shell sets --crash-label in viewBox units.\n * The server render has no width to go on and draws them at 10 units.\n */\nexport const STAGE_LABEL = \"text-[length:var(--crash-label,10px)]\";\n\n/**\n * The frame every design sits in: one card holding the recent rounds and\n * sound, the stage with the readout pinned top left, and the controls. Each\n * design draws only its stage, which must keep the top-left corner clear.\n */\nexport function CrashShell({\n game,\n \"aria-label\": ariaLabel,\n className,\n children,\n miniature,\n}: {\n game: CrashGame;\n \"aria-label\": string;\n className?: string;\n children: ReactNode;\n /** The design's own replay of the round on the result ticket. */\n miniature?: (props: CrashMiniatureProps) => ReactNode;\n}) {\n const mainRef = useRef(null);\n const stageRef = useRef(null);\n // Written straight to the style, so a resize doesn't re-render the game.\n useLayoutEffect(() => {\n const node = stageRef.current;\n if (!node) return;\n const measure = () => {\n const width = node.clientWidth;\n if (width > 0) node.style.setProperty(\"--crash-label\", `${Math.max(10, (10 * STAGE_W) / width)}px`);\n };\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n // The ticket opens per round once the crash has played; tapping the stage\n // or Escape puts it away, and the next round clears it.\n const [openRound, setOpenRound] = useState(null);\n const resultShown = game.crashed && openRound === game.round;\n const { crashed, round } = game;\n // Read when the round ends, so a reduced-motion change can't reopen a closed ticket.\n const ticketDelay = useStable(() => (game.reduce ? 0.15 : TICKET_DELAY) * 1000);\n useEffect(() => {\n if (!crashed) return;\n // A timer, not an animation callback, so a cut-short animation can't keep it shut.\n // Focus stays where it is: nothing focusable sits under the ticket, and\n // the main button, which now says Play again, kept focus through the round.\n const id = setTimeout(() => setOpenRound(round), ticketDelay());\n return () => clearTimeout(id);\n }, [crashed, round, ticketDelay]);\n const closeResult = () => {\n setOpenRound(null);\n mainRef.current?.focus();\n };\n\n return (\n {\n if (event.key !== \"Escape\" || !resultShown) return;\n // An open Auto menu takes this Escape (it listens on window, after us).\n if (event.target instanceof Element && event.target.closest('[role=\"listbox\"],[aria-expanded=\"true\"]')) return;\n // Escape is used up here; an enclosing dialog must not close too.\n event.stopPropagation();\n closeResult();\n }}\n >\n {/* 24px card corners = 12px stage and control corners + 12px padding. */}\n
\n
\n \n {/* The game changes every frame; these take only what they show, so they skip those renders. */}\n \n \n
\n {/* A 10:7 stage in every design, so switching between them never\n jumps. A container: its width also fixes its height. */}\n
\n {children}\n
\n \n {/* Smaller on narrow stages, so the readout leaves the design room. */}\n span]:origin-left\" />\n \n
\n \n {resultShown ? (\n \n {({ gate }) => }\n \n ) : null}\n \n
\n \n
\n \n \n );\n}\n\n// The ticket rises once each design's crash (tumble, pop, topple: 0.6s to\n// 0.75s) has mostly played, the same receipt Mines ends on: a stub notched at a\n// dashed tear line, the outcome above, the round's figures and a miniature\n// of the flight below.\nconst TICKET_DELAY = 0.7;\n// Rises with a little settle (a rare, end-of-round moment), leaves quickly.\nconst CARD_IN = { type: \"spring\", duration: 0.4, bounce: 0.15 } as const;\nconst CARD_OUT = { duration: 0.15, ease: EASE_OUT } as const;\n// Inside, chunks arrive in reading order, then the flight replays.\nconst CHUNK = { duration: 0.25, ease: EASE_OUT } as const;\n// The tear line sits this far down; the side notches are cut there.\nconst TEAR = 104;\n// A drop-shadow on the ticket's wrapper: the notch mask would clip a\n// box-shadow on the ticket itself.\nconst TICKET_SHADOW = \"[filter:drop-shadow(0_1px_1px_rgb(0_0_0/0.12))_drop-shadow(0_12px_16px_rgb(0_0_0/0.3))]\";\nconst NOTCH_MASK = `radial-gradient(circle 9px at 0 ${TEAR}px, transparent 98%, black), radial-gradient(circle 9px at 100% ${TEAR}px, transparent 98%, black)`;\n\n/**\n * The end-of-round receipt over a dimmed stage. It has no buttons: the main\n * action already says Play again, and tapping the stage (or Escape) puts it\n * away to look at the flight.\n */\nfunction ResultTicket({\n game,\n gate,\n onClose,\n miniature,\n}: {\n game: CrashGame;\n gate: PresenceGateRenderProps[\"gate\"];\n onClose: () => void;\n miniature?: (props: CrashMiniatureProps) => ReactNode;\n}) {\n const { reduce } = game;\n return (\n <>\n \n
\n \n \n \n
\n \n );\n}\n\nfunction Chunk({ delay, reduce, className, children }: { delay: number; reduce: boolean; className?: string; children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nfunction Ticket({ game, miniature }: { game: CrashGame; miniature?: (props: CrashMiniatureProps) => ReactNode }) {\n const { cashed, multiplier: crash, roundAuto, reduce, t } = game;\n const won = cashed !== null;\n return (\n \n \n \n

\n {won ? \"Cashed out\" : \"Crashed\"}\n

\n \n \n

\n {won ? (\n formatMultiplier(value).slice(0, -1)}\n suffix=\"×\"\n startOnView={false}\n duration={0.6}\n stagger={0.05}\n />\n ) : (\n // The multiplier is lost: struck through, as Mines does. A plain\n // span, since a line-through skips the ticker's inline-block digits.\n {formatMultiplier(crash)}\n )}\n

\n \n \n
\n
\n \n
\n \n \n {won && game.fair ? (\n // The built-in round reaches m with a chance of 1 in m, as with\n // Mines' odds; a custom crash point makes no such promise.\n \n ) : won ? (\n \n ) : (\n \n )}\n
\n \n {/* A narrow ticket keeps the figures on one line each and drops the miniature. */}\n {miniature ? (\n \n {miniature({ crash, cashed, cashedT: game.cashedT, target: won ? null : roundAuto, reduce })}\n \n ) : null}\n
\n
\n );\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n return (\n
\n
{label}
\n
{value}
\n
\n );\n}\n\n/** What a design's ticket miniature replays: the round's crash, your cash out and a missed target. */\nexport interface CrashMiniatureProps {\n crash: number;\n cashed: number | null;\n /** Seconds into the flight at the cash out, for designs that count steps. */\n cashedT: number | null;\n /** The auto target, only when the round crashed short of it. */\n target: number | null;\n reduce: boolean;\n}\n\n// The parachute drifting down from a cash out is a once-a-round moment, so it\n// may take its time.\nexport const CHUTE: Transition = {\n y: { duration: 2.2, ease: EASE_OUT },\n rotate: { duration: 2.2, ease: EASE_IN_OUT },\n opacity: { duration: 2.2, times: [0, 0.08, 0.7, 1] },\n};\n\nexport const clamp01 = (value: number) => Math.min(1, Math.max(0, value));\n\n/** Wraps scenery that streams past into a loop `span` long. */\nexport const wrap = (value: number, span: number) => ((value % span) + span) % span;\n\n/** A tick step of 1, 2 or 5 times a power of ten, at least `min`. */\nexport function niceAtLeast(min: number) {\n const power = 10 ** Math.floor(Math.log10(min));\n // toPrecision drops float noise (0.30000000000000004), so steps add up cleanly.\n return Number((([1, 2, 5, 10].find((unit) => unit * power >= min) ?? 10) * power).toPrecision(12));\n}\n\n/** The parachute that opens at a cash out: a scalloped canopy, three lines and the player. */\nexport function Parachute() {\n return (\n \n \n \n \n \n );\n}\n\n/** Every miniature is 88 × 48, like Mines' mini map. */\nexport const MINI = { width: 88, height: 48 } as const;\n// The replay starts once the ticket's figures are in, and draws over 0.6s.\nexport const MINI_REPLAY = { delay: 0.3, duration: 0.6, ease: EASE_OUT } as const;\n\n/** The sound toggle: a quiet 32px icon button in the card's header. */\nconst SoundToggle = memo(function SoundToggle({ on, onToggle }: { on: boolean; onToggle: () => void }) {\n return (\n // aria-label names the button; the tooltip shows the same label on hover\n // and focus. Tooltip's asLabel would hydrate differently from the server.\n \n \n \n {on ? (\n \n ) : (\n \n )}\n \n \n \n );\n});\n\n/** The Auto menu and the main action, in one 40px row with 12px corners. */\nfunction CrashControls({ game, mainRef }: { game: CrashGame; mainRef: Ref }) {\n return (\n
\n \n\n {\n if (event.repeat && event.key === \"Enter\") event.preventDefault();\n }}\n >\n {game.actionLabel}\n {/* Progress toward the auto target, on the same log scale the\n multiplier grows on, so it fills at a steady pace. */}\n {game.running && game.target !== null ? (\n \n ) : null}\n \n
\n );\n}\n\n/** The Auto cash-out menu. */\nconst AutoMenu = memo(function AutoMenu({\n auto,\n options,\n onChange,\n disabled,\n}: {\n auto: number | null;\n options: number[];\n onChange: (value: string) => void;\n disabled: boolean;\n}) {\n return (\n \n );\n});\n\n/** Recent crash points, newest first, sliding in from the left. */\nconst CrashHistory = memo(function CrashHistory({\n history,\n reduce,\n className,\n}: {\n history: CrashGame[\"history\"];\n reduce: boolean;\n className?: string;\n}) {\n return (\n \n \n {history.length === 0 ? (\n \n Recent rounds show here\n \n ) : (\n history.map((entry) => (\n \n {formatMultiplier(entry.value)}\n \n ))\n )}\n \n \n );\n});\n\n/**\n * The live multiplier, warming as it climbs, that becomes the result at the\n * crash: red and shaking on a loss, your cash out in primary on a win.\n */\nfunction CrashMultiplier({ game, className }: { game: CrashGame; className?: string }) {\n const { lost, crashed, cashed, reduce, pulse, round } = game;\n // After a crash you cashed out of, the number that counts is yours.\n const final = crashed && cashed !== null;\n return (\n \n {/* Remounts per milestone for a quick swell, and once more when the\n crash hands the readout your cash out, which blurs in. */}\n 0\n ? { scale: 1.08 }\n : false\n }\n animate={{ opacity: 1, scale: 1, filter: \"blur(0px)\" }}\n transition={final ? SWAP : PULSE}\n >\n {formatMultiplier(final ? cashed : game.multiplier)}\n \n \n );\n}\n\n/**\n * The line under the multiplier: a hint before and during the flight, a\n * solid badge from the cash out until the crash, then the round's context.\n */\nfunction CrashStatus({ game, className }: { game: CrashGame; className?: string }) {\n const { cashed, crashed, status, reduce } = game;\n return (\n
\n \n {cashed !== null && !crashed ? (\n \n \n Cashed out {formatMultiplier(cashed)}\n \n ) : (\n \n {status}\n \n )}\n \n
\n );\n}\n\n/**\n * The small uppercase state label: Ready, In flight, then the result:\n * Cashed out with a check, or Crashed with a cross.\n */\nfunction CrashEyebrow({ game, className }: { game: CrashGame; className?: string }) {\n const { lost, crashed, running, cashed, reduce } = game;\n const icon = crashed ? (lost ? \"lost\" : \"won\") : running && cashed === null ? \"live\" : null;\n return (\n \n \n {icon ? (\n \n {icon === \"live\" ? (\n \n ) : icon === \"won\" ? (\n \n ) : (\n \n )}\n \n ) : null}\n \n {game.eyebrow}\n

\n );\n}\n\n/** The polite live region for starts, milestones, cash outs and crashes. */\nfunction CrashAnnouncer({ game }: { game: CrashGame }) {\n return (\n

\n {game.announcement}\n

\n );\n}\n"},{"path":"components/motion/crash/use-crash-game.ts","type":"util","content":"\"use client\";\n\nimport { useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { createGameSounds, type GameSounds } from \"@/lib/game-sounds\";\n\n// The game every Crash design shares: the clock, the crash point, cashing out,\n// milestones, history, sound and announcements. A design only draws it.\n\nexport interface CrashProps {\n /** Multiplier to cash out at automatically (controlled), or null for manual play. Applies from the next round. */\n autoCashOut?: number | null;\n /** Initial auto cash-out when uncontrolled. Default null (off). */\n defaultAutoCashOut?: number | null;\n /** Called when the Auto menu changes between rounds. */\n onAutoCashOutChange?: (autoCashOut: number | null) => void;\n /**\n * Decides each round's crash point, called once when the round starts.\n * Return a number, or a Promise for one (a server round, a provably fair\n * hash): the main button shows Starting… until it settles, and a rejection\n * returns to Start. Values below 1 or not finite become 1, and values are\n * floored to two decimals. Default `crashPoint()`. Ignored when `crashAt`\n * is passed.\n */\n getCrashPoint?: () => number | Promise;\n /**\n * Live rounds (controlled), for a server that keeps the crash point secret\n * until it happens: the round `onStart` was given and its crash point once\n * revealed, or null. A round flies open-ended until its own crash point\n * arrives; a value for any other round is ignored, so a reveal from last\n * round can't end this one. A value at or below the current multiplier\n * crashes at once, at that value, and a cash out above it never happened:\n * the round ends lost and `onCashOut` is not called. A value still ahead\n * means the display is behind the server: the flight runs out to it\n * quickly and takes no more hand cash outs (an auto target below it still\n * pays). Whether a round is live is fixed when it starts; dropping\n * `crashAt` mid-round ends it at the current multiplier.\n */\n crashAt?: CrashReveal | null;\n /** Called when the player starts a round, before its crash point is known, with the round's number (unique on the page). */\n onStart?: (round: number) => void;\n /**\n * Called when the player cashes out, by hand or automatically. In a live\n * round it waits until the crash point is revealed, so it only fires for a\n * cash out that stands.\n */\n onCashOut?: (multiplier: number) => void;\n /** Called when the round crashes, with the cash-out multiplier or null if the player was still in. */\n onCrash?: (crashPoint: number, cashedOut: number | null) => void;\n /** Play synthesized sounds (controlled): a climbing chime at each milestone (2× to 5×, then 10×, 20×, 50×…), a cash-out arpeggio and a crash blast. */\n sound?: boolean;\n /** Initial sound state when uncontrolled. Default false. */\n defaultSound?: boolean;\n /** Called when the sound button is toggled. */\n onSoundChange?: (sound: boolean) => void;\n /** Accessible name for the game. Default \"Crash\". */\n \"aria-label\"?: string;\n className?: string;\n}\n\nexport type CrashPhase = \"idle\" | \"starting\" | \"running\" | \"crashed\";\n\n/** A live round's crash point, tagged with the round `onStart` was given. */\nexport interface CrashReveal {\n round: number;\n value: number;\n}\n\n// The multiplier grows exponentially: 2× after 5.8s, 10× after 19s.\nexport const GROWTH = 0.12;\nexport const growth = (seconds: number) => Math.exp(GROWTH * seconds);\nexport const timeAt = (multiplier: number) => Math.log(multiplier) / GROWTH;\nconst MAX_CRASH = 1_000_000;\n// The highest multiplier a round can show: a passed crash point settles no\n// higher, and an open live round stops climbing here (about 32 minutes in)\n// rather than overflowing to Infinity.\nconst CEILING = 1e100;\n\n/**\n * A crash point from one uniform draw in [0, 1): the round reaches `m` with\n * probability (1 − houseEdge) / m, floored to two decimals and capped at\n * 1,000,000×. The default edge of 0 is a fair game. Pass your own `random`\n * for a seeded or provably fair round, for example the first 52 bits of a\n * round's HMAC-SHA256: `crashPoint(() => parseInt(hash.slice(0, 13), 16) / 2 ** 52, 0.01)`.\n */\nexport function crashPoint(random: () => number = Math.random, houseEdge = 0) {\n const edge = Math.min(Math.max(houseEdge, 0), 1);\n return Math.min(MAX_CRASH, Math.max(1, Math.floor((100 * (1 - edge)) / (1 - random())) / 100));\n}\n\n/**\n * A passed crash point as the game plays it: at least 1 and floored to two\n * decimals, the way crash games display them. The round ends on exactly the\n * caller's value up to the 1e100 ceiling; `crashPoint()` caps at 1,000,000.\n * Anything not finite plays as 1.\n */\nconst settle = (point: number) => {\n if (!Number.isFinite(point)) return 1;\n return Math.max(1, floor2(Math.min(point, CEILING)));\n};\n\n/**\n * Multipliers announced (and chimed) while the player is in: 2× to 5×, then\n * 10×, 20×, 50×, 100× and on, so a long flight stays quiet enough to follow.\n */\nexport function milestone(index: number) {\n if (index < 4) return index + 2;\n return [10, 20, 50][(index - 4) % 3] * 10 ** Math.floor((index - 4) / 3);\n}\n\n// Auto cash-out targets offered in the menu, after Off.\nexport const AUTO_STEPS = [1.5, 2, 3, 5, 10, 25, 100];\n\n// Skipping after a cash out runs the rest of the flight in at most this long.\nconst SKIP_TIME = 0.8;\n// Presses this soon after a start, a cash-out press or a crash are the same\n// press repeated (a double tap, a mash), not the next action (ms).\nconst PRESS_GUARD = 400;\n// Round numbers, unique on the page, so a live reveal kept by the parent\n// across a remount can't match a fresh round.\nlet rounds = 0;\nconst HISTORY = 12;\n\n// Motion shared by every design.\n// A loss shakes the readout once, quickly; a burst spreads from the crash.\nexport const SHAKE = { duration: 0.3, ease: EASE_OUT } as const;\nexport const BURST = { duration: 0.45, ease: EASE_OUT } as const;\n// Status lines and markers swap on a spring with no bounce.\nexport const SWAP = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\n// A milestone swells the readout and lets it settle with a little give.\nexport const PULSE = { type: \"spring\", duration: 0.35, bounce: 0.3 } as const;\n// Exits are shorter than entrances.\nexport const EXIT = { duration: 0.12, ease: EASE_OUT } as const;\n\nexport function useCrashGame({\n autoCashOut: autoProp,\n defaultAutoCashOut = null,\n onAutoCashOutChange,\n getCrashPoint,\n crashAt,\n onStart,\n onCashOut,\n onCrash,\n sound,\n defaultSound = false,\n onSoundChange,\n}: Omit) {\n // Live rounds: the crash point arrives through `crashAt` while flying.\n const live = crashAt !== undefined;\n const reduce = useReducedMotion() ?? false;\n const [internalAuto, setInternalAuto] = useState(defaultAutoCashOut);\n const rawAuto = autoProp === undefined ? internalAuto : autoProp;\n const auto = rawAuto === null || !Number.isFinite(rawAuto) ? null : Math.max(1.01, floor2(rawAuto));\n const [phase, setPhase] = useState(\"idle\");\n const [round, setRound] = useState(0);\n const [elapsed, setElapsed] = useState(0);\n const [cashed, setCashed] = useState(null);\n // Seconds into the flight at the cash out. The value is floored to two\n // decimals, so a design that counts steps (Tower's blocks) needs the time.\n const [cashedT, setCashedT] = useState(null);\n const [crashedAt, setCrashedAt] = useState(null);\n const [history, setHistory] = useState<{ id: number; value: number }[]>([]);\n const [announcement, setAnnouncement] = useState(\"\");\n // Counts milestones passed this round; each one pulses the readout.\n const [pulse, setPulse] = useState(0);\n // The auto target locked in when the round started.\n const [roundAuto, setRoundAuto] = useState(null);\n // The flight lives in a ref so each frame can read and advance it. The\n // crash point stays out of state until it is reached. `milestone` indexes\n // the next multiplier to announce. `pressTime` is the last take-off,\n // cash-out press or crash, in performance.now() ms. `held` is a live cash out waiting on\n // the crash point before `onCashOut` hears of it.\n const flight = useRef({\n round: 0,\n live: false,\n t: 0,\n rate: 1,\n crash: 1,\n auto: null as number | null,\n milestone: 0,\n pressTime: Number.NEGATIVE_INFINITY,\n held: false,\n });\n const cashedRef = useRef(null);\n // A round is in progress from Start until it crashes or fails to start. A\n // ref, not render state: two clicks in one frame both see the old phase,\n // so a second start would ask for a second crash point (a second server\n // round), and a click landing just after the crash frame would cash out a\n // round that has already ended.\n const busy = useRef(false);\n // Drops a crash point that settles after unmount. Set in the effect body\n // as well as cleared in its cleanup, so StrictMode's dev remount turns it\n // back on.\n const alive = useRef(true);\n useEffect(() => {\n alive.current = true;\n return () => {\n alive.current = false;\n };\n }, []);\n\n const [internalSound, setInternalSound] = useState(defaultSound);\n const soundOn = sound ?? internalSound;\n const player = useRef(null);\n const getPlayer = () => {\n if (!player.current) player.current = createGameSounds();\n return player.current;\n };\n useEffect(\n () => () => {\n player.current?.dispose();\n player.current = null;\n },\n [],\n );\n\n const running = phase === \"running\";\n const starting = phase === \"starting\";\n const crashed = phase === \"crashed\";\n // Unknown only in a live round the server hasn't ended yet. From the\n // round's own mode, which a prop change mid-round doesn't move.\n const roundLive = flight.current.live;\n const crashKnown = !roundLive || crashAt?.round === round;\n // A live round the server has ended while the display catches up.\n const overtaken = running && roundLive && crashKnown;\n const t = crashed && crashedAt !== null ? timeAt(crashedAt) : elapsed;\n const multiplier = crashed && crashedAt !== null ? crashedAt : floor2(growth(t));\n\n const cashOut = (value: number, time: number) => {\n if (!busy.current || cashedRef.current !== null) return;\n cashedRef.current = value;\n setCashed(value);\n setCashedT(time);\n setAnnouncement(`Cashed out at ${formatMultiplier(value)}.`);\n if (soundOn) getPlayer().cashOut();\n // A live cash out stands only if the crash point turns out above it.\n if (Number.isFinite(flight.current.crash)) onCashOut?.(value);\n else flight.current.held = true;\n };\n\n // Takes off once the crash point is settled (Infinity: not yet revealed).\n const fly = (id: number, crash: number) => {\n flight.current = {\n round: id,\n live,\n t: 0,\n rate: 1,\n crash,\n auto,\n milestone: 0,\n // Kept from start(): an async crash point can take a while, and the\n // first tap after it lands is a real cash out.\n pressTime: flight.current.pressTime,\n held: false,\n };\n setPhase(\"running\");\n setAnnouncement(auto === null ? \"Round started.\" : `Round started. Auto cash out at ${formatMultiplier(auto)}.`);\n };\n\n const start = () => {\n // From the ref, not render state: two clicks in one frame both see the\n // old phase, and a second start would ask for a second crash point (a\n // second server round).\n if (busy.current) return;\n busy.current = true;\n rounds += 1;\n const id = rounds;\n // Before any state changes: if it throws, the round never began and the\n // last one's result stays as it was.\n try {\n onStart?.(id);\n } catch (error) {\n busy.current = false;\n throw error;\n }\n // The guard against a double tap on Start cashing out at once.\n flight.current.pressTime = performance.now();\n cashedRef.current = null;\n setCashed(null);\n setCashedT(null);\n setCrashedAt(null);\n setElapsed(0);\n setPulse(0);\n setRoundAuto(auto);\n setRound(id);\n if (soundOn) getPlayer().prepare();\n if (live) {\n fly(id, Number.POSITIVE_INFINITY);\n return;\n }\n let point: number | Promise;\n try {\n point = getCrashPoint ? getCrashPoint() : crashPoint();\n } catch {\n point = Promise.reject();\n }\n if (typeof point === \"number\") {\n fly(id, settle(point));\n return;\n }\n setPhase(\"starting\");\n setAnnouncement(\"Starting round.\");\n // Promise.resolve: a plain-JS caller may hand back something else.\n Promise.resolve(point).then(\n (value) => {\n if (alive.current) fly(id, settle(value));\n },\n () => {\n if (!alive.current) return;\n busy.current = false;\n setPhase(\"idle\");\n setAnnouncement(\"The round couldn't start. Try again.\");\n },\n );\n };\n\n // Runs the rest of the flight quickly; reduced motion jumps to the crash.\n // A live round still waiting on its crash point can't be run out.\n const skip = () => {\n const f = flight.current;\n if (!Number.isFinite(f.crash)) return;\n f.rate = reduce ? 1e9 : Math.max(1, (timeAt(f.crash) - f.t) / SKIP_TIME);\n };\n\n const onFrame = useStable((dt: number) => {\n // The round already ended: a frame booked before a throwing onCrash.\n if (!busy.current) return false;\n const f = flight.current;\n const wasIn = cashedRef.current === null;\n // A live round's crash point lands whenever the server reveals it; one\n // already behind the plane crashes at once, at that value. One ahead is\n // a display running late: the server has crashed, so the flight runs\n // out to it like a skip.\n if (f.live && !Number.isFinite(f.crash) && crashAt?.round === f.round) {\n f.crash = settle(crashAt.value);\n f.rate = reduce ? 1e9 : Math.max(1, (timeAt(f.crash) - f.t) / SKIP_TIME);\n // The server's crash came before the player's cash out: it never\n // happened, so the round is lost after all.\n if (cashedRef.current !== null && cashedRef.current > f.crash) {\n cashedRef.current = null;\n setCashed(null);\n setCashedT(null);\n f.held = false;\n }\n }\n // The live round lost its crash point source mid-flight: nothing can\n // end it any more, so it ends here. A held cash out was never confirmed\n // by the server, so it doesn't stand.\n if (f.live && !live && !Number.isFinite(f.crash)) {\n f.crash = settle(growth(f.t));\n if (f.held) {\n f.held = false;\n cashedRef.current = null;\n setCashed(null);\n setCashedT(null);\n }\n }\n // A held live cash out stands now the crash point is known.\n if (f.held && Number.isFinite(f.crash) && cashedRef.current !== null) {\n f.held = false;\n onCashOut?.(cashedRef.current);\n }\n const end = timeAt(f.crash);\n f.t = Math.min(end, f.t + dt * f.rate, timeAt(CEILING));\n const value = growth(f.t);\n if (cashedRef.current === null) {\n // A target at or below the crash point always pays, at the target. The\n // crash check covers a target equal to the crash point.\n if (f.auto !== null && f.auto <= f.crash && (value >= f.auto || f.t >= end)) cashOut(f.auto, timeAt(f.auto));\n // Finite: an open live round that runs for hours overflows to Infinity.\n // Not during a live run-out: the round is already decided.\n else if (f.rate === 1 && f.t < end && Number.isFinite(value) && value >= milestone(f.milestone)) {\n // A long frame can cross several; only the last is told.\n while (value >= milestone(f.milestone + 1)) f.milestone++;\n setAnnouncement(formatShort(milestone(f.milestone)));\n setPulse((count) => count + 1);\n f.milestone++;\n if (soundOn) getPlayer().gem(f.milestone);\n }\n }\n if (f.t < end) {\n setElapsed(f.t);\n return true;\n }\n busy.current = false;\n f.pressTime = performance.now();\n setCrashedAt(f.crash);\n setPhase(\"crashed\");\n setHistory((current) => [{ id: f.round, value: f.crash }, ...current].slice(0, HISTORY));\n setAnnouncement(\n cashedRef.current === null\n ? `Crashed at ${formatMultiplier(f.crash)}. The round is lost.`\n : // A cash out on this same frame (a target at the crash point, a\n // long frame) would otherwise never be heard.\n `${wasIn ? `Cashed out at ${formatMultiplier(cashedRef.current)}. ` : \"\"}Crashed at ${formatMultiplier(f.crash)}.`,\n );\n if (soundOn) getPlayer().mine();\n onCrash?.(f.crash, cashedRef.current);\n return false;\n });\n\n useEffect(() => {\n if (phase !== \"running\") return;\n let last = performance.now();\n // performance.now(), not the frame timestamp, so both ends share one clock.\n let id = requestAnimationFrame(function step() {\n const now = performance.now();\n const dt = Math.max(0, now - last) / 1000;\n last = now;\n // The next frame is booked first, so a consumer callback that throws\n // can't stall a running round; the crash cancels it.\n id = requestAnimationFrame(step);\n if (!onFrame(dt)) cancelAnimationFrame(id);\n });\n return () => cancelAnimationFrame(id);\n }, [phase, onFrame]);\n\n // Stable, so the menu and sound button can skip the 60fps re-renders.\n const setAuto = useStable((value: string) => {\n const next = value === \"off\" ? null : Number(value);\n if (autoProp === undefined) setInternalAuto(next);\n onAutoCashOutChange?.(next);\n });\n // A custom target from the prop gets its own option, so the menu can show it.\n const autoOptions = useMemo(\n () => (auto === null || AUTO_STEPS.includes(auto) ? AUTO_STEPS : [...AUTO_STEPS, auto].sort((a, b) => a - b)),\n [auto],\n );\n\n const toggleSound = useStable(() => {\n const next = !soundOn;\n if (next) getPlayer().prepare();\n if (sound === undefined) setInternalSound(next);\n onSoundChange?.(next);\n });\n\n /** Start, cash out or skip, whichever the round is ready for. */\n const act = () => {\n const now = performance.now();\n // A double tap on Start mustn't cash out at 1.01×, nor a mashed cash out\n // skip or start the next round. An auto cash out doesn't count as a\n // press, so it can be skipped at once.\n if (starting || now - flight.current.pressTime < PRESS_GUARD) return;\n if (!running) start();\n else if (cashedRef.current === null) {\n // The server already ended this live round; the display is catching\n // up. `overtaken` covers the frame before onFrame takes the reveal.\n if (overtaken || (flight.current.live && Number.isFinite(flight.current.crash))) return;\n flight.current.pressTime = now;\n cashOut(floor2(growth(flight.current.t)), flight.current.t);\n } else skip();\n };\n const actionLabel = starting\n ? \"Starting…\"\n : running\n ? cashed === null\n ? overtaken\n ? \"Crashing…\"\n : `Cash out ${formatMultiplier(multiplier)}`\n : crashKnown\n ? \"Skip to crash\"\n : \"Waiting for crash\"\n : crashed\n ? \"Play again\"\n : \"Start\";\n /** The main action can't act right now: the crash point is still coming, or a live round is already over. */\n const actionBusy = starting || (running && cashed !== null && !crashKnown) || (overtaken && cashed === null);\n\n // Red is kept for a loss: a crash after a cash out is no bad news.\n const lost = crashed && cashed === null;\n // At the end of a round the readout becomes the result: won or lost, the\n // number that counts, and one line of context.\n const eyebrow = lost ? \"Crashed\" : crashed ? \"Cashed out\" : running ? \"In flight\" : starting ? \"Starting\" : \"Ready\";\n // In flight the round's locked target, not a menu change made since.\n const shownAuto = running ? roundAuto : auto;\n const status = crashed\n ? cashed !== null\n ? // Within 10% of the crash is a close call.\n multiplier / cashed < 1.1\n ? `Crashed at ${formatMultiplier(multiplier)}, a close call`\n : `It flew on to ${formatMultiplier(multiplier)}`\n : roundAuto !== null\n ? `Short of your ${formatShort(roundAuto)} target`\n : \"You were still in\"\n : shownAuto !== null\n ? `Auto cash out at ${formatMultiplier(shownAuto)}`\n : running\n ? \"Cash out before it crashes\"\n : \"Start a round\";\n\n // What a design marks ahead of the flight: the auto target until it pays\n // (the menu's choice while idle, the locked one in flight), and the last\n // round's crash point as a faint trace. Both are null when there is none.\n const target = cashed !== null || crashed ? null : running ? roundAuto : auto;\n const ghost = (crashed ? history[1] : history[0])?.value ?? null;\n\n return {\n reduce,\n /** The built-in fair crash point decides the round, so \"1 in m\" odds hold. */\n fair: !live && !getCrashPoint,\n target,\n ghost,\n /** The auto target the current or last round played with. */\n roundAuto,\n phase,\n running,\n starting,\n crashed,\n lost,\n /** A skip is running the rest of the flight out; scenery that streams with t would only flicker. */\n skipping: running && flight.current.rate > 1,\n /** Seconds into the flight, frozen at the crash. */\n t,\n multiplier,\n cashed,\n /** Seconds into the flight at the cash out, or null. */\n cashedT,\n round,\n pulse,\n history,\n auto,\n autoOptions,\n setAuto,\n soundOn,\n toggleSound,\n act,\n actionLabel,\n actionBusy,\n eyebrow,\n status,\n announcement,\n };\n}\n\nexport type CrashGame = ReturnType;\n\n/**\n * A callback with one identity for the component's life that runs the latest\n * render's code. Stands in for useEffectEvent, which needs React 19.2.\n */\nexport function useStable(fn: (...args: A) => R) {\n const ref = useRef(fn);\n useLayoutEffect(() => {\n ref.current = fn;\n });\n return useCallback((...args: A) => ref.current(...args), []);\n}\n\n/**\n * How hot a multiplier reads: cool under 2×, warm to 10×, hot beyond. The\n * readout and the history colour by it, so size reads without the digits.\n */\nexport function heat(multiplier: number) {\n return multiplier >= 10 ? \"hot\" : multiplier >= 2 ? \"warm\" : \"cool\";\n}\n\nexport function floor2(value: number) {\n return Math.floor(value * 100 + 1e-9) / 100;\n}\n\n// Truncated, never rounded up: a 10,960× payout reads 10.9K×, not 11K×.\nconst COMPACT = new Intl.NumberFormat(\"en\", { notation: \"compact\", maximumFractionDigits: 1, roundingMode: \"trunc\" });\n\n/**\n * Large values: compact up to trillions, then scientific (1.4e100), since\n * compact notation stops at T and would print 1e100 as a 100-digit string.\n */\nfunction formatLarge(multiplier: number) {\n if (multiplier < 1e15) return COMPACT.format(multiplier);\n // From toExponential, not log10: 1e100 / 10 ** 100 is 0.999….\n const [mantissa, exponent] = multiplier.toExponential(6).split(\"e\");\n return `${Math.floor(Number(mantissa) * 10) / 10}e${Number(exponent)}`;\n}\n\n/** A multiplier as Crash shows it: 2.50×, or shortened when large (12.5K×, 1.4e20×). */\nexport function formatMultiplier(multiplier: number) {\n return `${multiplier < 10_000 ? multiplier.toFixed(2) : formatLarge(multiplier)}×`;\n}\n\n/** Scale and menu labels: 1.5×, 2×, 1.2K×. */\nexport function formatShort(multiplier: number) {\n return `${multiplier < 1000 ? +multiplier.toFixed(2) : formatLarge(multiplier)}×`;\n}\n"},{"path":"lib/ease.ts","type":"util","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\n/** Accelerating curve for things that fall (a dropped ball, a toppled block). Not for UI entrances. */\nexport const EASE_IN = [0.55, 0, 1, 0.45] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/utils.ts","type":"util","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"},{"path":"components/motion/action-swap-cascade.tsx","type":"util","content":"\"use client\";\n\nimport {\n ActionSwapButton,\n ActionSwapIcon,\n ActionSwapText,\n type ActionSwapButtonProps,\n type ActionSwapIconProps,\n type ActionSwapTextProps,\n} from \"./action-swap\";\n\nexport type {\n ActionSwapButtonSize,\n ActionSwapButtonVariant,\n ActionSwapItem,\n} from \"./action-swap\";\n\nexport type ActionSwapCascadeButtonProps = Omit;\nexport type ActionSwapCascadeTextProps = Omit;\nexport type ActionSwapCascadeIconProps = Omit;\n\nexport function ActionSwapCascadeButton(props: ActionSwapCascadeButtonProps) {\n return ;\n}\n\nexport function ActionSwapCascadeText(props: ActionSwapCascadeTextProps) {\n return ;\n}\n\nexport function ActionSwapCascadeIcon(props: ActionSwapCascadeIconProps) {\n return ;\n}\n"},{"path":"components/motion/button/index.tsx","type":"util","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { MetallicButtonProps } from \"./metallic\";\nexport { MetallicButton } from \"./metallic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n"},{"path":"components/motion/number-ticker.tsx","type":"util","content":"\"use client\";\n\nimport { animate, motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NumberTickerProps {\n value: number;\n /** Digits to pad to (left). */\n pad?: number;\n /**\n * Fraction digits to keep. The value is rounded to this many places before\n * `format` runs (default 0, whole numbers).\n */\n decimals?: number;\n /** Per-digit roll duration in seconds. */\n duration?: number;\n /** Stagger between digits. */\n stagger?: number;\n /** Render only after the element enters the viewport. */\n startOnView?: boolean;\n prefix?: string;\n suffix?: string;\n /** Add a small blur during digit rolls. */\n blur?: boolean;\n className?: string;\n digitClassName?: string;\n /** Insert locale group separators (commas). Server-component safe. */\n locale?: boolean;\n /** Custom formatter. Client-only — server components must use `locale` instead. */\n format?: (value: number) => string;\n}\n\nconst DIGIT_HEIGHT_EM = 1.1;\nconst DIGITS = Array.from({ length: 10 }, (_, n) => n);\n\nexport function NumberTicker({\n value,\n pad,\n decimals = 0,\n duration = 0.9,\n stagger = 0.04,\n startOnView = true,\n prefix,\n suffix,\n blur = false,\n className,\n digitClassName,\n locale,\n format,\n}: NumberTickerProps) {\n const containerRef = useRef(null);\n const inView = useInView(containerRef, { once: true, amount: 0.6 });\n const [armed, setArmed] = useState(!startOnView);\n\n useEffect(() => {\n if (startOnView && inView) setArmed(true);\n }, [startOnView, inView]);\n\n const text = useMemo(() => {\n const places = Math.max(0, Math.floor(decimals));\n const factor = 10 ** places;\n const rounded = Math.round(value * factor) / factor;\n const formatted = format\n ? format(rounded)\n : locale\n ? rounded.toLocaleString(undefined, {\n minimumFractionDigits: places,\n maximumFractionDigits: places,\n })\n : rounded.toFixed(places);\n return pad ? formatted.padStart(pad, \"0\") : formatted;\n }, [value, pad, decimals, format, locale]);\n const glyphs = useMemo(() => {\n const chars = text.split(\"\");\n // Key by place value (position from the right): a changing digit keeps its\n // identity and rolls to the new value instead of remounting and replaying\n // from 0. Growing numbers add glyphs on the left without re-keying the\n // ones, tens, hundreds already on screen.\n return chars.map((char, i) => ({ char, id: `g-${chars.length - 1 - i}` }));\n }, [text]);\n const readableText = `${prefix ?? \"\"}${text}${suffix ?? \"\"}`;\n\n // Stagger is an entrance flourish. Once the reveal has played, value\n // changes roll every digit immediately — a per-digit delay on live updates\n // reads as lag.\n const [entered, setEntered] = useState(false);\n useEffect(() => {\n if (!armed || entered) return;\n const total = (duration + glyphs.length * stagger) * 1000;\n const t = window.setTimeout(() => setEntered(true), total);\n return () => window.clearTimeout(t);\n }, [armed, entered, duration, stagger, glyphs.length]);\n\n return (\n \n {readableText}\n \n {prefix ? {prefix} : null}\n {glyphs.map(({ char, id }, i) => {\n const isDigit = /\\d/.test(char);\n if (!isDigit) {\n return (\n \n {char}\n \n );\n }\n const digit = Number(char);\n return (\n \n );\n })}\n {suffix ? {suffix} : null}\n \n \n );\n}\n\nfunction Digit({\n digit,\n delay,\n duration,\n blur,\n className,\n}: {\n digit: number;\n delay: number;\n duration: number;\n blur: boolean;\n className?: string;\n}) {\n const reduce = useReducedMotion();\n const columnRef = useRef(null);\n\n useEffect(() => {\n if (reduce || !blur || !columnRef.current || !Number.isFinite(digit)) {\n return;\n }\n\n const node = columnRef.current;\n const controls = animate(\n node,\n { filter: [\"blur(10px)\", \"blur(0px)\"] },\n {\n duration: Math.min(duration * 0.75, 0.32),\n delay,\n ease: EASE_OUT,\n },\n );\n\n return () => {\n controls.stop();\n node.style.filter = \"blur(0px)\";\n };\n }, [blur, delay, digit, duration, reduce]);\n\n return (\n // The invisible in-flow digit gives the slot a real text baseline so it\n // lines up with surrounding text; clip-path clips the rolling column\n // without moving that baseline the way overflow: hidden would.\n \n {digit}\n \n {DIGITS.map((n) => (\n \n {n}\n \n ))}\n \n \n );\n}\n"},{"path":"components/motion/select.tsx","type":"util","content":"\"use client\";\n\nimport { Check, ChevronDown } from \"lucide-react\";\nimport {\n animate,\n type MotionValue,\n motion,\n useMotionValue,\n useMotionValueEvent,\n useReducedMotion,\n useTransform,\n type Variants,\n} from \"motion/react\";\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { type ListboxRow, useListbox } from \"@/lib/hooks/use-listbox\";\nimport { cn } from \"@/lib/utils\";\n\n// One progress value drives the surface, gap, corners and chevron. This short\n// spring suits the full reveal distance; each reader clamps its small internal\n// overshoot, so all visible endpoints settle together. Rows share a short\n// reveal so long lists have no late entries.\nconst UNFOLD_SPRING = {\n type: \"spring\",\n visualDuration: 0.2,\n bounce: 0.12,\n} as const;\n// Exits are faster than entrances: the panel folds back on a short ease.\nconst UNFOLD_EXIT = { duration: 0.2, ease: EASE_OUT } as const;\nconst RADIUS = 12;\n// How far the open panel sits from the trigger once it has pulled away.\nconst GAP = 8;\n// The surface starts as a thin lip flush against the trigger's edge.\nconst LIP = 8;\nconst lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n\nconst ITEM_VARIANTS: Variants = {\n // A shared short reveal keeps late rows in long, scrolled lists ready with\n // the surface. Per-index staggering can delay visible rows by over a second.\n hidden: { opacity: 0, y: -4, transition: { duration: 0.08, ease: EASE_OUT } },\n show: { opacity: 1, y: 0, transition: { duration: 0.12, ease: EASE_OUT } },\n};\n\ntype Placement = \"bottom\" | \"top\";\n\ninterface SelectContextValue {\n value: string | undefined;\n open: boolean;\n setOpen: (open: boolean) => void;\n select: (value: string) => void;\n register: (value: string, label: string, disabled: boolean) => void;\n unregister: (value: string) => void;\n labelFor: (value: string | undefined) => string | undefined;\n rows: ListboxRow[];\n /** Closes the panel; focus inside it returns to the trigger. */\n close: () => void;\n reduce: boolean;\n progress: MotionValue;\n triggerId: string;\n listId: string;\n disabled: boolean;\n placement: Placement;\n setPlacement: (p: Placement) => void;\n}\n\nconst SelectContext = createContext(null);\n// The option keyboard focus is on, resolved during render by the content.\nconst ActiveOptionContext = createContext(undefined);\n\nfunction useSelectContext(component: string) {\n const ctx = useContext(SelectContext);\n if (!ctx) throw new Error(`${component} must be used within