Saltar al contenido
Gataca Sites

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

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.

GATACA / PÁGINA

PURPLE Flat Geometric Hero

Geometría plana con comportamiento reactivo

PURPLE Flat Geometric Hero combina una identidad visual estrictamente plana con una red de nodos vectoriales animados sobre una retícula modular. La interfaz utiliza violeta profundo, blanco de alto contraste y una composición tipográfica de gran formato.

El fondo reacciona al cursor mediante nodos conectados, mientras cualquier clic genera una onda cuadrada expansiva. La cabecera incorpora navegación editorial, estado activo y un CTA de acceso directo; el pie añade telemetría de nodos, FPS, coordenadas y modo visual.

La demo está implementada con HTML, CSS y JavaScript nativos, sin Tailwind ni librerías externas. Incluye menú móvil, navegación accesible, DPR limitado y compatibilidad con prefers-reduced-motion.

GATACA / PÁGINA

AETHER Biomorphic Hero

Una interfaz que parece materia viva

AETHER construye un HERO oscuro y bioluminiscente alrededor de una identidad orgánica: fondo verde profundo, partículas fluidas, conexiones dinámicas y una composición tipográfica que mezcla sans de alto impacto con una serif itálica de aspecto editorial.

El titular cambia de forma mediante una palabra dinámica —muta, fluye, respira, evoluciona— mientras el fondo reacciona al movimiento del puntero. La cabecera incorpora navegación pill con highlight deslizante, controles circulares y un CTA encapsulado con efecto líquido.

La demo está adaptada a HTML, CSS y JavaScript nativos, sin Tailwind ni dependencias externas. Incluye menú móvil, reducción de movimiento, canvas limitado por DPR y explosiones de partículas en los controles principales.

GATACA / PÁGINA

NOVA Labs Kinetic Hero

Diseño digital que responde al movimiento

NOVA Labs combina una dirección editorial oscura con acentos lima y naranja, una cuadrícula técnica y un campo de partículas que se deforma alrededor del cursor. El H1 se revela carácter a carácter y contrapone tipografía sólida con un segundo renglón delineado para crear una entrada de gran impacto.

La cabecera presenta una marca ficticia, navegación semántica y un CTA tecnológico. Dos controles con comportamientos visuales diferentes —un disparador holográfico y un módulo inspirado en sintetizadores— completan la composición junto a indicadores de latencia, reloj y coordenadas del puntero.

Todo el recurso funciona con HTML, CSS y JavaScript nativos, sin Tailwind ni bibliotecas externas. La malla limita la densidad y resolución del canvas, se pausa fuera de pantalla y desaparece con movimiento reducido. En móvil la navegación pasa a un menú accesible, los botones se apilan y el titular conserva su jerarquía sin desbordamiento.

GATACA / PÁGINA

NEON PALMS 96 Cyberpunk Hero

Una noche digital que empieza antes de mostrar el titular

NEON PALMS 96 mezcla una paleta azul marino, verde manzana y rosa fucsia con palmeras vectoriales, horizonte de rejilla, sol fragmentado y referencias gráficas de los noventa. La composición presenta un estudio creativo dedicado a estrategia, identidad y experiencias digitales.

Una introducción breve carga la señal visual y después revela progresivamente la cabecera, las tres líneas del H1, el texto, los botones y el panel lateral. El fondo mantiene movimiento mediante la rejilla, el sol, las palmeras y el disco central, con ritmos distintos para crear profundidad sin vídeo ni recursos externos.

En móvil el contenido se apila y conserva el contraste. Si el usuario solicita reducir el movimiento, la introducción se omite y todo el contenido aparece de inmediato. El recurso incluye demo HTML/CSS/JavaScript, previsualización y Prompt Maestro.

GATACA / PÁGINA

MR TOBOR Cybersecurity Hero

MR TOBOR: ciberseguridad corporativa con una identidad hacker contundente

MR TOBOR utiliza el lenguaje visual de los monitores CRT y el fósforo verde para presentar una empresa de ciberseguridad actual. El hero comunica auditoría ofensiva, monitorización continua y respuesta ante incidentes con una jerarquía clara y dos llamadas a explorar los servicios.

La calavera digital de la derecha aporta el carácter hacker de la propuesta sin convertir la experiencia en un juego. Está dibujada como SVG, rodeada de señales técnicas y acompañada por tres pestañas que explican auditoría, defensa gestionada y respuesta. El panel y su marco emplean esquinas muy redondeadas, mientras los botones utilizan cortes angulares tecnológicos.

En móvil el contenido se apila, la calavera conserva su legibilidad y los botones mantienen zonas táctiles amplias. El recurso incluye demo HTML/CSS/JavaScript, previsualización y Prompt Maestro. Las animaciones se detienen si el usuario prefiere reducir el movimiento.

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.