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

CYBERBOT Motion Hero

Robótica autónoma presentada como una experiencia cinematográfica

CYBERBOT Autonomous Motion Hero utiliza un vídeo Full HD optimizado como fondo para situar un robot expresivo dentro de un laboratorio mecánico. Una capa de contraste, una retícula técnica y los acentos cian mantienen el texto y el formulario perfectamente legibles.

La composición incluye navegación conceptual, el titular «El futuro del movimiento autónomo», beneficios técnicos, llamadas a la acción y un formulario glassmorphism que simula el proceso de solicitud sin enviar ni guardar datos. El usuario puede activar o silenciar el audio del vídeo desde un control accesible.

El recurso funciona con HTML, CSS y JavaScript nativos. El vídeo se detiene fuera de pantalla o cuando la pestaña queda oculta; en movimiento reducido se conserva la imagen estática. La versión móvil reorganiza el contenido, incorpora menú hamburguesa y mantiene controles táctiles amplios.

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

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

Cursor Cat Interactive Hero

Una mirada que responde al visitante

Cursor Cat transforma un vídeo de diez segundos en fotogramas WEBP de 1920 × 1080. El HERO presenta un concepto editorial para MISO: al mover el puntero, interpola los pasos disponibles de la cabeza y la mirada sin buscar la posición temporal dentro del vídeo. En pantallas táctiles responde a un toque y vuelve al centro; con movimiento reducido permanece en una imagen fija.

La interacción está limitada a los movimientos visibles en el vídeo original. Algunas diagonales son aproximadas y no se generan gestos inexistentes. Las imágenes se incluyen en Core y también se entregan por separado para alojarlas en otro proyecto. El recurso contiene una demo, imagen de previsualización y Prompt Maestro. No necesita servicios externos, cámara ni almacenamiento de movimientos del usuario.

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

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.