coinstack

ui component after plasma

a stack of 3d coins that opens into a list of them, each coin turning once on its way to its row.

  • US DollarUSD
  • EuroEUR
  • British PoundGBP
  • UAE DirhamAED
  • Brazilian RealBRL
  • Japanese YenJPY
  • Swiss FrancCHF
  • Turkish LiraTRY
  • TetherUSDT
  • BitcoinBTC
  • EtherETH
  • USD CoinUSDC
  • SolanaSOL
  • ToncoinTON

states

install

a react component in three files and three.js (npm i three). the 3d part comes as its own chunk after the page; until then, and without webgl, the faces lie flat in their rows.

import { CoinStack } from "./coin-stack"; // brings coin-stack.css; three.js loads when it mounts

const coins = [
  { id: "usd", face: "/coins/usd.svg", name: "US Dollar", detail: "USD" },
  { id: "eur", face: "/coins/eur.svg", name: "Euro", detail: "EUR" },
  { id: "gbp", face: "/coins/gbp.svg", name: "British Pound", detail: "GBP" },
  { id: "aed", face: "/coins/aed.svg", name: "UAE Dirham", detail: "AED" },
];

export function ReceiveCash() {
  return <CoinStack title="Receive cash" subtitle="From a bank account" items={coins} />;
}

MIT

api

itemsid, face, name, detail; face is an image url or svg markup
open · onOpenChangethe list or the stack; leave out to let it keep its own
defaultOpenwhere it starts when it keeps its own
title · subtitlethe head of the card
stackedcoins before the +N plate, 3
sizethe coin's diameter, 40 px
speeda time scale for every motion, 1

input

click the stackopens the list
click the headcloses it again
enter · spacethe same: the head is a button
cursor on the stackthe coins fan out
cursor on a rowits coin turns once; a tap on a phone

notes

after the add money sheet of the plasma wallet (the video by sergei semenov on recent.design). flags and marks are drawn for this page.

with reduced motion the coins don't turn and the stack stands still; the list still opens.

more components

light dialpresenceaura tilesvoice dockpinch calendar