Tourism · Dark

Window Seat

An airplane cabin in brown dimness that becomes a journey: the shades go up, the camera passes through the window, drops into the clouds and lands on a dotted globe with lit routes.

Palette

--bg#171310
main background of the dark sections (globe, card, footer)
--bg-cabine#352820
warm brown of the cabin wall in the hero and the final CTA
--ceu#355c86
sky blue in the crossing through the clouds
--papel#e9e5dd
boarding pass, light pills, buttons
--texto#f4f0e9
titles and text on dark
--texto-2#9d9286
subtitles, captions, labels
--acento#5fd1bf
route arcs on the globe, active point
--linha#2b241f
thin borders, dividers, giant background word

Typography

Display: expanded geometric sans, weight 700–800, mixed case (sentence case), tracking -0.02em, enormous and centered in the hero (clamp(2.6rem, 6vw, 5.5rem)); background word at clamp(8rem, 24vw, 22rem) — suggestions: Unbounded / Clash Display (Fontshare).
Body: neutral grotesque, 400–500, 15–17px, line-height 1.35, short phrases on two lines — suggestions: Inter / General Sans.
Support/labels: tiny uppercase grotesque (9–10px, tracking 0.14em) for boarding-pass fields and form labels.
Treatments: giant word in --linha behind the globe, cropped by the side edges; pass numbers in display with a smaller unit (e.g. large number + small "min"), animated count; enormous destination title in the bottom-left corner of the photo.

Sections

Nav — logo in display on the left; 4 small centered links; on the right, support hours and email in 11px text. Transparent over the hero.
Hero (cabin) — centered headline at the top + gray subtitle; three 3D airplane windows side by side (the middle one larger), shades half lowered; hero footer in 3 columns: text on the left, CTA pill + circular button with an airplane icon in the center, right-aligned text.
Crossing — the shades go up, the middle window grows until it fills the screen; blue sky with volumetric clouds and a short centered 2-line title with microtext.
Layered destinations — full-bleed photos with 12px corners, one per type of place (islands, snow, desert…), stacked: the next one rises over the previous; enormous title in the bottom-left corner + support line.
Globe — giant background word; horizontal strip with 4 destination photos that shrinks and is "swallowed" by the globe; dotted globe spins, a "you" marker and route arcs to 3 destinations; footer with a data point on the left, CTA in the center, data point on the right.
How it works (boarding pass) — cream card with a perforation: header, "from → to" with an airplane icon, 3 numbered columns with a large number + caption; the stub stands out, rotates ~12° and falls to the lower right, revealing a CTA pill.
Night descent — dark ocean seen from above with islands and midnight-blue clouds, color transition into the CTA.
Final CTA — large centered title, support line, three night windows; horizontal form bar (name, WhatsApp, when, people, button) and trip-type chips below.
Footer — giant brand word cropped at the base.

Motion and interaction

Shades: scroll scrub (hero pinned ~150vh) → each shade rises translateY -100% with a 0.08 delay between windows; the middle one last; GSAP ScrollTrigger + Three.js.
Dolly through the window: scroll scrub → camera advances in z until it passes through the central window's glass; side windows exit through the edges; fade to sky; R3F with a progress-animated camera.
Clouds: parallax on 3 planes (0.2 / 0.5 / 0.9) with sprites; title with fade+blur 8px→0.
Layered photos: pin per destination; next photo enters from y:100% with a slight scale 1.08→1; title reveals via a line mask.
Strip → globe: scrub → photos shrink and converge to the center, opacity → 0 inside the sphere; dotted globe spins continuously (0.05 rad/s) + extra rotation from the scroll.
Routes: on enter → arcs drawn (dashoffset) in 1.2s power2.out, pins appear in sequence.
Boarding pass: enters with rotateX 25°→0; numbers count up from 0; stub highlights with rotate 0→12° and y +80px; perforation with dashed.
Cursor: windows and globe tilt ±4° following the mouse with lerp 0.08.
Smooth scroll: Lenis.

Components

3D airplane window: cream oval frame with a bevel, glass with a reflection, sliding shade.
Light CTA pill (#e9e5dd, dark 12px text, 999px radius) + sibling circular button with an icon.
Layer photo: full-bleed card with a 12px radius, 10vw display title in the bottom-left corner.
Dotted globe with markers in white pills and arcs in --acento.
Boarding pass: cream, 10px radius, vertical perforation, fields with a tiny uppercase label.
Translucent dark horizontal form bar with underlined fields and a pill button.
Filter chips (outline pill; active = filled light).