Apsis

About This Template

Apsis is a cinematic template for private spaceflight, microgravity research and high-ticket expedition brands — vintage-NASA meets editorial fashion, not neon sci-fi. Eleven routes cover the home descent, the experience, the vessel, research, a dispatches index and article, about, a four-step reservation flow, seats and missions pricing, contact and a 404. The hero is "Descent": one GSAP pin scrubs an Earth-from-orbit photograph past an animated aurora mesh and parallaxed starfield while a hairline SVG telemetry HUD counts the altitude readout down from 420 km to the surface. The mission timeline pins and scrolls horizontally through four flight phases, the experience page runs an Apple-style sticky-scene sequence, and every effect is guarded by matchMedia for mobile and prefers-reduced-motion.

Signature

"Descent" is one pinned, scroll-scrubbed hero doing four things at once: a real Earth-from-orbit photograph pushes up and scales as the camera drops, an animated aurora gradient mesh and a parallaxed starfield retreat at different rates, a descent veil darkens the frame toward the surface, and a hairline SVG orbital HUD counts its altitude readout down from 420 km to 000 straight off ScrollTrigger progress. It reads like a real approach, not a parallax effect — and it degrades to a static composed frame on mobile and reduced-motion.

Features

• 11 routes — Home, Experience, Vessel, Research, Dispatches, Dispatch Article, About, Reserve, Missions, Contact, 404
• "Descent" hero — a single pinned ScrollTrigger scrubs planet, aurora mesh, starfield and copy at different rates
• Live SVG telemetry HUD with an altitude readout that ticks 420 km → 000 from ScrollTrigger onUpdate
• Pinned horizontal mission timeline — four flight phases animated with containerAnimation ScrollTriggers
• Apple-style sticky-scene experience sequence that scrubs a per-scene --progress custom property
• Contextual label cursor — hairline ring plus dot on separate gsap.quickTo tweens, expanding to show VIEW / APPLY / READ labels
• Exoape-style line-mask headline reveals via a reusable <Lines> component and CSS masks
• Grayscale → color image grading that resolves on scroll reveal and on hover
• 3 named color skins — Deep Field (default), Daybreak (light dawn-launch) and Ion (cold teal), set via data-skin
• 4-step Reserve application with per-step validation, progress readout and focus management
• 5 content collections — 5 dispatches, 6 crew members, 4 flight phases, 3 missions, 4 research payloads
• Seats & Missions page with 3 tiers, a comparison table and an FAQ accordion
• Vessel deep-dive page — specs, systems, safety and cabin sections, with scrub-linked parallax on specs and systems
• 33 real photographs (NASA public domain + Pexels) served as AVIF + WebP via getImage()
• Self-hosted Fraunces, Geist and JetBrains Mono through Astro's Fonts API — no external font requests
• Lenis smooth scroll, Astro View Transitions, JSON-LD, sitemap and robots.txt, TypeScript strict with zero any

Deployment