Landing Page Templates

Conversion-focused one-pagers, including two that adapt to any vertical and two built specifically for developer-infrastructure products where the console is the pitch.

17 templates, 2 free, no build step

Templates Pass

£50

Every current and future premium template. Includes all 81 premium templates available now, plus every future release in this line.

The Vault

£99

All 280 premium items in the Vault library, plus future additions to the library.

072 £20

3D Product Showcase Template

Single-product website template with a real-time three.js glass object over full-bleed video: the bottle refracts the footage and wordmark, follows the cursor and turns through scroll chapters. Worked as a fragrance house; suits skincare, spirits, candles and any product launch.

ScrollTrigger webgl-shader

071 £20

AI Research Template

A helical three.js pixel reactor, interactive materials programmes and a candidate workbench for research labs, AI startups and technical product websites.

ScrollTrigger scroll-reveal

070 £20

Infinite Scroll Landing Page Template

An endless landing page with full-screen photography, parallax, a hands-on crop study and a persistent project CTA. Built for creative agencies, photographer portfolios, fashion campaigns, product launches and events.

ScrollTrigger infinite-scroll

058 4 pages £20

Multi-Page SaaS Template

A four-page SaaS website template with animated page transitions and a real light/dark theme: links fetch the next page and swap only the main column, so the header, the mega menu and the theme survive every navigation. Re-points to a developer tool, an API product, an analytics or fintech SaaS, an agency site, or any multi-page marketing site.

ScrollTrigger page-transition

076 New £20

Mobile App Landing

A one-page site for a mobile app with a real 3D phone that turns to a new screen as you scroll through four features, plus store buttons, pricing with a monthly and yearly toggle, an FAQ and a QR download block. Built to be adapted in an afternoon: suits consumer apps, SaaS products, fintech, fitness, education and any launch that needs a phone in the hero.

ScrollTriggerSplitText

077 New £20

Word Game App Landing

A one-page site for a mobile game or consumer app with a real 3D phone that turns to a new screen as you scroll through four features, and a row of letter tiles that solves itself as the phone glides away. Store buttons, pricing with a monthly and yearly toggle, an FAQ and a scannable QR download block. Built to be adapted in an afternoon: suits word and puzzle games, trivia and quiz apps, education and language apps, habit and streak trackers, and any launch that needs a phone in the hero.

ScrollTriggerSplitText

074 5 pages £20

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.

ScrollTrigger scrub

054 4 palettes £20

AI Studio SaaS Template

A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer.

ScrollTrigger pointer-tracking

009 3 palettes £20

Landing Page Template

A vertical-agnostic one-page site whose identity is structural: bands alternate hard between two tones, and the fixed nav and reading rail invert themselves against whichever band is behind them, swapped by a ScrollTrigger per band.

ScrollTrigger scrollspy

010 5 palettes £20

SaaS Landing Page Template

A hard-edged Swiss landing page for a B2B software product, built around an interactive product mockup: switching feature tabs redraws the mini-UI inside the app window, so visitors drive the console instead of looking at a screenshot of it.

ScrollTrigger tabs

020 Free

Coming Soon Template

A free single-screen holding page dressed as a picture house: a projector beam rakes across a dark auditorium, a house light wanders the room, and the countdown is an Academy leader whose sweep hand turns continuously while the day count cuts once a day.

countdownambient

021 Free

Charity Campaign Template

A free one-page river-restoration appeal built around a draggable before/after comparator: a gauge-board divider wipes between the degraded and the restored river, and every figure on the page counts like a reading.

ScrollTriggerDraggable

030 £20

Email API SaaS Template

A complete one-page landing site for a transactional email API, set like airmail stationery: outbound letters fly into the hero's sorting tray on a timed stream, filterable by email type, each one openable to its delivery report and frankable DELIVERED with a rubber-stamp thunk.

ScrollTrigger scroll-reveal

031 £20

Incident Alerting SaaS Template

A complete one-page SaaS landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus.

ScrollTrigger timed-stream

039 4 palettes £20

Draggable Dashboard Template

A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics.

ScrollTriggerFlip

040 £20

Long-Form Story Template

A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins.

ScrollTrigger scroll-stack

059 £20

Parallax Scroll Template

A nature-led one-page site for a national trail, outdoor brand or landscape project: four full-bleed photographs pinned into a scroll-scrubbed journey, a live type specimen you type into, and a lens that samples the palette off a hillside.

ScrollTrigger pinning

Browse all 85 templates

What a landing page template has to get right

A landing page template faces a problem the others do not: it has to suit any business, and a template that suits everything usually ends up with no point of view at all. The answer used here is to take the identity from structure rather than subject. Bands alternate hard between two tones, and the fixed nav and reading rail invert themselves against whatever is behind them, a ScrollTrigger per band handing each piece of chrome the opposite tone to the section it is sitting on.

The software pages take the opposite approach and get specific. The SaaS landing page avoids the two things the category always gets wrong, which are a static screenshot standing in for the product and an art direction assembled from purple gradients and rounded glass. Switching feature tabs redraws the mini-UI inside the app window, so a visitor drives the console instead of looking at a picture of one.

The two infrastructure templates go further still by making the product the page. The email API sets itself as airmail stationery, with outbound letters flying into a sorting tray on a timed stream, each openable to its delivery report. The incident alerting page is a night-shift operations room where monitor events arrive live, tick the hero counters and expand into incident cards. For a monitoring product, the console genuinely is the marketing.

Two free templates sit in this group as well: a single-screen holding page dressed as an independent picture house, and a campaign appeal built around a draggable before and after comparator with figures that count like readings rather than marketing stats.

How to launch a landing page from one of these templates

A landing page is mostly copy and one clear action, so the fastest route is to fix the message before touching anything visual.

1

Write the hero and the call to action first

Everything else on the page supports those two things. If the hero line does not work in plain HTML with no animation, no amount of motion will rescue it.
2

Delete the sections you do not need

These pages are built as independent bands. Removing one does not break the scroll behaviour, the nav inversion or the reveal timings, so cut hard rather than filling sections with padding copy.
3

Point the forms somewhere real

Waitlist, signup and contact forms are complete markup with validation. Connect them to your email provider, CRM or a form endpoint.
4

Measure before you add more motion

Ship it, watch what people actually do, then decide whether anything needs to move more. The reveal animations are already tuned to not delay the reading of the page.

The nav takes the opposite tone to the band behind it

ScrollTrigger.create({
  trigger: band,                 // one per band
  start: () => 'top top+=' + navMidline(),
  end: () => 'bottom top+=' + navMidline(),
  onToggle: (self) => {
    if (!self.isActive) return;
    nav.classList.toggle('is-on-dark', band.classList.contains('tone--ink'));
    nav.classList.toggle('is-on-light', !band.classList.contains('tone--ink'));
  }
});

Landing & marketing at a glance

Compare the 17 templates in this category by what they do, what they are built with, and whether they run light or dark.
Template	What it does	Built with	Tone
3D Product Showcase Template	Single-product website template with a real-time three.js glass object over full-bleed video: the bottle refracts the footage and wordmark, follows the cursor and turns through scroll chapters.	ScrollTrigger	Mixed
AI Research Template	A helical three.js pixel reactor, interactive materials programmes and a candidate workbench for research labs, AI startups and technical product websites.	ScrollTrigger	Mixed
Infinite Scroll Landing Page Template	An endless landing page with full-screen photography, parallax, a hands-on crop study and a persistent project CTA.	ScrollTrigger	Mixed
Multi-Page SaaS Template	A four-page SaaS website template with animated page transitions and a real light/dark theme: links fetch the next page and swap only the main column, so the header, the mega menu and the theme survive every navigation.	ScrollTrigger	Mixed
Mobile App Landing	A one-page site for a mobile app with a real 3D phone that turns to a new screen as you scroll through four features, plus store buttons, pricing with a monthly and yearly toggle, an FAQ and a QR download block.	ScrollTrigger, SplitText	Mixed
Word Game App Landing	A one-page site for a mobile game or consumer app with a real 3D phone that turns to a new screen as you scroll through four features, and a row of letter tiles that solves itself as the phone glides away.	ScrollTrigger, SplitText	Mixed
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.	ScrollTrigger	Light
AI Studio SaaS Template	A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer.	ScrollTrigger	Dark
Landing Page Template	A vertical-agnostic one-page site whose identity is structural: bands alternate hard between two tones, and the fixed nav and reading rail invert themselves against whichever band is behind them, swapped by a ScrollTrigger per band.	ScrollTrigger	Mixed
SaaS Landing Page Template	A hard-edged Swiss landing page for a B2B software product, built around an interactive product mockup: switching feature tabs redraws the mini-UI inside the app window, so visitors drive the console instead of looking at a screenshot of it.	ScrollTrigger	Light
Coming Soon Template	A free single-screen holding page dressed as a picture house: a projector beam rakes across a dark auditorium, a house light wanders the room, and the countdown is an Academy leader whose sweep hand turns continuously while the day count cuts once a day.	GSAP core	Dark
Charity Campaign Template	A free one-page river-restoration appeal built around a draggable before/after comparator: a gauge-board divider wipes between the degraded and the restored river, and every figure on the page counts like a reading.	ScrollTrigger, Draggable	Dark
Email API SaaS Template	A complete one-page landing site for a transactional email API, set like airmail stationery: outbound letters fly into the hero's sorting tray on a timed stream, filterable by email type, each one openable to its delivery report and frankable DELIVERED with a rubber-stamp thunk.	ScrollTrigger	Light
Incident Alerting SaaS Template	A complete one-page SaaS landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus.	ScrollTrigger	Dark
Draggable Dashboard Template	A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics.	ScrollTrigger, Flip, Draggable	Dark
Long-Form Story Template	A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins.	ScrollTrigger	Light
Parallax Scroll Template	A nature-led one-page site for a national trail, outdoor brand or landscape project: four full-bleed photographs pinned into a scroll-scrubbed journey, a live type specimen you type into, and a lens that samples the palette off a hillside.	ScrollTrigger	Mixed

Related guides

85 animated website templates built with GSAP (2026)

85 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.

123 GSAP animation examples and demos with code (2026)

123 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

GSAP performance: why animations get janky and how to fix it

A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

Frequently asked questions

Are these landing pages A/B testable?

Yes, and more easily than most. Because they are static HTML with no build step, you can duplicate the file, change the variant, and serve both from any host or edge platform without a deploy pipeline.

Do the SaaS templates need a real product to look right?

No. The product mockups are built from CSS and markup rather than screenshots, so they render correctly with whatever content you put in them. That also means they do not go stale the moment your interface changes.

Can I use these with a marketing tool like HubSpot or Webflow?

The markup is plain enough to port into most systems, though you lose some of the benefit of static delivery. If you only need form handling, it is usually simpler to keep the page static and post to the tool's endpoint.

Which landing template should I start with?

If your section set matters more than your vertical, start with the general landing page template. If you are selling software, start with the SaaS page. If you are selling developer infrastructure priced per unit, the email API and incident alerting pages are closer to the mark.

Browse all templates What a GSAP template is