# 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 whatever is behind them using mix-blend-mode rather than script.

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

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | beginner |
| Plugins | ScrollTrigger |
| Techniques | blend-mode, scrollspy, text-animation, scroll-reveal, stagger |
| Uses Lenis | Yes |

## Overview

A production-ready one-page site built to be dropped into any business, which is the hard part: a template that suits everything usually ends up with no point of view. This one takes its identity from structure rather than subject. Bands alternate hard between a pale sage ground and charcoal, and the fixed chrome, the top nav and a reading rail, sits in mix-blend-mode: difference, so it inverts itself automatically as each tone passes beneath. Nothing in the script decides those colours, which means the inversion can never desynchronise from the scroll position. The section set is the universal landing-page skeleton (intro, proof, offer, work, testimonial, pricing, contact), the copy is written as a small independent studio, and the whole palette is a single token block: change two grounds and one accent and the site is yours, whatever you sell.

## Features

- Complete deployable one-page site: nav, reading rail, intro, proof, offer, work, testimonial, pricing, contact, footer
- Signature inverting chrome: nav and rail flip between dark and light against alternating tone bands, done entirely in CSS with mix-blend-mode
- Tone system where each band re-points shared rule and secondary-text tokens, so every component works on either ground unchanged
- Reading rail whose entries are generated from the bands themselves, so deleting a section removes its entry instead of shifting the rest out of step
- Marker springs to the band that owns the middle of the screen
- Bundled project photography baked to a sage duotone, around 115KB total
- Universal landing-page section set, so the template fits a studio, a shop, a service, or a product with a copy swap
- Reskins from one token block: two grounds and one accent
- Lenis smooth scrolling wired in and fully optional
- Accessible: the rail is an inert indicator rather than duplicate navigation, reduced motion gets a complete static page, and the page reads fully without JavaScript

## Use Cases

- Small studios, agencies, and independent teams
- Service businesses that need one page that converts
- Product and launch pages where the section set matters more than the vertical
- A reusable starting point for client one-pagers
- Learning how mix-blend-mode can replace scroll-driven colour logic entirely

## How It Works

One script initialises each section inside a single gsap.context with gsap.matchMedia, skipping any section it cannot find. The signature needs almost no JavaScript: bands carry a tone class that sets their ground and re-points the shared rule and dim tokens, and the fixed chrome is pure white with mix-blend-mode: difference, so it composites to near-black over the pale ground and near-white over the dark one. Because the browser does that per pixel, the inversion is always exactly in step with the scroll, which a scroll-driven class toggle could never guarantee. The script adds the reading indicator: it builds one rail entry per band from that band's data-section label, creates a ScrollTrigger per band spanning the middle of the viewport, and springs the marker to whichever band is active. Reveal targets and the intro lines start hidden in CSS and animate with fromTo whose start state matches, so nothing is ever painted in its finished state and snapped back. A prefers-reduced-motion branch applies the same layout with no tweens, and the has-js class that hides content is only set once GSAP is confirmed present, so a CDN failure degrades to a fully visible page.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

1. Open `index.html` and replace the placeholder company with yours: name, headline, claims, offer, work, quote, prices, contact details.
2. Update the `<title>` and `<meta name="description">`, and remove `<meta name="robots" content="noindex, nofollow">` when you go live.
3. Change the two grounds and the accent at the top of `style.css`.
4. Deploy the folder anywhere that serves static files.

### Accessibility

- The rail is an inert indicator rather than a second set of links, so assistive tech is not given duplicate navigation.
- Focus is visible on both tones; inside the chrome the ring uses `currentColor` so it inverts along with everything else.
- The magenta accent is used for large text, rules, and fills only. Solid buttons use the deeper `--accent-deep` so their label clears AA against white.
- `prefers-reduced-motion` gets the same layout with no tweens, and nothing hidden.
- Without JavaScript the page reads completely; only the rail, which is a decorative indicator, is absent.

### Dependencies

- GSAP 3.14.2 (core)
- ScrollTrigger
- Lenis 1.3.17 (optional)

## 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
- `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 £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Landing Page Template](https://gsapvault.com/templates/landing-page-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](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