Multi-Page SaaS Template
A four-page SaaS product website template with animated page transitions: links fetch the next page and swap only the main column, so the header, the mega menu and the light/dark theme you picked survive the navigation.
About This Template
Vault Inc is a complete four-page website for a software product, built around the thing a one-page template cannot do: moving between pages. Home, Product, Pricing and Changelog are four real HTML files, and every link between them is a real href, but a click never reloads the browser. The next page is fetched, only the main column is replaced, and the header, the open menu, the scroll engine and the theme you chose carry straight across.
Read the full template overview
The art direction is deliberately low-key. One pale eucalyptus ground, one near-black ink, one deep ink-blue accent used about once per screen, and hairlines instead of shadows. The home page opens on a hard tone seam: a full-bleed band crosses the headline so the same letterforms read dark above it and light below, and flipping the theme inverts the whole composition. Below that, scrolling sweeps a playhead across a batch of job runs, filling each bar and printing its duration as it lands.
The chrome is the part most product sites get wrong and it is built properly here. The mega menu is one panel that reshapes: moving from Product to Resources tweens the panel to the measured size of the incoming columns while the old ones slide out in the direction of travel, and the whole thing is keyboard-routable rather than Tab-broken by DOM order. The theme toggle grows a disc of the incoming ground out of the button itself. On a phone, a drawer takes over with the same sections as accordions.
Making it yours is mostly renaming: the fictional product is a background job runner, but nothing in the structure assumes that. Repaint six values in the token block, swap the copy, and add a page by copying one of the four files: the router picks it up with no configuration, because it works from ordinary links.
What's Included
- Animated page transitions between four real HTML pages, each destination arriving with its own entrance rather than one shared fade: only <main> is swapped, so the header, menu, theme and Lenis instance persist across the navigation
- A real light and dark theme, applied synchronously in <head> so the page never paints in the wrong one, defaulting to the visitor's system preference and remembered in localStorage
- A theme toggle built on the View Transitions API: the new theme is clipped open as a disc growing from the button, so the text and rules change under the moving edge, with an opaque-disc fallback where the API is missing
- A mega menu that reshapes rather than reopening: the panel tweens to the measured box of the incoming columns while the outgoing ones slide out in the direction of travel
- Full keyboard routing for the mega menu, which is Tab-broken by DOM order otherwise, plus Escape handling and a focus-out close
- A mobile drawer with focus trapping, staggered rows and the mega menu's sections as animated accordions
- A scroll-scrubbed run lane: a playhead sweeps the batch, each bar fills as it is crossed, durations print when they land, and the completed counter climbs
- A hero built on one hard tone seam, with the headline painted in two layers so it reads dark above the band and light below it, and inverts completely with the theme
- Every page works with JavaScript disabled and with the GSAP CDN blocked: links are real hrefs, the menus fall back to plain DOM, and the router simply never engages
- Focus is moved to the new page and its title announced in a live region after every soft navigation
Perfect For
- Any software product that needs more than a landing page: a home page, a feature page, pricing and a changelog
- Developer tools, APIs and infrastructure products where the buyer expects a docs-shaped site with a dark mode
- Agencies and freelancers who want a multi-page chassis with the navigation and transitions already solved
- Startups replacing a one-page site that has outgrown itself, without moving to a framework
- Any site where a light and dark theme is a requirement rather than a nice-to-have
How It Works
Two layers, one script
The page is split into chrome and page. The chrome (header, mega menu, drawer, theme toggle, router and Lenis) is built once when the site first loads and is never torn down. Everything inside <main> lives in its own gsap.context, which is reverted and rebuilt on each navigation so ScrollTriggers from the page you left cannot leak into the one you arrived on.
The page transition
A click on a same-origin link is intercepted, the target is fetched, and the outgoing column slides out in the direction of travel while the request is in flight. When both finish, the new page's <main> content, title and description replace the current ones and the URL is updated with pushState. The incoming page then plays its own entrance: the home page wipes its tone seam up into place, the product page brings features in from the side each one sits on, the pricing page deals its plans left to right, and the changelog slides entries in with their oversized version numerals following.
The mega menu
One panel serves every nav section. Opening measures the incoming panel's box, tweens the container to it, and slides the outgoing columns out in the direction of travel while the new ones arrive with it. Because a shared flyout sits after every trigger in the DOM, Tab would otherwise skip past the panel that just opened, so arrow, Escape and focus-out handling route it by hand.
The theme switch
The stored choice is applied by a synchronous script in <head>, before first paint, so the page never flashes the wrong theme. Changing it uses the View Transitions API: the browser freezes the outgoing frame, the theme is applied, and the new frame is clipped open as a disc growing from the toggle itself, so text, rules and the hero seam all change as the edge passes over them rather than after it. Where the API is unavailable it falls back to growing an opaque disc of the incoming ground colour, read live from the stylesheet.
Without JavaScript
Every navigation link is a real href, including the mega menu triggers, so the site is an ordinary four-page website when the router never runs. The menus close as display:none rather than hidden layers, so nothing is present but unreachable. If the GSAP CDN is blocked the script removes the class gating the reveal animations and leaves a complete, readable document. Under reduced motion the transitions become instant swaps and the run lane renders as a finished batch.
Questions about this template
Do the animated page transitions work on ordinary web hosting?
Yes, on any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages or plain shared hosting. The one thing they need is to be served over http or https rather than opened straight off your hard drive, because each page is quietly fetched in the background before it swaps in. Opened from a file, the links just navigate the normal way and nothing is broken.
How do I add a fifth page?
Copy any of the four files, change the content inside <main>, and add a link to it in the header and footer. The router works from ordinary links rather than a route table, so it picks the new page up with no registration step. Keep the header and footer markup identical across pages so the chrome stays in sync.
Does the light and dark switch actually stay switched?
Yes. The choice is saved in the browser and applied by a script in the page head before anything is drawn, so a returning visitor never sees a flash of the wrong theme. Someone arriving for the first time gets whichever their operating system is set to.
Can customers sign up or pay through it?
No. This is a front-end template with no backend: the Start free and Talk to us buttons are links, and there is no signup form, no account area and no payment flow. Point the buttons at your real signup page, or at a Stripe payment link, and the site is doing its job.
The fake product is a background job runner. How much work is it to make it something else?
Mostly copy. Nothing in the layout assumes the vertical: the home page is a hero, a scrolling data section, three capability cells, a quote and a call to action, and the product page is four alternating feature blocks. Replace the words and the code samples, repaint six colour values, and it reads as your product.
Will the mega menu work on a phone?
The mega menu is desktop only, which is deliberate: a hover flyout is the wrong shape for a touch screen. Below 900px a drawer takes over and the same sections appear as tap-to-open accordions. On a touch laptop, the first tap on a nav item opens its panel and a second tap follows the link.
What happens if someone's browser blocks the animation library?
The site keeps working. The links are real, so navigation falls back to ordinary page loads, the menus still open, the theme still switches, and the content that would have faded in is simply already visible. You lose the motion and nothing else.
Is it accessible?
It is built to be. Colour pairs are measured against WCAG AA at the sizes they are used in both themes, the menus are keyboard operable with focus trapped in the drawer, focus moves to the new page after a transition and its title is announced, and everything animated has a designed still state under reduced motion.
