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.
About This Template
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.
Read the full template overview
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.
What's Included
- 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
Perfect For
- 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
The blend-mode chrome
One script initialises each section with a single setup and teardown path and one motion branch, 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 reading rail
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.
Reveals and fallbacks
Reveal targets and the intro lines start hidden in CSS and animate from a start state that matches it exactly, 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.
Questions about this template
What vertical is this template for?
Deliberately none. Its identity is structural rather than thematic: bands alternate hard between two tones and the chrome inverts against them. The section set (intro, proof, offer, work, testimonial, pricing, contact) is the universal landing-page run, so a studio, a shop, a service or a product all fit with a copy swap.
How does the nav flip colour without JavaScript?
mix-blend-mode. The fixed nav and reading rail invert themselves against whatever band is behind them purely in CSS, with no scroll listener deciding when to switch. That means it can never lag the scroll or land on the wrong colour mid-band, which is the usual failure of the scripted version.
If I delete a section, does the reading rail break?
No. The rail generates its entries from the bands that actually exist, so removing a section removes its entry rather than leaving a dead link or shifting the rest out of step. That is the reason it is generated rather than hand-listed.
How much work is it to make it look like my brand?
One token block: two grounds and one accent. Because every component is written to work on either tone, changing those three values reskins the whole page without hunting for hardcoded colours in individual sections.
Is the reading rail a second navigation menu?
No, and deliberately so. It is an inert progress indicator that springs its marker to whichever band owns the middle of the screen. Making it a duplicate nav would give screen-reader users two competing menus for the same page.
