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

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

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

ORBIT Cursor Robot Hero

Un robot que responde a la posición del visitante

ORBIT Cursor Robot Hero convierte una secuencia de vídeo en una interacción controlada por el puntero. Treinta y dos fotogramas WEBP Full HD recorren de forma continua el giro del robot: el motor selecciona un único fotograma opaco y avanza con aceleración y frenado suaves hasta la orientación correspondiente.

La presentación adopta una estética de laboratorio mecánico con verde petróleo, cobre, ámbar y cian. Antes de mostrar el HERO aparece una calibración breve; después entran de forma escalonada el logotipo, la navegación, el H1 «Máquinas que siguen tu mirada», los botones, los datos técnicos y el pie.

El cursor incorpora un anillo orbital y una onda de clic. La demo no usa cámara, no registra coordenadas y no realiza peticiones a terceros. En móvil responde al toque, conserva el robot visible y ofrece menú hamburguesa. Con movimiento reducido muestra un fotograma central estático y omite toda animación.

GATACA / PÁGINA

NEXUS 6G Hero

Una red del futuro convertida en experiencia visual

NEXUS 6G Hero presenta una identidad tecnológica oscura basada en cian eléctrico, violeta y superficies translúcidas. El gran titular centrado y la navegación limpia mantienen el foco en una propuesta de telefonía móvil futurista.

El fondo se genera en tiempo real mediante un canvas de ondas paralelas que reaccionan a la posición del puntero, deformando la malla como si la señal atravesara un campo cuántico. El HERO incorpora badge de producto, CTA principal y una barra inferior con beneficios clave.

La demo está construida con HTML, CSS y JavaScript nativos, sin frameworks ni dependencias externas, e incluye menú móvil accesible, DPR limitado, reducción de densidad en dispositivos táctiles y soporte para prefers-reduced-motion.

GATACA / PÁGINA

BIOCHEM Labs Hero

Una interfaz científica viva y reactiva

BIOCHEM Labs Hero combina azul marino profundo, cian bioluminiscente y capas de ondas suaves para construir una presentación de laboratorio digital. El fondo incorpora una red molecular animada cuyos átomos y enlaces reaccionan al puntero.

La composición incluye cabecera técnica, navegación, accesos de cliente, barra social, titular “Innovación en Bioquímica Avanzada”, métricas científicas y dos CTA. El botón “Ver simulación” abre un modal con una segunda escena molecular animada.

La demo está adaptada a HTML, CSS y JavaScript nativos, sin Tailwind ni Font Awesome. Incluye menú móvil, DPR limitado, movimiento reducido, foco visible y controles semánticos.

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.