Saltar al contenido
Gataca Sites

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

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.