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

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

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

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.