18:I[55681,["/_next/static/immutable/chunks/0n1e3sa98ofw1.js","/_next/static/immutable/chunks/2aa8l6xa8bjcj.js","/_next/static/immutable/chunks/0c4p9qqceu2rl.js","/_next/static/immutable/chunks/16aj0v4-rc6zs.js","/_next/static/immutable/chunks/2yyvv0h_26zxx.js"],"default"] 19:T7564,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { animate, hover, press, useReducedMotion } from "motion/react"; import "./balance-card.css"; /* ------------------------------------------------------------------ props -- */ export type BalanceCardProps = { /** Opening balance, always held in USD whatever is on display. */ balance?: number; /** Which currency the card opens on. */ currency?: Currency; /** The four quick amounts, in USD. */ presets?: number[]; /** Synthesised deposit / withdraw cues. */ sound?: boolean; /** * The credit line under the card, with the control that mutes the cues. * Turn it off when you drop the card into your own layout. */ credit?: boolean; /** Fired after a deposit or a withdrawal settles. */ onSettle?: (change: { kind: Drawer; usd: number; balance: number }) => void; }; export type Currency = "USD" | "EUR" | "GBP" | "INR"; type Drawer = "deposit" | "withdraw"; const RATES: Record = { USD: 1, EUR: 0.92, GBP: 0.79, INR: 83.4 }; const SIGN: Record = { USD: "$", EUR: "€", GBP: "£", INR: "₹" }; const CODES = Object.keys(RATES) as Currency[]; const SPRING = { type: "spring", stiffness: 420, damping: 34, mass: 0.9 } as const; const SOFT = { type: "spring", stiffness: 260, damping: 30 } as const; const OUT = [0.16, 1, 0.3, 1] as const; const ROW_H = 38; const fmt = (n: number) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); /* ------------------------------------------------------------------ sound -- */ /** * Every cue is synthesised at play time, so the component ships no audio and * fetches nothing. The context is built lazily because a browser will not let * one start outside a gesture. */ function useSfx(enabled: boolean) { const ref = useRef<{ ctx: AudioContext; master: GainNode } | null>(null); /* read live, so flipping the prop mutes the next cue rather than the next mount */ const on = useRef(enabled); on.current = enabled; const ctx = useCallback(() => { if (!on.current || typeof window === "undefined") return null; const AC = window.AudioContext ?? (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (!AC) return null; if (!ref.current) { const audio = new AC(); const master = audio.createGain(); master.gain.value = 0.9; master.connect(audio.destination); ref.current = { ctx: audio, master }; } if (ref.current.ctx.state === "suspended") void ref.current.ctx.resume(); return ref.current; }, []); useEffect(() => () => void ref.current?.ctx.close().catch(() => {}), []); return useRef({ tone(t0: number, freq: number, dur: number, o: { type?: OscillatorType; gain?: number; to?: number } = {}) { const engine = ctx(); if (!engine) return; const osc = engine.ctx.createOscillator(); const gain = engine.ctx.createGain(); osc.type = o.type ?? "triangle"; osc.frequency.setValueAtTime(freq, t0); if (o.to) osc.frequency.exponentialRampToValueAtTime(o.to, t0 + dur); gain.gain.setValueAtTime(0.0001, t0); gain.gain.exponentialRampToValueAtTime(o.gain ?? 0.18, t0 + 0.012); gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur); osc.connect(gain).connect(engine.master); osc.start(t0); osc.stop(t0 + dur + 0.03); }, /* short filtered noise — the drawer clack of a till, the rustle of notes */ noise(t0: number, dur: number, o: { gain?: number; freq?: number; q?: number } = {}) { const engine = ctx(); if (!engine) return; const len = Math.max(1, Math.floor(engine.ctx.sampleRate * dur)); const buffer = engine.ctx.createBuffer(1, len, engine.ctx.sampleRate); const data = buffer.getChannelData(0); for (let i = 0; i < len; i += 1) data[i] = (Math.random() * 2 - 1) * (1 - i / len) ** 2; const src = engine.ctx.createBufferSource(); src.buffer = buffer; const band = engine.ctx.createBiquadFilter(); band.type = "bandpass"; band.frequency.value = o.freq ?? 3200; band.Q.value = o.q ?? 1.1; const gain = engine.ctx.createGain(); gain.gain.value = o.gain ?? 0.12; src.connect(band).connect(gain).connect(engine.master); src.start(t0); }, now() { return ctx()?.ctx.currentTime ?? 0; }, }).current; } /* -------------------------------------------------------------- component -- */ /** * An animated balance card: a counting figure, a gooey currency selector, and * a drawer that takes a deposit or a withdrawal. * * Nothing here is stored twice. The balance is held once, in USD, and the * figure on screen, the preset amounts and the toast are all read back out of * it through the current rate — so a currency swap cannot leave two numbers * disagreeing about what the account holds. */ export default function BalanceCard({ balance = 3400089.23, currency: initialCurrency = "USD", presets = [500, 1000, 5000, 25000], sound = true, credit = true, onSettle, }: BalanceCardProps) { const reduced = useReducedMotion(); /* the speaker in the credit line turns the cues off without unmounting them */ const [audible, setAudible] = useState(sound); const sfx = useSfx(sound && audible && !reduced); const gooId = useId().replace(/:/g, ""); const [currency, setCurrency] = useState(initialCurrency); const [menuOpen, setMenuOpen] = useState(false); const [drawer, setDrawer] = useState(null); const [picked, setPicked] = useState(null); const [busy, setBusy] = useState(false); const [blobIndex, setBlobIndex] = useState(CODES.indexOf(initialCurrency)); /* the account, in USD — the single source every figure is derived from */ const baseRef = useRef(balance); /* what the counter is showing right now, so the next count starts from it */ const shownRef = useRef(0); const rootRef = useRef(null); const cardRef = useRef(null); const glowRef = useRef(null); const amountRef = useRef(null); const signRef = useRef(null); const labelRef = useRef(null); const chevRef = useRef(null); const menuRef = useRef(null); const headRef = useRef(null); const tailRef = useRef(null); const arrowRef = useRef(null); const pctRef = useRef(null); const drawerRef = useRef(null); const drawerInnerRef = useRef(null); const withdrawRef = useRef(null); const toastRef = useRef(null); const toastTextRef = useRef(null); const toastTimer = useRef | undefined>(undefined); /* the drawer starts shut in CSS, so the first render has nothing to close */ const openedOnce = useRef(false); const rate = RATES[currency]; const converted = useCallback(() => baseRef.current * RATES[currency], [currency]); /* --- the counter ------------------------------------------------------- */ const countTo = useCallback( (target: number, duration = 1.1) => { const from = shownRef.current; shownRef.current = target; const el = amountRef.current; if (!el) return; if (reduced) { el.textContent = fmt(target); return; } animate(from, target, { duration, ease: OUT, onUpdate: (v) => { el.textContent = fmt(v); }, }); /* the final figure lands even if rAF was throttled part-way through */ setTimeout(() => { if (shownRef.current === target) el.textContent = fmt(target); }, duration * 1000 + 120); }, [reduced], ); /* a quick vertical swap on a text node — the write is on a timer rather than an animation promise, so the copy is right even in a backgrounded tab */ const swapText = useCallback( (el: HTMLElement | null, write: () => void) => { if (!el) return; if (reduced) { write(); return; } animate(el, { y: [0, -14], opacity: [1, 0] }, { duration: 0.16, ease: "easeIn" }); setTimeout(() => { write(); animate(el, { y: [14, 0], opacity: [0, 1] }, SPRING); }, 160); }, [reduced], ); /* --- trend chip -------------------------------------------------------- */ const pulseChip = useCallback(() => { if (reduced || !arrowRef.current || !pctRef.current) return; const pct = pctRef.current; animate(arrowRef.current, { y: [6, -3, 0], opacity: [0, 1, 1] }, { duration: 0.7, ease: [0.22, 1, 0.36, 1] }); animate(0, 13, { duration: 0.8, ease: "easeOut", onUpdate: (v) => { pct.textContent = String(Math.round(v)); }, }); }, [reduced]); /* --- entrance ---------------------------------------------------------- */ useEffect(() => { const card = cardRef.current; const root = rootRef.current; if (!card || !root) return; const rows = Array.from(root.querySelectorAll("[data-rise]")); if (reduced) { card.style.opacity = "1"; rows.forEach((el) => { el.style.opacity = "1"; }); shownRef.current = converted(); if (amountRef.current) amountRef.current.textContent = fmt(converted()); if (pctRef.current) pctRef.current.textContent = "13"; return; } animate(card, { opacity: [0, 1], y: [26, 0], scale: [0.965, 1] }, { ...SOFT, stiffness: 200, damping: 26 }); rows.forEach((el, i) => { el.style.opacity = "0"; animate(el, { opacity: [0, 1], y: [16, 0] }, { ...SPRING, delay: 0.12 + i * 0.07 }); }); const count = setTimeout(() => countTo(converted(), 1.5), 280); const chip = setTimeout(() => pulseChip(), 900); /* a card opened in a background tab never gets frames — settle it anyway */ const settle = setTimeout(() => { card.style.opacity = "1"; rows.forEach((el) => { if (Number.parseFloat(getComputedStyle(el).opacity) < 0.99) { el.style.opacity = "1"; el.style.transform = "none"; } }); }, 1600); return () => { clearTimeout(count); clearTimeout(chip); clearTimeout(settle); }; // the entrance plays once, on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /* --- pointer glow ------------------------------------------------------ */ useEffect(() => { const card = cardRef.current; const glow = glowRef.current; if (!card || !glow || reduced) return; const move = (e: PointerEvent) => { const box = card.getBoundingClientRect(); card.style.setProperty("--pbal-mx", `${e.clientX - box.left}px`); card.style.setProperty("--pbal-my", `${e.clientY - box.top}px`); }; card.addEventListener("pointermove", move); const stop = hover(card, () => { animate(glow, { opacity: 1 }, { duration: 0.35 }); return () => animate(glow, { opacity: 0 }, { duration: 0.45 }); }); return () => { card.removeEventListener("pointermove", move); stop(); }; }, [reduced]); /* --- hover / press physics on every control ---------------------------- */ useEffect(() => { const root = rootRef.current; if (!root || reduced) return; const stops = Array.from(root.querySelectorAll("[data-springy]")).flatMap((el) => { const lift = Number(el.dataset.springy) || 1.03; return [ hover(el, () => { animate(el, { scale: lift }, SPRING); return () => animate(el, { scale: 1 }, SPRING); }), press(el, () => { animate(el, { scale: 0.955 }, { type: "spring", stiffness: 700, damping: 30 }); return () => animate(el, { scale: 1 }, { type: "spring", stiffness: 500, damping: 18 }); }), ]; }); return () => stops.forEach((stop) => stop()); }, [reduced, drawer]); /* --- currency menu ------------------------------------------------------ */ const moveBlob = useCallback( (index: number) => { setBlobIndex(index); const y = index * ROW_H; if (!headRef.current || !tailRef.current) return; if (reduced) { headRef.current.style.transform = `translateY(${y}px)`; tailRef.current.style.transform = `translateY(${y}px)`; return; } /* the head snaps and the tail trails, so the blur reads as one liquid */ animate(headRef.current, { y, scaleY: [1.16, 1], scaleX: [0.94, 1] }, SPRING); animate(tailRef.current, { y }, { type: "spring", stiffness: 170, damping: 20 }); }, [reduced], ); /* * The open flag is mirrored into a ref so that closing can decide whether * there is anything to close without reading it back out of a state updater. * Animations are side effects, and React is free to run an updater twice — * under StrictMode in development it always does — which fired every close * animation twice from the same click. */ const menuOpenRef = useRef(false); menuOpenRef.current = menuOpen; const closeMenu = useCallback(() => { if (!menuOpenRef.current) return; menuOpenRef.current = false; setMenuOpen(false); if (chevRef.current) animate(chevRef.current, { rotate: 0 }, reduced ? { duration: 0 } : SPRING); const blobs = [headRef.current, tailRef.current].filter(Boolean) as HTMLElement[]; if (blobs.length) animate(blobs, { opacity: 0 }, { duration: reduced ? 0 : 0.15 }); if (menuRef.current) { animate( menuRef.current, { opacity: 0, y: -8, scale: 0.92 }, reduced ? { duration: 0 } : { duration: 0.18, ease: "easeIn" }, ); } }, [reduced]); const openMenu = useCallback(() => { if (menuOpenRef.current) return; menuOpenRef.current = true; setMenuOpen(true); const index = CODES.indexOf(currency); setBlobIndex(index); if (headRef.current) headRef.current.style.transform = `translateY(${index * ROW_H}px)`; if (tailRef.current) tailRef.current.style.transform = `translateY(${index * ROW_H}px)`; const quick = reduced ? { duration: 0 } : SPRING; if (chevRef.current) animate(chevRef.current, { rotate: 180 }, quick); if (menuRef.current) animate(menuRef.current, { opacity: [0, 1], y: [-10, 0], scale: [0.9, 1] }, quick); const blobs = [headRef.current, tailRef.current].filter(Boolean) as HTMLElement[]; if (blobs.length) animate(blobs, { opacity: [0, 1] }, { duration: reduced ? 0 : 0.22 }); if (reduced || !menuRef.current) return; menuRef.current.querySelectorAll("[data-row]").forEach((row, i) => { animate(row, { opacity: [0, 1], x: [10, 0] }, { ...SPRING, delay: 0.04 + i * 0.035 }); }); }, [currency, menuOpen, reduced]); /* close on a click outside, or on Escape */ useEffect(() => { if (!menuOpen) return; const away = (e: MouseEvent) => { if (!menuRef.current?.contains(e.target as Node)) closeMenu(); }; const key = (e: KeyboardEvent) => { if (e.key === "Escape") { closeMenu(); setDrawer(null); } }; document.addEventListener("click", away); document.addEventListener("keydown", key); return () => { document.removeEventListener("click", away); document.removeEventListener("keydown", key); }; }, [menuOpen, closeMenu]); function selectCurrency(code: Currency) { moveBlob(CODES.indexOf(code)); setCurrency(code); swapText(labelRef.current, () => { if (labelRef.current) labelRef.current.textContent = code; }); if (signRef.current) signRef.current.textContent = SIGN[code]; const next = baseRef.current * RATES[code]; swapText(amountRef.current, () => { shownRef.current = next; if (amountRef.current) amountRef.current.textContent = fmt(next); }); setPicked(null); setTimeout(closeMenu, 160); } /* --- drawer ------------------------------------------------------------ */ /* the drawer is measured every time rather than remembered: the preset row reflows with the currency, so a stored height would be wrong after a swap */ useEffect(() => { const box = drawerRef.current; const inner = drawerInnerRef.current; if (!box || !inner) return; /* * On the very first run there is nothing to close: the drawer is already * shut in the stylesheet. Animating it from its natural height down to zero * here would show it open for a frame and then snap it away. */ if (!drawer && !openedOnce.current) { box.style.height = "0px"; return; } if (drawer) openedOnce.current = true; const to = drawer ? inner.offsetHeight : 0; if (reduced) { box.style.height = drawer ? "auto" : "0px"; return; } if (drawer) { animate(box, { height: [box.offsetHeight, to] }, { ...SOFT, stiffness: 240 }); animate(inner, { opacity: [0, 1], y: [-12, 0] }, SPRING); } else { box.style.height = `${inner.offsetHeight}px`; animate(inner, { opacity: 0, y: -8 }, { duration: 0.16 }); animate(box, { height: 0 }, { ...SOFT, stiffness: 300 }); } /* the drawer lands on its resting height whether or not frames ever ran */ const settle = setTimeout(() => { box.getAnimations().forEach((a) => a.cancel()); box.style.height = drawer ? "auto" : "0px"; if (drawer) { inner.style.opacity = "1"; inner.style.transform = "none"; } }, 700); return () => clearTimeout(settle); }, [drawer, currency, reduced]); function tick() { sfx.tone(sfx.now(), 880, 0.05, { type: "sine", gain: 0.05 }); } function openDrawer(kind: Drawer) { closeMenu(); tick(); setPicked(null); setDrawer((current) => (current === kind ? null : kind)); } function pickAmount(usd: number, el: HTMLButtonElement) { setPicked(usd); tick(); if (reduced) return; animate(el, { scale: [0.9, 1.06, 1] }, { duration: 0.34, ease: [0.22, 1, 0.36, 1] }); } /* --- confirm ----------------------------------------------------------- */ function showToast(text: string) { clearTimeout(toastTimer.current); if (toastTextRef.current) toastTextRef.current.textContent = text; const toast = toastRef.current; if (!toast) return; /* being up is a resting state; the rise is dressing on top of it */ toast.style.opacity = "1"; if (!reduced) animate(toast, { opacity: [0, 1], y: [18, 0], scale: [0.94, 1] }, SPRING); toastTimer.current = setTimeout(() => { toast.style.opacity = "0"; if (!reduced) animate(toast, { opacity: 0, y: 10 }, { duration: 0.3 }); }, 2200); } useEffect(() => () => clearTimeout(toastTimer.current), []); async function confirm() { if (busy || picked == null || !drawer) return; const kind = drawer; const usd = picked; setBusy(true); await new Promise((resolve) => setTimeout(resolve, reduced ? 0 : 780)); if (kind === "withdraw") { baseRef.current = Math.max(0, baseRef.current - usd); if (!reduced && cardRef.current) animate(cardRef.current, { x: [0, -5, 5, -3, 0] }, { duration: 0.4 }); /* a till: drawer clack, two bells, a soft thump behind them */ const t = sfx.now(); sfx.noise(t, 0.05, { gain: 0.14, freq: 2600, q: 0.7 }); sfx.tone(t + 0.01, 180, 0.16, { type: "sine", gain: 0.14, to: 90 }); sfx.tone(t + 0.05, 1318.5, 0.55, { gain: 0.16 }); sfx.tone(t + 0.09, 1760, 0.5, { gain: 0.12 }); sfx.tone(t + 0.09, 2637, 0.34, { type: "sine", gain: 0.05 }); sfx.noise(t + 0.34, 0.22, { gain: 0.035, freq: 1400, q: 0.6 }); } else { baseRef.current += usd; /* coins dropping in: a bright ascending arpeggio */ const t = sfx.now(); sfx.noise(t, 0.07, { gain: 0.05, freq: 5200, q: 0.8 }); [523.25, 659.25, 783.99, 1046.5].forEach((f, i) => sfx.tone(t + i * 0.065, f, 0.34 - i * 0.04, { gain: 0.15 })); sfx.tone(t + 0.26, 2093, 0.3, { type: "sine", gain: 0.05 }); } countTo(baseRef.current * rate, 0.9); if (!reduced && amountRef.current) { animate(amountRef.current, { scale: [1, 1.045, 1] }, { duration: 0.5, ease: [0.22, 1, 0.36, 1] }); } setBusy(false); setDrawer(null); showToast(`${kind === "withdraw" ? "Withdrew" : "Deposited"} ${SIGN[currency]}${fmt(usd * rate)}`); onSettle?.({ kind, usd, balance: baseRef.current }); } /* a ripple where the pointer landed on the accent button */ function ripple(e: React.PointerEvent) { const btn = withdrawRef.current; if (!btn || reduced) return; const box = btn.getBoundingClientRect(); const dot = document.createElement("span"); dot.className = "pbal__ripple"; dot.style.left = `${e.clientX - box.left}px`; dot.style.top = `${e.clientY - box.top}px`; btn.appendChild(dot); animate(dot, { scale: [1, 26], opacity: [0.5, 0] }, { duration: 0.65, ease: "easeOut" }).then(() => dot.remove()); } /* --- render ------------------------------------------------------------ */ return (

{/* the liquid filter the currency list rides on */}

Current Balance

{SIGN[initialCurrency]} 0.00

Choose an amount to {drawer === "withdraw" ? "withdraw" : "deposit"}

{presets.map((usd) => { const value = usd * rate; return ( ); })}

Done

{credit && (

Inspiration from{" "} pinterest.com

)}

); } 1a:T2492,/* =========================================================================== Balance Card --------------------------------------------------------------------------- Every value the component needs is a token on the root element, so a copy of this file can be retuned without touching the markup. The component ships its own dark palette on purpose: it is a card, not a page, and it should look the same wherever it is dropped. =========================================================================== */ .pbal { --pbal-card: #070707; --pbal-chip: #2b2b2b; --pbal-soft: #242424; --pbal-accent: #0a84ff; --pbal-up: #31d158; --pbal-sheet: #141414; --pbal-well: #111111; position: relative; width: 100%; max-width: 400px; /* the balance is sized in `cqw`, so the card must be its own query container */ container-type: inline-size; font-family: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #ffffff; text-align: left; } .pbal *, .pbal *::before, .pbal *::after { box-sizing: border-box; } /* * `:where()` carries no specificity, so this reset sits *below* the component's * own class rules instead of above them. Written as a bare `.pbal button` it * would outrank every single-class rule in this file and quietly strip the type * off the controls that set their own. */ .pbal :where(button) { margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pbal :focus-visible { outline: 2px solid var(--pbal-accent); outline-offset: 3px; border-radius: 999px; } /* the figures must not reflow as they count */ .pbal__tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- the card ------------------------------------------------------------ */ /* * The measurements come off the reference art, scaled to the card's own 400px * width: 400 × 243 overall, a 37px corner, and the rhythm below it. */ .pbal__card { position: relative; padding: 26px 22px 22px; border-radius: 37px; background: var(--pbal-card); box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.5); } /* a soft light that follows the pointer across the card */ .pbal__glow { position: absolute; inset: -1px; overflow: hidden; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient( 320px circle at var(--pbal-mx, 50%) var(--pbal-my, 0%), rgb(10 132 255 / 0.16), transparent 60% ); } .pbal__inner { position: relative; } .pbal__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pbal__label { margin: 0; font-size: 16px; font-weight: 500; line-height: 1; color: rgb(255 255 255 / 0.4); } .pbal__amount { display: flex; align-items: baseline; margin: 8px 0 0; /* fluid, so it never collides with the currency pill on a narrow card */ font-size: clamp(24px, 8.5cqw, 34px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .pbal__sign { margin-right: 2px; } /* --- currency selector ---------------------------------------------------- */ .pbal__currency { position: relative; flex: 0 0 auto; } .pbal__currencyBtn { display: flex; align-items: center; gap: 9px; padding: 13px 25px 13px 21px; border-radius: 999px; background: #ffffff; font-size: 17px; font-weight: 700; /* a button's own `normal` leading would make the pill four pixels too tall */ line-height: 1; color: #000000; } .pbal__chev { width: 19px; height: 19px; } .pbal__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 140px; transform-origin: top right; opacity: 0; pointer-events: none; } .pbal__sheet { position: relative; padding: 6px; border-radius: 18px; background: var(--pbal-sheet); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 12px 28px -12px rgb(0 0 0 / 0.7); } /* * The liquid layer. Two white pills sit under the rows and are blurred into a * single shape by the SVG filter; the head snaps to the hovered row while the * tail lags behind, so the two stretch apart and pull back together. The rows * ride on top un-blurred. */ .pbal__goo { position: absolute; inset: 6px; z-index: 0; pointer-events: none; filter: url(#pbal-goo); } .pbal__blob { position: absolute; left: 0; width: 100%; height: 38px; border-radius: 999px; background: #ffffff; opacity: 0; } .pbal__list { position: relative; z-index: 10; margin: 0; padding: 0; list-style: none; } .pbal__row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #ffffff; transition: color 0.2s ease; } .pbal__row--on { color: #000000; } .pbal__rowSign { font-size: 12px; font-weight: 600; opacity: 0.45; } /* --- trend chip ----------------------------------------------------------- */ .pbal__chipRow { margin-top: 20px; } .pbal__chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--pbal-chip); } .pbal__arrow { width: 14px; height: 14px; color: var(--pbal-up); } .pbal__pct { font-size: 13px; font-weight: 700; line-height: 1; color: var(--pbal-up); } .pbal__since { font-size: 13px; font-weight: 500; line-height: 1; color: rgb(255 255 255 / 0.9); } /* --- actions -------------------------------------------------------------- */ .pbal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; } .pbal__action { padding: 22px 0; border-radius: 999px; background: var(--pbal-soft); font-size: 18px; font-weight: 700; line-height: 1; color: #ffffff; } .pbal__action--accent { position: relative; overflow: hidden; background: var(--pbal-accent); } .pbal__ripple { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: rgb(255 255 255 / 0.3); pointer-events: none; } /* --- drawer --------------------------------------------------------------- */ .pbal__drawer { height: 0; overflow: hidden; } .pbal__drawerInner { padding-top: 14px; } .pbal__well { padding: 12px; border-radius: 20px; background: var(--pbal-well); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); } .pbal__wellTitle { margin: 0; padding: 0 4px; font-size: 12px; font-weight: 500; color: rgb(255 255 255 / 0.45); } .pbal__presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; } .pbal__preset { padding: 10px 0; border-radius: 12px; background: var(--pbal-soft); font-size: 12px; font-weight: 700; color: rgb(255 255 255 / 0.85); transition: background-color 0.2s ease, color 0.2s ease; } .pbal__preset--on { background: #ffffff; color: #000000; } .pbal__confirmRow { display: flex; gap: 8px; margin-top: 10px; } .pbal__cancel { flex: 1; padding: 10px 0; border-radius: 999px; background: var(--pbal-soft); font-size: 13px; font-weight: 700; color: rgb(255 255 255 / 0.7); } .pbal__confirm { flex: 1.6; padding: 10px 0; border-radius: 999px; background: #ffffff; font-size: 13px; font-weight: 700; color: #000000; } .pbal__confirm:disabled { opacity: 0.35; cursor: default; } /* --- toast ---------------------------------------------------------------- */ .pbal__toast { position: absolute; inset-inline: 0; bottom: 16px; z-index: 30; display: flex; justify-content: center; opacity: 0; pointer-events: none; } .pbal__toastBody { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #ffffff; font-size: 13px; font-weight: 700; color: #000000; box-shadow: 0 10px 22px -12px rgb(0 0 0 / 0.8); } .pbal__toastTick { width: 14px; height: 14px; } /* the filter host never draws anything itself */ .pbal__defs { position: absolute; width: 0; height: 0; } /* --- the credit line ------------------------------------------------------ */ .pbal__credit { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } .pbal__creditText { margin: 0; font-size: 12px; line-height: 1; color: rgb(255 255 255 / 0.35); } .pbal__creditLink { font-weight: 500; color: rgb(255 255 255 / 0.7); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.2s ease; } .pbal__sfx { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: rgb(255 255 255 / 0.35); transition: background-color 0.2s ease, color 0.2s ease; } .pbal__sfx svg { display: block; width: 14px; height: 14px; } @media (hover: hover) { .pbal__creditLink:hover { color: #ffffff; text-decoration-color: rgb(255 255 255 / 0.7); } .pbal__sfx:hover { background: rgb(255 255 255 / 0.05); color: rgb(255 255 255 / 0.7); } } @media (prefers-reduced-motion: reduce) { .pbal__glow { display: none; } } 10:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Balance Card — Pin UI\",\"description\":\"A counting balance, a liquid currency selector and a drawer that settles. The balance is held once, in USD. The figure on screen, the preset amounts and the toast are all derived from it through the current rate, so a currency swap can never leave two numbers disagreeing about what the account holds\",\"url\":\"https://pinui.xyz/components/balance-card\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://pinui.xyz/#components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Balance Card\",\"item\":\"https://pinui.xyz/components/balance-card\"}]}"}}]],["$","$L18",null,{"entry":{"slug":"balance-card","name":"Balance Card","tagline":"A counting balance, a liquid currency selector and a drawer that settles.","blurb":"The balance is held once, in USD. The figure on screen, the preset amounts and the toast are all derived from it through the current rate, so a currency swap can never leave two numbers disagreeing about what the account holds. The selector's blobs are two pills blurred into one by an SVG filter: the head snaps to the row and the tail trails after it.","highlights":["Gooey selection list","Counter that never skips","Synthesised cues","Pointer-tracked glow"],"clip":"/clips/balance-card.mp4","posterTime":15,"zoom":1.25,"stage":"#232323","usage":"import BalanceCard from \"@/components/library/BalanceCard\";\n\n","props":[{"name":"balance","type":"number","fallback":"3400089.23","note":"Opening balance, always held in USD whatever is on display."},{"name":"currency","type":"\"USD\" | \"EUR\" | \"GBP\" | \"INR\"","fallback":"\"USD\"","note":"Which currency the card opens on."},{"name":"presets","type":"number[]","fallback":"[500, 1000, 5000, 25000]","note":"The four quick amounts, in USD."},{"name":"sound","type":"boolean","fallback":"true","note":"Deposit and withdraw cues, synthesised at play time."},{"name":"credit","type":"boolean","fallback":"true","note":"The credit line under the card, with the control that mutes the cues."},{"name":"onSettle","type":"(change) => void","note":"Fired once a deposit or withdrawal has landed."}],"files":[{"name":"BalanceCard.tsx","lang":"tsx"},{"name":"balance-card.css","lang":"css"}],"info":{"paragraphs":["The balance is held once, in USD. The figure on screen, the four preset amounts and the toast are all derived from it through the current rate, so switching currency can never leave two numbers disagreeing about what the account holds.","The currency list is the part worth stealing. Two white pills sit under the rows and are blurred into a single shape by an SVG filter; the head snaps to the row under the cursor while the tail lags behind, so the two stretch apart and pull back together like something liquid. Deposit and withdraw open the same drawer, and every cue — the till, the coins, the tick — is synthesised at play time, so the component ships no audio and fetches nothing."],"pin":"https://in.pinterest.com/pin/1056657131344579045/"},"origin":{"label":"Balance-Card","href":"https://github.com/Rachit315/Balance-Card"}},"panes":[{"name":"BalanceCard.tsx","lang":"tsx","code":"$19"},{"name":"balance-card.css","lang":"css","code":"$1a"}],"registryUrl":"https://pinui.xyz/r/balance-card.json"}]]

Balance Card — Pin UI Component

$0.00