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

NOCTIS Astronomy Landing

Una landing ilustrada para mirar más allá de lo visible

NOCTIS Astronomy Landing recrea una dirección artística nocturna basada en ilustración vectorial: cielo violeta, colinas en silueta, luna, árbol, farola, personajes, planetas e iconografía temática construidos directamente con SVG y CSS.

La landing cambia por completo los textos del diseño de referencia y desarrolla un concepto editorial en español alrededor de la observación astronómica. El recorrido incluye hero, marcas ficticias, archivo de contenidos, dos bloques narrativos con ilustraciones y footer visual.

La tipografía combina una familia condensada de alto contraste para titulares con una sans serif limpia para lectura. La paleta se apoya en violeta profundo, azul eléctrico, cian y luz marfil. En móvil la navegación se transforma en menú hamburguesa a pantalla completa y todos los vectores se reencuadran para conservar legibilidad.

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

CWCRYPTO Investing Landing

Una landing fintech propia para una marca de inversión digital

CWCRYPTO Investing Landing desarrolla una experiencia one-page con identidad propia: fondo oscuro con retícula sutil, acento verde lima, jerarquía tipográfica marcada y contenido real en HTML para favorecer SEO, edición y rendimiento.

La página se centra en claridad de cartera, seguridad, automatización e información útil. El hero combina navegación, propuesta de valor, prueba social y mockups móviles; después aparecen bloques sobre decisiones inteligentes, protección de cuenta, visión de portfolio, onboarding en tres pasos, herramientas de control y un footer editorial completo.

El resultado mantiene la fuerza visual del lenguaje fintech contemporáneo, pero utiliza mensajes originales de CWCRYPTO y una narrativa diferenciada, adaptable a proyectos de inversión, Web3 o productos financieros digitales.

GATACA / PÁGINA

Domia Smart Home Landing

Una landing completa para hogar conectado

Domia Smart Home Landing amplía el Hero original hasta convertirlo en una experiencia completa para una marca de automatización doméstica. La portada mantiene la fotografía futurista, la tipografía editorial y la secuencia de cuatro pasos, mientras el resto de la página desarrolla la propuesta de producto de forma coherente y profesional.

La landing incorpora bloques de funciones, ecosistema de dispositivos, automatizaciones diarias, control y privacidad, llamada a la acción final y footer. La dirección visual alterna marfil, verde salvia y carbón para crear ritmo sin romper la identidad del Hero.

El desarrollo prioriza rendimiento: la imagen principal se precarga y funciona como LCP, el contenido restante se resuelve con HTML, CSS y SVG inline, y el JavaScript queda limitado al menú móvil accesible, la navegación activa y los revelados de entrada. No utiliza frameworks ni librerías visuales innecesarias.

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

Futvehicle Landing

De un hero a una campaña completa de movilidad

Futvehicle Landing extiende el lenguaje visual de Futvehicle Hero a una web completa de arquitectura y transporte. El hero conserva el vídeo del sistema suspendido, la composición marfil y el titular “MOVILIDAD / EN SUSPENSIÓN”, y funciona como entrada a una narrativa de página única.

La landing desarrolla seis momentos editoriales: principio de movilidad, sistema de cuatro capas, impacto urbano, estructura técnica, ruta y cierre de campaña. La composición alterna marfil, tinta y morado #c79dff, mantiene Instrument Sans, Anybody y Newsreader, y evita deliberadamente patrones de interfaz SaaS.

La interacción es contenida: el H1 del hero flota suavemente en un bucle vertical constante, igual que en Futvehicle Hero; además hay navegación por anclas reales dentro de la misma página, revelados suaves al entrar en viewport y reproducción de vídeo respetuosa con visibilidad, viewport y prefers-reduced-motion. No utiliza parallax, scroll hijacking, controles de vídeo ni dependencias externas de JavaScript.

GATACA / PÁGINA

Materia Landing

Una experiencia editorial controlada por scroll

Materia Landing reproduce la experiencia MATERIA / LAB 02 como una landing cinematográfica: cabecera fija transparente, hero de vídeo, transición progresiva hacia una segunda capa audiovisual y cinco paneles editoriales vinculados a la navegación.

El segundo vídeo no se reproduce de forma convencional: su tiempo se sincroniza con el progreso del scroll. En escritorio se interpola el currentTime para suavizar el scrub; en móvil se cuantiza a una cadencia limitada y se dibuja el fotograma decodificado sobre canvas para evitar el microtemblor habitual de Safari y otros navegadores móviles.

La composición mantiene los colores naranja, blanco cálido y verde ácido, Manrope como tipografía principal y Newsreader cursiva para los énfasis. Incluye Laboratorio, Investigación, Materiales, Publicaciones y Contacto, además de navegación activa y menú responsive.