Apsis

Sobre Este Template

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.

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.

Características

• 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
• Revelados de headline con máscara de líneas estilo Exoape vía un componente <Lines> reutilizable y máscaras CSS
• Gradación de imagen grayscale → color que se resuelve al revelarse en scroll y en hover
• 3 skins de color con nombre — Deep Field (por defecto), Daybreak (amanecer claro) e Ion (teal frío), vía data-skin
• Solicitud de reserva en 4 pasos con validación por paso, indicador de progreso y gestión de foco
• 5 colecciones de contenido — 5 dispatches, 6 miembros de tripulación, 4 fases de vuelo, 3 misiones y 4 payloads de research
• Página de Asientos y Misiones con 3 tiers, tabla comparativa y acordeón de FAQ
• Página dedicada a la nave — secciones de specs, sistemas, seguridad y cabina, con parallax scrubbeado en specs y sistemas
• 33 fotografías reales (dominio público de NASA + Pexels) servidas como AVIF + WebP vía getImage()
• Fraunces, Geist y JetBrains Mono self-hosted vía Fonts API de Astro — sin requests externos de fuentes
• Smooth scroll con Lenis, View Transitions de Astro, JSON-LD, sitemap y robots.txt, TypeScript strict con cero any

Despliegue