Saltar al contenido
Gataca Sites

GATACA / PÁGINA

FOCUS Autofocus Hero

Un HERO construido alrededor del concepto de enfoque

FOCUS Autofocus Hero convierte el propio titular en la interacción principal. La palabra FOCUS. parte de una composición fotográfica oscura y responde al puntero mediante una máscara de enfoque circular, profundidad de campo, aberración cromática y un visor AF que cambia de estado cuando el usuario detiene el cursor.

La cabecera incorpora logotipo con diafragma animado, navegación tipo píldora con indicador deslizante y desenfoque selectivo, CTA con relleno originado desde el punto de entrada y menú móvil a pantalla completa.

El fondo combina azul marino, bokeh animado y una retícula sutil. Todo está desarrollado con HTML, CSS y JavaScript nativos, sin assets gráficos externos, y mantiene soporte para teclado, touch y prefers-reduced-motion.

GATACA / PÁGINA

NEXO Contact Form

Formulario de contacto completo y listo para integrar

NEXO Contact Form combina una columna informativa en verde petróleo con un formulario limpio de dos columnas, campos bien jerarquizados y un CTA naranja de alta visibilidad.

Incluye validación en español por campo, estados válido e inválido, contador de caracteres, consentimiento de privacidad, honeypot anti-spam, loading durante el envío y una pantalla de confirmación con animación de check.

La demo funciona de forma local y segura: no transmite datos mientras no se configure un endpoint. El recurso está construido con HTML, CSS y JavaScript nativos, usa Plus Jakarta Sans y se adapta a tablet y móvil sin dependencias de interfaz.

GATACA / PÁGINA

BLOQUE Brutalist Navigation

Un menú neo-brutalista con movimiento y carácter

BLOQUE Brutalist Navigation combina una barra amarilla de borde negro y sombra dura con un ticker superior continuo, una navegación de alto contraste y un desplegable de servicios que entra con animación escalonada.

Los enlaces principales reciben un relleno negro que sube desde abajo y una inclinación elástica. El botón rosa de llamada a la acción se comporta como una pieza física: gana sombra al hover y se hunde al pulsarlo. El desplegable incluye cuatro servicios codificados por color con iconos tipográficos y microcopy.

En móvil, la navegación se transforma en hamburguesa y el listado se despliega con efecto persiana. El recurso mantiene navegación por teclado, cierre con Escape, apertura por hover en escritorio, prefers-reduced-motion y las tipografías Archivo Black, Archivo y JetBrains Mono.

GATACA / PÁGINA

Mercurio Gooey Navigation

Navegación líquida con una microinteracción precisa

Mercurio Gooey Navigation convierte un menú horizontal compacto en una sección de navegación con personalidad propia. Dos manchas superpuestas se desplazan bajo cada opción y el filtro SVG gooey las fusiona visualmente para crear una estela líquida suave.

Al pasar el cursor o entrar con teclado, el indicador acompaña al elemento enfocado. Al hacer clic, el nuevo elemento pasa a ser el activo y la mancha principal ejecuta un pequeño rebote elástico. Cuando el usuario abandona el menú, el indicador vuelve automáticamente a la opción seleccionada.

El recurso está construido con HTML, CSS, SVG y JavaScript nativos, usa Manrope 600/700 y contempla navegación por teclado, prefers-reduced-motion y ajustes específicos para móvil.

GATACA / PÁGINA

LIONFire: El Gruñón Noble Hero

Un protagonista central con carácter y movimiento preciso

LIONFire — El Gruñón Noble Hero parte de un vídeo 16:9 de un león centrado y lo transforma en una secuencia optimizada de noventa y seis fotogramas WEBP. El personaje permanece en el centro del HERO mientras gira para seguir el cursor con un desplazamiento suave, sin cámara ni dependencias ajenas al front-end.

La composición reparte el contenido a izquierda y derecha para respetar el protagonismo del león: cabecera con marca, menú y CTA; bloque editorial con el título “El Gruñón Noble” en el lateral izquierdo; y un bloque de apoyo con descripción y métricas en el lateral derecho.

La dirección de arte combina una paleta arena luminosa, tipografía editorial con serif elegante para el H1 y sans geométrica para la interfaz. En móvil la composición se apila sin perder legibilidad y el seguimiento del león responde también al toque o arrastre.

GATACA / PÁGINA

KAGE Samurai Scroll Landing

Una LANDING que coreografía el duelo con el scroll

KAGE Samurai Scroll Landing transforma un vídeo de combate samurái en una secuencia de fotogramas WebP optimizados. El usuario avanza o retrocede en la acción mediante el scroll, mientras una composición editorial va revelando distintos bloques de texto sobre el patio lluvioso del templo.

La pieza mantiene el fondo fijado con canvas a pantalla completa y superpone un HERO central con el titular “WHEN / STEEL / SPEAKS.”, seguido por tres escenas laterales dedicadas a la postura, el duelo y la atmósfera. El resultado busca sentirse cinematográfico, disciplinado y rápido, sin convertir el recurso en una landing compleja.

La implementación usa HTML, CSS y JavaScript nativos, con caché limitada de fotogramas, precarga progresiva, navegación responsive y fallback estático para reduced motion. La combinación tipográfica mezcla Teko para titulares, Inter para cuerpo e IBM Plex Mono para etiquetas y microcopy técnico.

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

FRIEND Imagination Hero

Una portada contemplativa impulsada por vídeo

FRIEND Imagination Hero utiliza un vídeo local en bucle como fondo para recrear una escena atmosférica y artística, con una composición inspirada directamente en la referencia visual proporcionada: navegación superior liviana, logotipo FRIEND a la izquierda, botón de cabecera a la derecha y un bloque principal de copy más ancho en el lateral izquierdo, recolocado hacia arriba.

El titular combina una sans moderna y limpia con una palabra acentuada en serif itálica para replicar la sensibilidad editorial del diseño. Debe resolverse en exactamente dos líneas, como en la referencia: “Be in touch with” y “your imagination”. Además, todos los textos del bloque izquierdo deben compartir el mismo ancho visual y alinearse con la caja del H1. La escena conserva un gran espacio visual para que el vídeo sea protagonista, con superposiciones suaves, degradados fríos y reflejos lumínicos que refuerzan el carácter onírico del conjunto.

El recurso se resuelve con HTML, CSS y JavaScript nativos, vídeo optimizado, color sólido mientras carga, pausa fuera del viewport, comportamiento responsive y menú hamburguesa accesible en móvil. No depende de servicios externos ni de fuentes remotas.

GATACA / PÁGINA

TIMOTY Cursor Robot Hero

Un personaje central que mantiene el contacto con el puntero

TIMOTY Cursor Robot Hero en el que el robot pasa de perfil izquierdo a frontal y después a perfil derecho. El movimiento horizontal del cursor se traduce en una orientación real del personaje, sin cámara ni servicios externos. Modo Noche y Modo Día.

La composición mantiene el robot exactamente en el centro, por delante de un H1 gigante «TIMOTY.» con punto naranja. El HERO se simplifica para dejar en escena solo la palabra y el robot como protagonistas, con la cabecera encima y el contenido principal pegado visualmente justo debajo del menú. La palabra TIMOTY. se reajusta para ocupar mejor el ancho del HERO, centrarse con más claridad y alinearse visualmente como un gran rótulo horizontal detrás del robot.

La cabecera incorpora un selector de modo día/noche. En modo claro el nombre de fondo aparece en negro con el punto naranja y en modo oscuro aparece en blanco con el punto naranja. En móvil el menú se transforma en hamburguesa y la interacción responde al toque o arrastre. Con movimiento reducido se conserva el fotograma frontal estático.