Apsis

Apsis es una plantilla cinematográfica para vuelo espacial privado, investigación en microgravedad y marcas de expediciones high-ticket, NASA vintage cruzado con moda editorial, nada de sci-fi neón. Once rutas cubren el descenso del home, la experiencia, la nave, research, un índice de dispatches y su artículo, about, un flujo de reserva en cuatro pasos, precios de asientos y misiones, contacto y un 404. El hero es “Descent”: un solo pin de GSAP scrubbea una foto de la Tierra desde órbita sobre una malla aurora animada y un starfield con parallax, mientras un HUD SVG hairline de telemetría hace descender la lectura de altitud de 420 km hasta la superficie. El mission timeline hace pin y avanza en horizontal por las cuatro fases de vuelo, la página de experiencia corre una secuencia sticky estilo Apple, y cada efecto está protegido con matchMedia para mobile y prefers-reduced-motion.

Qué incluye

• 11 rutas, Inicio, Experiencia, Nave, Research, Dispatches, Artículo, About, Reserva, Misiones, Contacto, 404
• Hero “Descent”, un único ScrollTrigger con pin scrubbea planeta, malla aurora, starfield y copy a distintas velocidades
• HUD SVG de telemetría en vivo con lectura de altitud que baja de 420 km → 000 desde el onUpdate de ScrollTrigger
• Mission timeline horizontal con pin, cuatro fases de vuelo animadas con ScrollTriggers de containerAnimation
• Secuencia de experiencia con escenas sticky estilo Apple que scrubbea una custom property –progress por escena
• Cursor con etiqueta contextual, anillo hairline y punto en tweens gsap.quickTo separados, que se expande para mostrar VIEW / APPLY / READ

La firma

“Descent” es un único hero con pin y scrub que hace cuatro cosas a la vez: una foto real de la Tierra desde órbita sube y escala mientras la cámara desciende, una malla aurora animada y un starfield con parallax retroceden a distinta velocidad, un velo de descenso oscurece el encuadre hacia la superficie, y un HUD orbital SVG hairline baja su lectura de altitud de 420 km a 000 directamente desde el progress de ScrollTrigger. Se lee como una aproximación real, no como un efecto parallax, y degrada a un frame estático compuesto en mobile y con reduced-motion.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/apsis/. 11 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.