Saltar al contenido
Gataca Sites

GATACA / PÁGINA

Orbital Scroll Landing

Una residencia futurista recorrida con el scroll

Orbital Residence Scroll Landing transforma un travelling de diez segundos por una vivienda espacial de lujo en una secuencia optimizada de 90 fotogramas WebP. El usuario controla el recorrido: al bajar avanza desde el exterior bajo el cielo estelar hasta el núcleo vertical interior; al subir, la cámara retrocede con suavidad.

El HERO abre con el mensaje «Live beyond the horizon.» y evoluciona por cuatro escenas dedicadas a llegada, interior panorámico, atmósfera y núcleo vertical. Los contenidos aparecen y desaparecen según el progreso real del scroll mediante opacidad, desplazamientos y escalado sutil.

Tras la secuencia se incluye una sección de contacto completa con formulario conceptual, checkbox legal y confirmación local sin guardar ni transmitir datos. Al entrar en esta sección, el fondo oscuro se extiende también detrás de la cabecera fija y el canvas se desvanece para evitar que el último fotograma quede visible en la franja superior. El recurso usa canvas, caché limitada de frames, precarga inteligente, menú responsive y las tipografías Syncopate, Manrope y DM Mono.

GATACA / PÁGINA

VELARIS Scroll Landing

Arquitectura de lujo narrada a través del scroll

VELARIS Luxury House Scroll Landing transforma un travelling de diez segundos por una residencia contemporánea en una secuencia de 90 fotogramas WebP. El usuario controla el recorrido con el scroll: al bajar avanza desde la fachada hasta el dormitorio y al subir retrocede con suavidad.

Sobre la imagen aparecen de forma progresiva el HERO editorial «Luxury, without noise.» y cuatro escenas narrativas dedicadas a la llegada, la zona de día, los materiales y la suite privada. El fondo permanece fijado mediante canvas mientras los contenidos entran y salen con desplazamientos, máscaras y cambios de opacidad coordinados con el progreso.

La implementación utiliza HTML, CSS y JavaScript nativos, caché limitada de fotogramas, precarga de estados cercanos, DPR controlado, navegación responsive, fallback estático para movimiento reducido y una combinación tipográfica de Italiana, Manrope y DM Mono.

GATACA / PÁGINA

Luxury Estate HERO

Arquitectura, exclusividad y carga inmediata

Luxury Estate HERO presenta una inmobiliaria de alta gama mediante una composición cinematográfica de vídeo a pantalla completa. Todo el bloque principal del Hero —H1, texto y botones— queda centrado en la ventana y utiliza Italiana Regular 400, reforzada visualmente con un trazo muy sutil en el H1 y los botones para ganar presencia sin perder el carácter editorial.

La composición aumenta ligeramente el espaciado entre letras en título, párrafo, navegación, botones y metadata para mejorar la lectura y la sensación premium. Antes de que el vídeo esté listo se muestra como poster y preview oficial la imagen luxury-hero-web.jpg, sin desenfoque, cargada con prioridad alta para ofrecer contenido visual inmediato y mejorar la percepción de carga. El vídeo entra mediante una transición breve únicamente cuando el navegador confirma que puede reproducirse.

Los CTA sustituyen cualquier subrayado decorativo de hover por un pequeño diamante que aparece junto al texto. El vídeo reproduce en autoplay silencioso, loop y playsinline, se pausa fuera del viewport y con la pestaña oculta, y con prefers-reduced-motion se mantiene el poster estático. El código prioriza HTML semántico, mínimo JavaScript, carga rápida, fluidez y optimización SEO.

GATACA / PÁGINA

Watch Hero

El tiempo como objeto de lujo

Watch Hero construye una portada premium de relojería alrededor de un vídeo cinematográfico. La pieza mantiene el reloj como foco central y distribuye la narrativa en ambos laterales con los titulares “TIME” y “DEFINED”, creando una composición equilibrada y de fuerte carácter editorial.

El logo textual WATCH HERO ocupa la esquina superior izquierda y la navegación se alinea a la derecha. Los titulares, subtítulos y la marca utilizan Bodoni Moda para acercarse al contraste editorial del diseño aprobado, mientras que navegación, textos, CTA y metadata emplean Montserrat para mantener limpieza y legibilidad. Todo el contenido visible se presenta en mayúsculas.

La experiencia incorpora un CTA editorial, marcadores inferiores mínimos, menú hamburguesa accesible en móvil y gestión responsable del vídeo: autoplay silencioso, loop, playsinline, pausa fuera del viewport, pausa con la pestaña oculta y respeto por prefers-reduced-motion.