Nimbo — Fintech & money transfers

Overview#

Nimbo is a bright, airy template for fintech, payments and money-transfer products. Sky-blue gradients, real cloud footage, frosted-glass cards, a clean sans with a serif accent, and three.js glass coins that make the page feel tactile.

Everything is built on theme tokens, including the 3D coins. Colours and radii live in one place as CSS variables, and every component reads from them, so you can rebrand by editing a few values or switching to the included dusk (violet) or mint (teal) presets with a single attribute.

• Hero: “Send money globally. Instantly. Securely.” over drifting clouds, with three glass cards: an issued card, a wallet portrait with a live balance, and an embedded-payments balance. Glass currency coins float around them, lean with your cursor and rise as you scroll.
• Coin arc: an arc of glass coins ($ € £ ¥ ₹ Ξ ₿) that fans out as it scrolls in. Hover or tap a coin to flip it.
• Full control: a big sky panel where coins spiral upward as you scroll, next to a transfer that tracks itself step by step.
• Savings calculator: deposit inputs, period and savings sliders, a live yearly figure and an animated bar chart.
• Network: an animated payment-routing map with a travelling pulse, a wallet card, and a working currency converter with drifting live rates, fees, a swap button and how much you save versus a bank.
• Also: a testimonials carousel, a parallax “connecting hearts across borders” banner, security cards and an FAQ.

Pages: a four-step send flow (amount, recipient, review with a 30-second rate lock, live delivery tracking) that picks up the amount from the converter, and a pricing page with personal/business and monthly/yearly toggles plus a bank comparison table.

Highlights#

• three.js glass coins with reflections and iridescence: floating in the hero, fanning out in an arc you can flip, and spiralling up on scroll
• Working currency converter with drifting live rates, fees and how much you save versus a bank
• Savings calculator with sliders and an animated chart, plus a four-step send flow with a rate-lock countdown and live tracking
• Theme tokens drive every colour, including the 3D, with dusk and mint presets you switch with one attribute

Screens#

What's included#

• Cloud-video hero with glass coins
• Live wallet cards
• Interactive coin arc
• Full-control panel with coin spiral
• Savings calculator
• Routing map & live converter
• Testimonials carousel
• Connecting-borders banner
• Security cards
• FAQ

Getting started#

1. Install dependencies

   npm install
   

2. Run the dev server

   npm run dev   # http://localhost:5193
   

3. Change the theme

   Edit the tokens at the top of src/app/globals.css, or add data-theme="dusk" or data-theme="mint" to <html> in src/app/layout.tsx.

4. Build the static site

   npm run build   # writes the site to out/
   

Deploying#

npm run build produces a plain static site in out/ that runs on any static host. Rates and the send flow are front-end demos: connect them to your FX feed and payments API.

License & credits#

The cloud video and photos are free Pexels media, resized or re-encoded and credited in the README. Fonts are Geist and Oranienbaum, both free under the SIL Open Font License. Nimbo, its customers, rates and figures are fictional.