074
AI ready

Fintech Template

£10

A five-page fintech website template: a home page with a live running total and account dashboard, payments with a tap demo, pricing with plans and a calculator, customer stories and a sign-up page where a card terminal prints your receipt. Suits payments apps, business banking, invoicing and money SaaS.

ScrollTrigger Lenis advanced
13 more details
scrub3d-transformsvelocity-reactivecount-upclick-togglescrollspyscroll-revealstaggerparallaxrange-inputaccessible-filteringform-animationmouse-follow
Fintech Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Fintech Template template in new tab

About this template

A five-page website for a money product, worked through as Tender: card payments and a business account for independent shops. The brand borrows from thermal paper in a few deliberate places: a raffle-ticket tag heads each page, the last sale prints as a torn stub, the payments page ends on a settlement report, and two card terminals print real receipts.

Read the full template overview

The home page puts the product up front: a running total of today's takings on a rolling odometer, an account card whose weekly chart and next payout follow each sale you ring up, and a business debit card that leans towards the pointer. Below it, one café's day tells the product story beside a live phone, and at the sign-off a handheld card terminal prints an account receipt as you scroll, crosses out the fees, tears it off and stands it on the counter.

Payments lets visitors tap a card, phone or watch on the terminal. Pricing sets out two plans, with a calculator that picks the cheaper plan and a full fee table. Stories filters by kind of business and closes on a case study. Open an account takes a business name and prints it onto a receipt on the terminal. The design re-points to any fintech or SaaS product by changing copy, figures and photographs; currency, locale and rates are plain HTML attributes.

What's included

12 items
  • Five linked pages: home, payments, pricing, stories and open an account, sharing one stylesheet and one script
  • Receipt details used sparingly: ticket tags on page heroes, a torn sale stub, a settlement report and two printing terminals
  • Home hero with a rolling odometer total, an account card whose chart and payout follow each sale, and a tilting business card
  • A sticky day-in-the-life sequence: four timed steps swap the photograph, the app balance and the payment feed
  • A handheld card terminal that prints a receipt line by line on scroll, crosses out fees, tears and lands it on the counter
  • Payments page tap demo: a card, phone or watch taps the terminal, which approves and prints a slip
  • Two plans, a calculator that compares any number of pricing models and names the cheapest, and a full fee table
  • Stories filtered by business type with a live count, plus a before-and-after case study printed as a report
  • Open an account form that validates and prints the visitor's business name on the terminal's receipt (front end only)
  • Currency and locale set once on the body; every formatted amount follows them
  • Thirteen bundled, colour-treated WebP photographs of small businesses taking payments
  • Keyboard and touch access, a mobile menu, reduced-motion and no-JavaScript states on every page

Perfect for

5 use cases
  • Card payments, point-of-sale and payment app landing pages
  • Business bank accounts and neobanks for small businesses
  • Invoicing, accounting and expense-management SaaS
  • Budgeting and personal finance apps
  • Any SaaS product page that sells on clear pricing

How it works

5 sections

Paper where it counts

The receipt pieces are shared CSS rather than images: ticket tags with notched ends for page heroes, and paper slips whose torn edges are separate strips, so shadows still work. They appear only where a receipt is the product's real output, so the rest of the page reads as a clean SaaS site.

Numbers as the display type

The home total is set in a semi-expanded heavy face with tabular figures, and each digit rolls on its own strip when a sale is rung up. The account card's week chart reads each day from an attribute and rescales as today's bar grows, and a polite live region announces each payment.

The printed sign-off

The receipt is ordinary HTML where each child is one printed line. On scroll, a CSS-drawn card terminal feeds it up out of its slot step by step, the paper droops and curls towards the viewer, crossed-out prices are struck in the accent, and the strip tears and settles beside the terminal as the real, selectable receipt. The open page drives the same printer from its form instead of the scroll.

Pages that test the product

The payments terminal runs a short timeline for each kind of tap and prints a slip from the button's attributes. The pricing calculator reads every plan from its own attributes and names the cheapest for the chosen sales. The stories filter hides non-matching cards and announces the count.

Complete without motion

With reduced motion, every control still works but updates instantly, and receipts stand printed above the terminals. Without JavaScript, every figure, step, story, plan and receipt line is already in the page, and the navigation shows as a plain row on phones.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Which businesses can use this fintech template?

It is written as a card payments and business account product, but the five pages suit payment apps, point-of-sale systems, neobanks, invoicing or accounting SaaS, expense cards and budgeting apps, and work as a general multi-page SaaS site. Change the copy, figures and photographs; the odometer, day sequence, calculator, tap demo and printed receipts keep working with your content.

Does the Open an account form create accounts or send anything?

No. It is an unwired static front end. It collects a business type, a business name and an email, validates them, then prints a preview receipt with that name on the terminal and says nothing was sent. Connect it to your real sign-up flow, Formspree, Netlify Forms or your CRM before launch.

How do I change the currency, plans and fees?

Set data-currency and data-locale on each page's body, for example USD and en-US, and every amount the script formats follows them. Each calculator bar reads its rate and monthly fee from attributes, so you can add or remove plans. The plan receipts, fee table and home figures are plain text to edit alongside.

Can I change what the receipts print?

Yes. Each receipt is plain HTML where every direct child is one printed line: centred lines, rows with dotted leaders, rules and a barcode. Wrap any price in a strikethrough tag to have it crossed out in the accent as it prints. The paper length and landing spot are measured from your markup.

How do I add a page or change the navigation?

Copy any page as a starting point: the header, mobile menu and receipt footer are identical on every page, so a new page needs its main content and the aria-current attribute on its own nav link. Every section is initialised separately and skips itself when its markup is missing, so pages can mix sections freely.

Are the photographs and the regulatory copy included?

Thirteen cropped and colour-treated WebP photographs from Pexels are bundled, with credits in the README; the people are stock subjects, not customers. The footer company line, safeguarding copy, ratings and figures are placeholders. Replace them with your own accurate details before launch, as financial claims are regulated in most countries.

Paid template

Purchase to unlock the code.

Buying Fintech Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Upload the folder. The five pages, assets/style.css, assets/script.js (or assets/script.min.js) and assets/img/ are the whole site. Any static host will do.

Page What it is
index.html Home: the hero till and account card, one day at a café, pricing summary, stories, trust, FAQ and the printing terminal
payments.html The tap demo, four ways to take payment, the daily settlement report
pricing.html Two plans, the fee calculator, the fee table and pricing questions
stories.html Stories filtered by kind of business and the Café Linden case study
open.html The Open an account form, which prints its receipt on the terminal

2. Keep each page's <head> in this order:

Code snippet omitted: it ships with the download.

The one-line script must stay synchronous and in <head>. It lets the stylesheet hide reveal targets before the first paint, so nothing flashes visible and then fades out. data-cfasync="false" stops Cloudflare Rocket Loader deferring it.

3. Keep the scripts before </body> on every page:

Code snippet omitted: it ships with the download.

4. Rewrite the copy, the figures and the photographs. Everything else is optional.

Using It With Your Own Design

  • Currency and locale are set on each page's body: <body data-currency="GBP" data-locale="en-GB">. Change them to USD and en-US, EUR and de-DE and so on, and every amount the script formats follows. Amounts typed directly into the HTML (stats, plans, the fee table, the printed receipts) are plain text to edit alongside.
  • Colour is the token block at the top of assets/style.css. See Palette.
  • Type is one family, TikTok Sans, at two widths: normal for reading, semi-expanded 800 for figures. If you swap it, choose a face with a plain zero and tabular figures. A slashed zero turns "£0" into a symbol, and proportional figures make the odometer and the calculator jitter.
  • The receipt look is a few shared classes in the "Receipt system" block of style.css: .ticket (the notched tag on each page hero), .label (its plain sibling for section heads), and the paper slips .stub and .report, whose torn edges are ::before and ::after strips (--zig sets the tooth width). Add a class to those lists to put another element on paper; .tear is a ready-made perforated divider if you want one between sections.
  • Sections are independent. Every section is initialised by its own function that returns early when its markup is missing, so pages can mix, reorder or drop sections without touching the JavaScript.
  • Adding a page: copy any page. The header, mobile menu and footer are identical on every page; set aria-current="page" on the new page's nav link.
  • Buttons are links. Every "Open an account" goes to open.html. Point them at your real sign-up if you do not use that page.

Sections and Configuration

Shared on every page

Part Hook What you can change
Announcement bar .announce Home page only. One link. Delete the paragraph to remove it.
Nav [data-nav] Three page links, Log in and one call to action. Mark the current page with aria-current="page". On phones the links fold into the Menu button's panel ([data-menu-toggle], [data-menu-panel]); Escape and any link close it. Without JavaScript they show as a plain row.
Footer .footer Closing copy and calls to action beside link columns and support contacts.

Home (index.html)

Section Hook What you can change
Hero till [data-till] [data-till-total] is the starting total: its data-value is the number, its text is the no-JavaScript fallback. Each button[data-till-item] adds its data-amount; its first words become the stub's line. One sale rings itself 2.4 seconds after load unless the visitor gets there first; open the page with #still to skip it for screenshots.
Account card [data-dash] Decorative (aria-hidden). Each chart bar's data-v is that day's takings and its inline --h the no-JavaScript height. The bar with data-dash-today follows the till, as does the next payout. [data-dash-balance] starts from its data-value.
Business card [data-bizcard] Plain markup. It leans towards the pointer on desktop only.
Sale stub [data-till-toast] The last sale, printed. A polite live region, so each payment is announced.
One day [data-day] One li[data-day-step] per step. data-photo is the index of the [data-day-photo] image, data-clock the phone's clock, data-balance the balance, and data-feed-title, data-feed-meta, data-feed-amount and data-feed-kind (in, tap or sum) the feed entry that step adds.
Stories, trust, help .stories, .trust, .help Plain markup. The trust band's stamp is decorative lettering from its data-mark attribute.
Sign-off [data-receipt-printer] The printing terminal. See below.

Payments (payments.html)

Section Hook What you can change
Tap demo [data-tapdemo] Each button[data-tap] is card, phone or watch, with data-amount and data-label for the slip it prints. The screen and slip update, and a visually hidden live region announces the approval.
Four ways .way Photo, copy and a spec list per way. .way--flip puts the photo on the right. Images with data-parallax drift gently inside their frame.
Settlement .report Plain text rows. Keep the paid-out total in step with them.

Pricing (pricing.html)

Section Hook What you can change
Plans .plan Plain markup cards. .plan--featured outlines the card and colours the rate.
Calculator [data-fees] One [data-fee-plan] per bar, with data-name, data-rate and data-monthly. Mark the comparison with data-fee-them; the saving is against the cheapest of the rest, and [data-fees-best] names it. The range input's min, max, step and value set the slider.
Fee table .fee-table A real table with a caption. It scrolls sideways inside its card on narrow screens.

Stories (stories.html)

Section Hook What you can change
Filter [data-stories] Each card's data-sector matches a button[data-filter]; all shows everything. The live count is announced.
Case study .case Plain markup; the before and after report uses <s> for the old figures.

Open an account (open.html)

The form ([data-open-form]) validates the business name and email, writes the name and business type onto the receipt ([data-open-name], [data-open-type]) and prints it on the terminal. It is an unwired front end: nothing is sent and no account is created. Replace the submit handler in initOpenForm with a call to your sign-up API, or point the form at Formspree, Netlify Forms or your CRM and remove novalidate and the handler.

The printing receipt

Everything inside article[data-rp-receipt] is the receipt, and every direct child is one printed line:

Code snippet omitted: it ships with the download.

  • .r-row spreads two spans to the edges; add .r-lead and an empty <i> for a dotted leader.
  • Any <s> or <del> is crossed out in the accent as its line leaves the printer. Keep the .r-sr note inside it so screen readers hear that the price is crossed out.
  • Keep lines to about 28 characters: the paper is a narrow thermal roll.

Options on [data-receipt-printer]:

Attribute Default Effect
data-rp-driver scroll manual prints only when a script calls it (the open page) and keeps the stage in the flow
data-rp-runway 2.2 Scroll distance for the whole print, in viewport heights
data-rp-droop 100 How far the long strip leans towards the viewer, in degrees
data-rp-curl 120 How far the free end curls over, in degrees
data-rp-sway 1 Flutter and sway strength with speed, 0 to 2
data-rp-step true false feeds the paper continuously instead of line by line
data-rp-ready Tap to open The terminal screen's status before printing

The terminal screen follows the print: ready, approved and printing, then thanks. The static text in the markup is what shows for reduced motion and without JavaScript. The terminal is a CSS drawing (.tp) sized in em, so the whole rig scales from one font-size on .rp-rig. On wide screens it stands left of centre so the torn receipt lands beside it; on narrow screens it lands in front.

Palette

Open assets/style.css and change the solids in :root together with their matching RGB triples:

Code snippet omitted: it ships with the download.

Translucent rules and dimmed type all resolve from those triples, so nothing is left in the old colour after a repaint. The measured contrast of every text pair is recorded in the :root comment. Two limits matter:

  • Dimmed text never uses opacity. Inactive day steps change colour instead, so every state keeps its ratio. Faint labels are ink at 64% on the ground, 5.2:1.
  • The accent is used as text on the ground (5.6:1) and on the receipt paper (6.5:1). A lighter accent needs rechecking on both. On the dark bands, the lighter --accent-soft takes its place.

Animation and Accessibility

  • Reduced motion: no intro, reveals, odometer roll, parallax, card tilt or printing. The till, calculator, tap demo, filter and form still work and update instantly, and the receipts stand printed above the terminals.
  • No JavaScript or blocked CDN: every page is complete. Every figure is in the markup, the first day step is shown, the receipts stand above the terminals and the phone navigation shows as a plain row.
  • Keyboard and touch: the till, taps and filters are native buttons, the calculator a native range, the business types native radios, the FAQ native disclosure. The mobile menu closes on Escape and returns focus to its button.
  • Screen readers: the odometer is hidden and paired with a visually hidden text total; the sale stub, tap demo, filter and form each announce their result. While a receipt prints, the painted paper is hidden and the real receipt stays in the accessibility tree.
  • Smooth scrolling is optional: add ?smooth=off to the URL to compare, or set data-smooth="off" on <html> to ship without it.

Dependencies

  • GSAP 3.12+ with ScrollTrigger (the demo pins 3.15.0)
  • Lenis 1.1+, optional (the demo pins 1.3.17)
  • Google Fonts: TikTok Sans, Atkinson Hyperlegible Mono, Doto (terminal screens and the trust stamp)

Images and Credits

Thirteen photographs are bundled in assets/img/ as cropped, lightly desaturated WebP derivatives. assets/img-manifest.json records each source, crop and grade. Replace a file with your own at the same name and size, or edit the manifest and regenerate.

All photographs are from Pexels and used under the Pexels licence. The people are stock subjects, not customers or endorsers of the fictional business. Some devices and signs in the photographs carry third-party names; crop or replace those images if that matters for your brand.

File Shows Source
hero.webp Trader holding a handheld reader as a card is handed over https://www.pexels.com/photo/5332482/
day-open.webp Café counter, customer paying at the reader https://www.pexels.com/photo/37594402/
day-tap.webp Watch tapped on a handheld reader https://www.pexels.com/photo/37594391/
day-table.webp Server bringing the reader to a table https://www.pexels.com/photo/37594379/
day-close.webp Bartender holding the reader across the bar https://www.pexels.com/photo/37594387/
pay-phone.webp Handheld payment device reading a card https://www.pexels.com/photo/12935072/
pay-links.webp Shop owner writing up orders at a packing table https://www.pexels.com/photo/7857553/
pay-online.webp Customer paying at a laptop with a card https://www.pexels.com/photo/7620566/
story-barber.webp Barber with a client in the chair https://www.pexels.com/photo/7697216/
story-bakery.webp Baker holding an iced loaf cake https://www.pexels.com/photo/8426690/
story-market.webp Produce stall, card handed to the grower https://www.pexels.com/photo/8541405/
story-records.webp Record shop worker among the crates https://www.pexels.com/photo/6862355/
story-deli.webp Deli owner behind jars of preserves https://www.pexels.com/photo/34674788/

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.