# Fintech Template

> 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.

Canonical: https://gsapvault.com/templates/fintech-template
Live demo: https://gsapvault.com/demos/fintech-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scrub, 3d-transforms, velocity-reactive, count-up, click-toggle, scrollspy, scroll-reveal, stagger, parallax, range-input, accessible-filtering, form-animation, mouse-follow |
| Uses Lenis | Yes |

## Overview

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.

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.

## Features

- 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

## 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

## 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.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### 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.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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](#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](https://www.pexels.com/license/). 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/ |

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Fintech Template](https://gsapvault.com/templates/fintech-template)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt