Landing Page Template 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. 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
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.