← All work

Apsis

Private orbital spaceflight template with a scroll-scrubbed descent hero and telemetry HUD

Template
Apsis
Sector
Space Tourism / Aerospace
Year
2026
Built with
Astro 6, React 19, Tailwind CSS v4
Pages
11
Open the live demo
Apsis

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.

What’s inside

  • 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/apsis/. 11 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.