Aerivo

Marketing site for a private jet operator

Full template Members only Open the demo

Preview of the Aerivo template: a hero over a graded midnight-blue sky and three layers of cloud, the heading “Smooth journeys / Private skies” and a white flight search bar at the bottom of the screen.

What it is

A private jet operator's site, complete: a hero over an animated sky with a flight search, an intro, a “your flight step by step” sequence in three full-page photographs, services, an aircraft window that opens until it fills the screen, the fleet, a globe of destinations, the company's history, news, Instagram, a quote request, a footer. One page, one HTML file.

The design follows that of a Dutch business aviation site, of which only the photos have been kept. All the code has been rewritten: the original comes in 28 Next.js bundles (2.7 MB), GSAP and its ScrollTrigger module, three.js for the globe (1.8 MB on its own), Lenis for inertial scrolling, Swiper for the carousels, 196 kB of compiled Tailwind and three analytics domains. Unreadable, and impossible to change without running a build chain again.

The demo's content stays in Dutch, as in the original. That isn't an oversight: a template reads better when the text isn't mock Latin.

What you change first

The colours — six lines

Right at the top of assets/css/style.css:

--navy:           #05275b;  /* text, solid buttons, pins */
--navy-dark:      #071831;  /* the window's scrim */
--cloud:          #fcfdfe;  /* the page background */
--accent:         #0069c8;  /* eyebrows, focus */
--accent-strong:  #004e96;  /* hover on solid buttons */
--accent-light:   #5eb2ff;  /* the same blue, lightened for text over photos */

One thing to grasp before touching anything else: there are three accent blues, not one. The solid accent passes AA contrast on the cloud white (5.35:1), but it vanishes into the sky of a photo. That's why the lightened version exists (7.84:1 on the midnight blue). If you change the accent, change all three.

The sky itself is a four-stop gradient, taken as it is: linear-gradient(#214c6f -10%, #7495b5 33.18%, #b4cadd 70.2%, #e5eaf0 100%).

The name

Search for “Aerivo” in index.html. No CSS class carries the brand name: a find-and-replace can't break anything.

The sizes

The type scale is declared once, then redeclared at each of the four breakpoints — 1200, 991, 767 and 479 px, the original site's. So a heading never gets its own media query: you change --fs-h2 and the whole page follows.

The 22 effects, and how they're built

All taken from the original site by script, not by eye: its GSAP settings are carried by data-* attributes on the elements themselves, which gives the exact durations, curves and scroll ranges. Whatever wasn't there was measured in the browser.

Effect	Where	How
Opening curtain	whole page	a scrim pierced by a pill-shaped hole that grows until it swallows everything — `mask-composite: subtract`
Scroll reveal	12 blocks	IntersectionObserver, firing 15% up from the bottom of the screen
Word-by-word reveal	9 headings	the JS splits into numbered words, the CSS turns the number into a 50 ms delay
Cloud parallax	hero, 3 layers	−90%, −80% and −60% of run, at scales 1 / 1.06 / 1.12
Endless cloud drift	hero, window	`@property --drift`: with no declared syntax, a variable jumps instead of gliding
Search bar descent	home	70 vh of run, driven by the block's progress
The frame widens	sequence	from the content width to the whole screen, and the corner radius falls to zero
Three stacked photos	sequence	`position: sticky` on three items of a list
Progress dots	sequence	the active dot stretches into a bar (600 ms) and fills as you scroll
Carousels	services, fleet	native scroll-snap: dragging, swiping and the keyboard all work without JS
The window opens	“The sky is yours”	a mask from 320 px to 152 vmax: the midnight-blue scrim is pierced in the shape of the window
Diagonal heading	window	it crosses the screen corner to corner over the section's 200 vh
The globe	destinations	the same equirectangular texture as the original, on a disc shaded by three gradients
Pins that move with it	destinations	the scroll turns the texture by 30% and offsets the pins by as much
Cloud bands	globe, quote	the same band flipped, in parallax — the rotation goes into the `transform`, not beside it
White joining scrim	globe, quote	it retracts as the block arrives, so the seam is never visible
Photo parallax	sequence, history	image enlarged by 10% so the drift never shows an edge
The quote panel rises	quote	120% of run over the crossing of the section
Retractable navigation	everywhere	it hides going down, comes back coming up, 400 ms
Navigation pill	everywhere	the white background appears once the first screen has passed
Link hover	navigation	the word slides upwards, its copy takes its place
Return-trip selector	home	two radio buttons and `:has()` — the pill slides without a line of JS

What you should know

A single mechanism drives all the scrolling. The script writes --p, a number between 0 and 1, on every block carrying data-track; the CSS uses it as it likes. Three ways of measuring it — as the block arrives, over its crossing, or while it's taller than the screen. To add a parallax: one attribute on the container, one calc() on the child, zero lines of JavaScript.
No external requests. Checked by serving the folder over HTTP: 0 requests outside the folder. The original makes them to three analytics domains and a storage bucket.
Without JavaScript, nothing is hidden. The hidden state only exists once the script has run. Checked by removing the <script>: 15 headings out of 15 and 17 paragraphs out of 17 stay visible, the curtain doesn't exist, the menu is a list.
Zero inline styles, zero inline scripts. The template honours the site's strict security policy, checked by serving the folder with the header: 0 violations. That explains one peculiarity of the globe — the twelve pins are placed by :nth-child() in the stylesheet, because the style attribute is blocked.
Noanimation-timeline, which only exists in Chrome. Everything goes through IntersectionObserver and a CSS variable.
Accessibility: skip link, menu state announced and closing on Escape, carousel positions announced, visible focus, decorations hidden from screen readers, and prefers-reduced-motion which resets the durations and the delays to zero.
Responsive checked at 390, 1440 and 2560 px, on load and after scrolling all the way down, with no horizontal overflow.

What isn't perfect

Better said here than left for you to find out.

The globe isn't a sphere. The original renders it in WebGL: a real projection, pins that disappear at the edge, free rotation. Here it's a disc dressed in the same texture, shaded by three gradients. The silhouette and the pins are there, the distortion at the edges isn't. The cost of full fidelity: 1.8 MB of library and a <canvas> no student can read back.
The opening curtain lasts 1.2 s instead of 5.4 s. The original blocks scrolling, waits for the globe to load then for six cloud images to decode: five and a half seconds of blank screen before the first word. That's a flaw, not a decision.
No inertial scrolling. The original goes through Lenis. One more dependency for a comfort half of all visitors find annoying.
The flight search form searches nothing. It pointed at a proprietary pricing engine; it's now a link to the quote block. The fields are still editable and the return-trip selector works without JavaScript.
The page is 0.3 to 3.3% shorter than the reference depending on the width. The free heading font is narrower than the original's commercial one: headings sometimes fit on one line fewer. Nothing overlaps.
The text greys have been darkened. The original writes its labels in midnight blue at 50%, i.e. 3.07:1 on white — below the threshold for 13 px text. Here they're at 65%, i.e. 4.82:1.
The photos come from the original site and are most likely shoots commissioned by the company: they aren't redistributable. The code is yours; replace the visuals. The fonts are free — the original's two commercial families have been swapped out.

Take it, open it, break it.

Aerivo is free. The full library — the other templates and the components — comes with the subscription, alongside the course.

Start now — €29/month

Immediate access · No commitment · Cancel in one click