Saltar al contenido
Gataca Sites

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

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

Shiftcase Portfolio

Portfolio que responde al usuario

Shiftcase Portfolio convierte la clásica galería de proyectos en una experiencia interactiva. Las filas se expanden y comprimen al pasar el cursor, de forma que el caso activo gana protagonismo mientras los proyectos vecinos ceden espacio sin perder contexto.

La sección incorpora filtros por Web, Branding, Motion y Producto, previews de vídeo cargadas únicamente cuando el usuario interactúa y una apertura de detalle mediante diálogo nativo. Cada caso puede mostrar servicios, año, impacto y una pieza visual ampliada, manteniendo una navegación rápida sin abandonar la página.

El recurso está optimizado para rendimiento: las imágenes usan carga diferida salvo las primeras, los vídeos permanecen sin src hasta el primer hover, no hay frameworks y la experiencia reduce movimiento automáticamente con prefers-reduced-motion. En móvil la rejilla se apila y mantiene el contenido esencial siempre visible.

GATACA / PÁGINA

Vértice Cero HERO

Acción cinematográfica con carga visual inmediata

Vértice Cero HERO presenta una nueva película de acción mediante una composición cinematográfica a pantalla completa. El vídeo ocupa todo el fondo y queda separado del contenido por una capa negra uniforme al 30%, suficiente para reforzar la lectura sin apagar la escena aérea.

La cabecera se reduce a los tres elementos esenciales solicitados: logotipo, menú y un único botón de llamada a la acción. El contenido principal no añade botones y concentra toda la fuerza en el titular, el texto de apoyo y una pequeña línea editorial. Todo el contenido visible está escrito en español.

Antes de que el vídeo pueda reproducirse se muestra un fotograma estático del mismo material, cargado como imagen prioritaria y desenfocado mediante CSS. El vídeo permanece silenciado, usa autoplay, loop, playsinline y preload de metadata, y se pausa fuera del viewport, con la pestaña oculta o cuando el usuario prefiere movimiento reducido. La implementación prioriza código mínimo, fluidez, Core Web Vitals y SEO.

GATACA / PÁGINA

Brava Surf HERO

Surf, mar y una entrada visual inmediata

Brava Surf HERO construye una portada cinematográfica para una escuela de surf mediante vídeo a pantalla completa, composición editorial y una capa negra uniforme al 45% entre el fondo y todo el contenido. El header se mantiene deliberadamente limpio: logotipo, menú y un único CTA para reservar clase.

El contenido visible del Hero está íntegramente en español. La jerarquía combina un titular amplio con una frase de apoyo y elimina por completo los botones dentro del cuerpo principal, dejando la acción comercial concentrada en la cabecera. El resultado mantiene el vídeo como protagonista sin sacrificar legibilidad.

Antes de que el vídeo esté listo aparece un poster desenfocado y optimizado, cargado como imagen prioritaria. El vídeo usa autoplay silencioso, loop, playsinline y preload de metadata; además se pausa fuera del viewport, con la pestaña oculta y cuando el usuario prefiere movimiento reducido. El código prioriza fluidez, Core Web Vitals y SEO.

GATACA / PÁGINA

Luxury Estate HERO

Arquitectura, exclusividad y carga inmediata

Luxury Estate HERO presenta una inmobiliaria de alta gama mediante una composición cinematográfica de vídeo a pantalla completa. Todo el bloque principal del Hero —H1, texto y botones— queda centrado en la ventana y utiliza Italiana Regular 400, reforzada visualmente con un trazo muy sutil en el H1 y los botones para ganar presencia sin perder el carácter editorial.

La composición aumenta ligeramente el espaciado entre letras en título, párrafo, navegación, botones y metadata para mejorar la lectura y la sensación premium. Antes de que el vídeo esté listo se muestra como poster y preview oficial la imagen luxury-hero-web.jpg, sin desenfoque, cargada con prioridad alta para ofrecer contenido visual inmediato y mejorar la percepción de carga. El vídeo entra mediante una transición breve únicamente cuando el navegador confirma que puede reproducirse.

Los CTA sustituyen cualquier subrayado decorativo de hover por un pequeño diamante que aparece junto al texto. El vídeo reproduce en autoplay silencioso, loop y playsinline, se pausa fuera del viewport y con la pestaña oculta, y con prefers-reduced-motion se mantiene el poster estático. El código prioriza HTML semántico, mínimo JavaScript, carga rápida, fluidez y optimización SEO.

GATACA / PÁGINA

Watch Hero

El tiempo como objeto de lujo

Watch Hero construye una portada premium de relojería alrededor de un vídeo cinematográfico. La pieza mantiene el reloj como foco central y distribuye la narrativa en ambos laterales con los titulares “TIME” y “DEFINED”, creando una composición equilibrada y de fuerte carácter editorial.

El logo textual WATCH HERO ocupa la esquina superior izquierda y la navegación se alinea a la derecha. Los titulares, subtítulos y la marca utilizan Bodoni Moda para acercarse al contraste editorial del diseño aprobado, mientras que navegación, textos, CTA y metadata emplean Montserrat para mantener limpieza y legibilidad. Todo el contenido visible se presenta en mayúsculas.

La experiencia incorpora un CTA editorial, marcadores inferiores mínimos, menú hamburguesa accesible en móvil y gestión responsable del vídeo: autoplay silencioso, loop, playsinline, pausa fuera del viewport, pausa con la pestaña oculta y respeto por prefers-reduced-motion.

GATACA / PÁGINA

Anima Hero

Una puerta visual hacia mundos imaginados

Anima Hero utiliza una escena fantástica en movimiento como lienzo completo. La composición respeta el espacio visual del vídeo: el H1 aparece en la zona superior izquierda acompañado únicamente por una frase breve, mientras el H2 ocupa la esquina inferior derecha como contrapunto.

Toda la tipografía utiliza exclusivamente Lavishly Yours en peso Regular 400. No existen navegación, botones, etiquetas, metadata ni textos adicionales. Entre el vídeo y el contenido se aplica una capa negra uniforme al 35%, suficiente para reforzar la lectura sin apagar los colores del mundo ilustrado.

El vídeo reproduce en autoplay, muted, loop y playsinline, sin controles ni manipulación artificial. Se pausa fuera del viewport, al ocultar la pestaña y cuando el usuario prefiere movimiento reducido. La versión móvil conserva la relación superior-izquierda / inferior-derecha evitando desbordamientos.

GATACA / PÁGINA

Mode Hero

Moda editorial para un presente en movimiento

Mode Hero utiliza un vídeo cinematográfico a pantalla completa como base de una campaña de moda futurista. La composición se mantiene deliberadamente limpia: marco editorial fino, navegación mínima, una marca MODE centrada con mayor presencia y un gran titular que domina el centro de la escena.

Toda la pieza utiliza exclusivamente Cinzel en peso Regular 400. El H1 aparece en mayúsculas con el texto “EL FUTURO / VISTE DISTINTO.”, mientras navegación, párrafo y CTA permanecen escritos en minúsculas para crear contraste de jerarquía sin recurrir a diferentes familias o pesos. No incorpora textos ni metadata en el borde inferior.

El vídeo no utiliza zoom, parallax ni manipulación de tiempo. Se pausa fuera del viewport, al ocultar la pestaña y cuando el usuario activa movimiento reducido. La versión móvil conserva la composición editorial y evita desbordamientos.

GATACA / PÁGINA

NIK Velocity HERO

Rendimiento futurista sin distracciones

NIK Velocity HERO plantea una campaña automovilística de alto rendimiento con el vídeo como protagonista absoluto. La composición utiliza negro profundo, blanco y verde manzana #aeff00, con una única capa negra global al 10% para conservar mucho más detalle del vídeo y un sistema gráfico técnico de líneas muy finas.

La cabecera coloca un logotipo NIK de mayor tamaño exactamente en el centro y reparte la navegación en dos enlaces a la izquierda y dos a la derecha, sin botones de llamada a la acción. El contenido principal tampoco incorpora CTA: únicamente el H1 “VELOCIDAD / REDEFINIDA.” y un texto breve sobre diseño aerodinámico, precisión y rendimiento.

Oxanium construye el carácter deportivo de títulos y navegación, mientras Manrope mantiene una lectura limpia en el texto explicativo. Al cargar el hero, el H1 y el párrafo aparecen una sola vez mediante un fundido de opacidad de 0% a 100%, con un pequeño desfase entre ambos y sin desplazamiento. En móvil la navegación se transforma en un menú hamburguesa accesible. El vídeo se pausa fuera del viewport, al ocultar la pestaña y cuando el usuario prefiere movimiento reducido.