Wallet Balance
AI Pass+payment
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Payment component
About Wallet Balance
A private-banking wallet card on ledger paper: an engraved serif balance with privacy masking, a weekly trend chip, accented quick actions, a categorized transaction feed, and a flip-coin dark mode switcher — fully token-driven and design-system agnostic.
Features
- Engraved serif total balance with an animated count-up on first render
- Privacy masking toggle that hides the balance and trend, persisted via
localStorage - Weekly trend chip showing a signed delta with an arrow glyph
- Emerald quick-action row (Add money, Exchange, Send, More) with icon buttons
- Categorized transaction feed with solid colored category glyphs and signed amounts
- Flip-coin dark mode switcher with the choice persisted across reloads
- Honors
prefers-reduced-motion— count-up and row animations collapse
Accessibility
- ARIA labels
- All icon buttons carry descriptive
aria-labelvalues - Toggle state
- Privacy button uses
aria-pressed; coin switch usesrole="switch"witharia-checked - Decorative icons
- SVG glyphs and category discs marked
aria-hidden="true" - Landmark regions
- Transaction feed and actions use labeled
section/ulregions - Reduced motion
prefers-reduced-motion: reducedisables count-up and row animations
Customise it with AI
Open Wallet Balance in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the payment is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Flip Card
ReactVanilla
A 3D flip credit card. The front shows an embossed number, an EMV chip, a contactless glyph and duo-tone network marks; clicking or pressing Enter rotates it on the Y axis to reveal the magnetic stripe, an Allura signature panel and the CCV.
#payment#flip#3d
Transfer Calculator
VanillaReact
A currency transfer calculator with live cross-rate conversion, a currency picker listbox, fee breakdown, bank-comparison savings, and a drifting exchange rate — fully token-driven and design-system agnostic.
#payment
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
Outlined Toasts
VanillaReact
A grid of eight outlined toast notifications — each a light-tinted card with a 1.5px coloured outline, a 24px line icon, a short message, and a smoothly filling progress bar. One toast spins a loader; one carries an inline link. Fully token-driven and design-system agnostic.
#toast#notification
Radio Group
VanillaReact
A token-driven card-style radio group where selecting a card highlights it with a check indicator, built on native radios for inherent arrow-key navigation.
#checkbox#radio#cards
Pill Pagination
VanillaReact
A pure CSS pills pagination with rounded items, ellipsis windowing for 9 pages, and keyboard navigation — fully token-driven and design-system agnostic.
#cards#navigation#pagination
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
