Fintech UI patterns: balances, budgets and transactions that feel trustworthy

Money interfaces have a different job from most product UI. People open a banking or budgeting app to answer a question quickly ("how much do I have?", "can I afford this?", "did it go through?") and they need to trust the answer. Motion helps when it explains change and confirms actions. It hurts when it decorates. This post walks through the core fintech patterns and how Moveset's fintech set implements each one.

Format money correctly before you animate it

Before any animation, get formatting right. Use Intl.NumberFormat with an explicit currency instead of concatenating symbols, so grouping, decimals and symbol placement follow the user's locale.

const fmt = (n: number, currency = "USD", locale?: string) =>
  new Intl.NumberFormat(locale, { style: "currency", currency }).format(n);

fmt(1234.5);               // "$1,234.50" in en-US
fmt(1234.5, "EUR", "de-DE"); // "1.234,50 €"

Two more rules: never round silently (show cents where the product deals in cents), and store amounts as integers in minor units on the server so floating point never touches a balance.

Pattern 1: the balance that explains its change

When a balance updates, a hard swap of digits forces people to compare two numbers in their head. An odometer roll, where only the digits that changed move, shows the direction and size of the change at a glance. Pair it with a delta chip so the meaning does not depend on noticing the motion.

import { BalanceCard } from "@/components/moveset/balance-card";

<BalanceCard label="Total balance" balance={12480.32} delta={2.4} currency="USD" />

BalanceCard animates each digit on the snappy spring and is available for both web (Motion) and Expo (Reanimated) in the free pack.

Pattern 2: budgets as progress, not just numbers

"You have spent $640 of $800" is accurate; a ring that is four-fifths full is understood instantly. Good budget rings do three things:

• Spring to their value on mount and on change, so updates are noticed.
• Shift colour as the user approaches the limit, rather than only after they cross it.
• Keep the exact numbers visible in the centre for people who want precision.

import { BudgetRing } from "@/components/moveset/budget-ring";

<BudgetRing spent={640} limit={800} label="Groceries" currency="USD" />

On Expo the same component is built with react-native-svg and Reanimated's animated props, so the ring animates on the UI thread.

Pattern 3: transactions you can act on

A transaction list is the screen people scroll most. Make the common actions reachable without opening each row: swipe to archive or flag, with a clear threshold and a spring back if the user lets go early. Always offer a non-gesture path too (a menu or long press) for accessibility.

import { TransactionList, type Tx } from "@/components/moveset/transaction-list";

const items: Tx[] = [
  { id: "1", name: "Bloom Grocers", note: "Card · Today", amount: -48.5, color: "#12B886" },
  { id: "2", name: "Salary", note: "Transfer · Mon", amount: 3200, color: "#3D5BFF" },
];

<TransactionList items={items} />

TransactionList and SwipeActionItem are part of Moveset Pro, for web and Expo.

Pattern 4: sending money with deliberate friction

Most UI tries to remove friction. Sending money is the exception: a little deliberate friction prevents expensive mistakes. Useful techniques:

• A custom keypad with large targets, so amounts are entered precisely on mobile.
• A gentle shake when an amount exceeds the available limit, paired with a text explanation.
• Hold to send, which turns a single accidental tap into a short, intentional press.

Moveset's SendMoney combines all three, and PaymentSuccess closes the loop with a drawn check mark and a count-up of the amount, so the confirmation is unmistakable.

import { SendMoney } from "@/components/moveset/send-money";

<SendMoney to="Grace H." max={2500} onSend={(amount) => api.transfer(amount)} />

What not to animate

• Don't animate legal text, fees or exchange rates in ways that make them harder to read.
• Don't loop attention-grabbing motion on balances; motion should mean "this changed".
• Don't delay a confirmation for the sake of an animation. Show the result immediately and let the motion play alongside it.

Wrap-up

Fintech motion is about clarity: show what changed, how much, and that an action worked. Start with the free BalanceCard and BudgetRing, then add swipe actions and send flows where your product needs them.