Ledger
A business banking site for a fintech app.
A complete marketing site for a money app, with one signature moment: a glass lens, rendered in three.js, turning slowly in front of three flat bands. The bands are the three pots every payment is split into (tax, bills, your pay), and the same three colours run through the whole site: the split calculator, the account preview, the pots and the 404.
- For
- Fintech app
- Built with
- Next.js 16, TypeScript, Tailwind CSS 4, three.js, Motion, anime.js
- Pages
- 8 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
The 3D moment
A turning glass lens over three flat bands, the tax, bills and pay pots every payment is split into; a payment lands on it and draws into the three pots, and a working split calculator shows the same three colours.
What you get
Straight from the template's README, the same file you will find in the repository.
- Seven pages plus a 404, an error state and a loading state, in light and dark, from 390 px phones to 1440 px desktops.
- The 3D glass lens: lazy loaded, pixel ratio capped at 2, paused off screen and in background tabs, one still frame under reduced motion, and a drawn fallback of the same size that follows light and dark.
- The product in the hero: a payment lands on the glass and its three branches draw into the tax, bills and pay rows (anime.js timeline, played once, shown at once under reduced motion), with proof right under the buttons.
- The card shuffle: a deck of pot cards in the features bento fans, closes and tucks on a calm loop (Motion), with Previous, Pause and Next; it pauses on hover, focus, off screen and in background tabs.
- "Who it's for": working alone and small studio panels, each with a duotone photo and sample figures, plus a short security strip on the home page.
- A working split calculator: type an invoice, set the tax and bills shares, and see the three amounts add up to the cent, with empty and invalid states.
- An account preview built in HTML: balance, three pots with goals, recent payments, an invoice list with filters and an empty state, and a card you can freeze.
- Features bento with drawn product pictures, a customer quote, pricing with a monthly and yearly switch that works without script, plan comparison table, every fee listed, and FAQ.
- Open an account form with inline validation, error summary, loading, success and server error states.
- Security page and starter privacy and terms texts, all marked as samples.
- The full Cardzo engine, using the mint palette and the ledger type pairing (Source Serif 4 and Hanken Grotesk, whose figures are tabular so amounts line up), so you can switch to any of 12 palettes and 7 type pairings.
- Visible focus everywhere, skip link, keyboard tabs, semantic headings, 44 px tap targets, theme switch that remembers your choice without a flash.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Product
- Pricing
- Security
- Open an account
- Privacy
- Terms
- 404
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- three.js
- Motion
- anime.js
What is not included
- No real banking, payments, sign-in or back end: the form, card freeze and invoice filters are front-end only.
- No legal review: the security, privacy and terms texts are starters.
- No social share image (see
IMAGES.md). The two photos are Pixabay demo content.
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
