Live page · scroll inside

FreeFintech / Business banking · light · landing page · svg · gsap · lenis · html

Tallyline

A fintech landing page in cool grey and navy: the loader settles a sum, three cards stacked in 3D fan out as the hero scrolls and lean with the pointer under a holographic sheen, a pinned SVG growth chart draws itself with a travelling dot and live counters, bento tiles play small product demos, a lock strokes itself in on a navy security box, and a centred headline closes.

What's inside

01
Settling sum
The sum counts up and settles, the rule draws, the cover lifts.
02
Blurred nav
Links darken on hover; past 80 px the bar turns solid with a hairline so links stay legible over the navy security box.
03
Headline + card deck
Lines rise from masks; the deck drops in, fans as you scroll and leans with the pointer; each card's sheen follows the cursor.
04
Pinned growth chart
Scrolling draws the line, moves the dot and tooltip, widens the area and climbs every number.
05
Bento demos
Tiles rise; transactions arrive one by one; switches flip; mini cards slide in; tiles lift on hover.
06
Navy security box
The box rises; the lock strokes itself in; items slide in.
07
Three quotes
Cards rise in sequence.
08
Open an account
Lines rise from masks.
09
Footer strip
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Tallyline

What's inside

Settling sum

The sum counts up and settles, the rule draws, the cover lifts.

Blurred nav

Links darken on hover; past 80 px the bar turns solid with a hairline so links stay legible over the navy security box.

Headline + card deck

Lines rise from masks; the deck drops in, fans as you scroll and leans with the pointer; each card's sheen follows the cursor.

Pinned growth chart

Scrolling draws the line, moves the dot and tooltip, widens the area and climbs every number.

Bento demos

Tiles rise; transactions arrive one by one; switches flip; mini cards slide in; tiles lift on hover.

Navy security box

The box rises; the lock strokes itself in; items slide in.

Three quotes

Cards rise in sequence.

Open an account

Lines rise from masks.

Footer strip

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.