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

NEONIX Scroll Landing

Una landing construida alrededor del movimiento por scroll

NEONIX Scroll Landing utiliza una secuencia de 80 fotogramas WebP renderizada sobre canvas para convertir el desplazamiento vertical en una animación reversible. Al bajar, la secuencia avanza; al subir, retrocede de forma natural. El recurso evita depender de un vídeo de fondo y mejora el control de la experiencia especialmente en dispositivos móviles.

El hero mantiene la imagen animada como fondo fijo mientras los textos, controles y elementos de interfaz se desplazan por encima. Después continúa con secciones de presentación, servicios, clientes, llamada a la acción y footer, manteniendo una identidad visual coherente en tonos burdeos y rosa.

La implementación incorpora caché limitada de frames, precarga progresiva, canvas con DPR controlado, IntersectionObserver, pausa fuera del área relevante, navegación activa y soporte para prefers-reduced-motion.

GATACA / PÁGINA

Domia Smart Home HERO

Domótica con una estética cálida y editorial

Domia Smart Home HERO adapta una composición de hogar conectado a una experiencia completamente en español. La imagen principal ocupa el fondo completo del Hero y funciona como elemento visual prioritario, dejando la zona izquierda preparada para el titular, la prueba social, el CTA y una secuencia de cuatro pasos.

La dirección tipográfica combina Playfair Display para el titular con Plus Jakarta Sans para navegación, texto e interfaz. La cabecera mantiene una navegación ligera con separadores y acciones mínimas, mientras las tarjetas inferiores explican de forma visual el proceso de puesta en marcha del sistema doméstico.

El código prioriza rendimiento y Core Web Vitals: la imagen se precarga y se renderiza como un elemento img real con prioridad alta, el JavaScript se limita al menú móvil accesible y las microinteracciones se reducen automáticamente con prefers-reduced-motion.

GATACA / PÁGINA

Orbital Pricing

Precios con profundidad y formas orbitales

Orbital Pricing plantea una dirección visual completamente distinta a Ritmo Pricing y Obsidian Pricing. El fondo oscuro se construye con grandes círculos desenfocados, halos de color y transparencias controladas que generan sensación de profundidad sin sacrificar legibilidad.

Los tres planes combinan paneles translúcidos con grandes medallones circulares para los precios y una jerarquía visual muy marcada. El plan central gana protagonismo mediante escala, luz y color, mientras los laterales mantienen un carácter más sobrio. La composición se adapta a servicios digitales, membresías, estudios creativos o productos premium.

La implementación utiliza HTML semántico, CSS compacto y no necesita JavaScript para funcionar. En móvil los planes se apilan y los fondos circulares se simplifican. También respeta prefers-reduced-motion y evita animaciones continuas de alto coste.

GATACA / PÁGINA

Aureon V12 Landing

Una campaña completa a pantalla completa

Aureon V12 Landing transforma el recurso hero en una landing editorial de automoción compuesta por tres paneles a pantalla completa, uno por modelo, usando las tres imágenes indicadas como narrativa principal. Cada bloque ocupa el 100% del viewport y el desplazamiento se resuelve con scroll-snap para que el usuario avance de un modelo al siguiente de forma limpia y contundente.

La experiencia mantiene el lenguaje visual premium: header fijo con navegación propia, fotografía protagonista, overlays contenidos, copy en inglés y llamadas a la acción elegantes. Cada panel cambia de modelo, titular, texto y metadatos sin necesidad de sobrecargar la interfaz, mientras el footer remata la pieza dentro del último bloque con una presentación coherente y profesional.

El código prioriza rendimiento y SEO: la primera imagen se trata como recurso prioritario, las siguientes se cargan de forma optimizada, el movimiento se apoya principalmente en CSS, y la página respeta prefers-reduced-motion reduciendo transiciones y desactivando efectos no esenciales cuando corresponde.

GATACA / PÁGINA

Aureon V12 HERO

Prestaciones visuales con carga inmediata

Aureon V12 HERO evoluciona a un carrusel editorial de tres imágenes de fondo para presentar varios deportivos exclusivos dentro de un mismo Hero. Cada imagen conserva un zoom progresivo tipo hero y se alterna con transición de opacidad y desenfoque, manteniendo la primera imagen como LCP prioritaria para rendimiento y SEO.

El copy visible del Hero permanece en inglés y cambia de manera sincronizada con cada modelo, aplicando también una transición de desenfoque suave para reforzar la sensación de campaña automovilística premium. Bruno Ace se utiliza en H1 y H2 para sostener el carácter futurista del diseño, mientras Lato resuelve navegación, párrafo, botones y metadatos con buena legibilidad.

El código sigue priorizando HTML semántico, CSS optimizado y un JavaScript muy ligero para el menú móvil y la rotación del contenido. También respeta prefers-reduced-motion, desactiva el carrusel cuando corresponde y mantiene una experiencia fluida, rápida y optimizada para SEO.

GATACA / PÁGINA

Mode Hero

Moda editorial para un presente en movimiento

Mode Hero utiliza un vídeo cinematográfico a pantalla completa como base de una campaña de moda futurista. La composición se mantiene deliberadamente limpia: marco editorial fino, navegación mínima, una marca MODE centrada con mayor presencia y un gran titular que domina el centro de la escena.

Toda la pieza utiliza exclusivamente Cinzel en peso Regular 400. El H1 aparece en mayúsculas con el texto “EL FUTURO / VISTE DISTINTO.”, mientras navegación, párrafo y CTA permanecen escritos en minúsculas para crear contraste de jerarquía sin recurrir a diferentes familias o pesos. No incorpora textos ni metadata en el borde inferior.

El vídeo no utiliza zoom, parallax ni manipulación de tiempo. Se pausa fuera del viewport, al ocultar la pestaña y cuando el usuario activa movimiento reducido. La versión móvil conserva la composición editorial y evita desbordamientos.

GATACA / PÁGINA

NIK Velocity Background

Movimiento cinematográfico a partir de una sola imagen

NIK Velocity Background transforma la imagen oficial del vehículo en un fondo dinámico mediante un zoom progresivo y continuo. No añade textos, botones, navegación, overlays ni controles: toda la experiencia se concentra en la fotografía.

La imagen cubre el viewport con object-fit: cover y parte de escala 1 hasta alcanzar aproximadamente 1.13 en 16 segundos. El movimiento es claramente perceptible y algo más ágil, pero mantiene una presencia premium sin resultar agresivo.

La animación se desactiva cuando el usuario solicita movimiento reducido mediante prefers-reduced-motion, conservando la imagen estática como fondo.

GATACA / PÁGINA

NIK Velocity HERO

Rendimiento futurista sin distracciones

NIK Velocity HERO plantea una campaña automovilística de alto rendimiento con el vídeo como protagonista absoluto. La composición utiliza negro profundo, blanco y verde manzana #aeff00, con una única capa negra global al 10% para conservar mucho más detalle del vídeo y un sistema gráfico técnico de líneas muy finas.

La cabecera coloca un logotipo NIK de mayor tamaño exactamente en el centro y reparte la navegación en dos enlaces a la izquierda y dos a la derecha, sin botones de llamada a la acción. El contenido principal tampoco incorpora CTA: únicamente el H1 “VELOCIDAD / REDEFINIDA.” y un texto breve sobre diseño aerodinámico, precisión y rendimiento.

Oxanium construye el carácter deportivo de títulos y navegación, mientras Manrope mantiene una lectura limpia en el texto explicativo. Al cargar el hero, el H1 y el párrafo aparecen una sola vez mediante un fundido de opacidad de 0% a 100%, con un pequeño desfase entre ambos y sin desplazamiento. En móvil la navegación se transforma en un menú hamburguesa accesible. El vídeo se pausa fuera del viewport, al ocultar la pestaña y cuando el usuario prefiere movimiento reducido.

GATACA / PÁGINA

Space Nav HERO

Navegación orbital como campaña visual

Space Nav HERO plantea una experiencia aeroespacial distinta al resto de recursos de Gataca. El vídeo ocupa todo el hero y recibe una única capa negra al 45% para mantener la imagen visible y asegurar contraste.

La composición mezcla blanco, naranja y celeste dentro de un sistema gráfico angular: marco técnico, navegación mínima, titular central en dos líneas “NAVEGAMOS” / “AL VACÍO.”, dos acciones y una línea inferior de telemetría. El resultado se acerca a una campaña de exploración e infraestructura orbital, no a una interfaz SaaS.

La implementación utiliza Rajdhani para reforzar el carácter técnico, incluye menú móvil compacto, foco visible y pausa inteligente del vídeo fuera del viewport, al ocultar la pestaña o cuando el usuario prefiere movimiento reducido.