Saltar al contenido
Gataca Sites

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

Aureon V12 Landing

Una campaña completa a pantalla completa

Aureon V12 Landing transforma el recurso hero en una landing editorial de automoción compuesta por tres paneles a pantalla completa, uno por modelo, usando las tres imágenes indicadas como narrativa principal. Cada bloque ocupa el 100% del viewport y el desplazamiento se resuelve con scroll-snap para que el usuario avance de un modelo al siguiente de forma limpia y contundente.

La experiencia mantiene el lenguaje visual premium: header fijo con navegación propia, fotografía protagonista, overlays contenidos, copy en inglés y llamadas a la acción elegantes. Cada panel cambia de modelo, titular, texto y metadatos sin necesidad de sobrecargar la interfaz, mientras el footer remata la pieza dentro del último bloque con una presentación coherente y profesional.

El código prioriza rendimiento y SEO: la primera imagen se trata como recurso prioritario, las siguientes se cargan de forma optimizada, el movimiento se apoya principalmente en CSS, y la página respeta prefers-reduced-motion reduciendo transiciones y desactivando efectos no esenciales cuando corresponde.

GATACA / PÁGINA

Aureon V12 HERO

Prestaciones visuales con carga inmediata

Aureon V12 HERO evoluciona a un carrusel editorial de tres imágenes de fondo para presentar varios deportivos exclusivos dentro de un mismo Hero. Cada imagen conserva un zoom progresivo tipo hero y se alterna con transición de opacidad y desenfoque, manteniendo la primera imagen como LCP prioritaria para rendimiento y SEO.

El copy visible del Hero permanece en inglés y cambia de manera sincronizada con cada modelo, aplicando también una transición de desenfoque suave para reforzar la sensación de campaña automovilística premium. Bruno Ace se utiliza en H1 y H2 para sostener el carácter futurista del diseño, mientras Lato resuelve navegación, párrafo, botones y metadatos con buena legibilidad.

El código sigue priorizando HTML semántico, CSS optimizado y un JavaScript muy ligero para el menú móvil y la rotación del contenido. También respeta prefers-reduced-motion, desactiva el carrusel cuando corresponde y mantiene una experiencia fluida, rápida y optimizada para SEO.

GATACA / PÁGINA

NIK Velocity Background

Movimiento cinematográfico a partir de una sola imagen

NIK Velocity Background transforma la imagen oficial del vehículo en un fondo dinámico mediante un zoom progresivo y continuo. No añade textos, botones, navegación, overlays ni controles: toda la experiencia se concentra en la fotografía.

La imagen cubre el viewport con object-fit: cover y parte de escala 1 hasta alcanzar aproximadamente 1.13 en 16 segundos. El movimiento es claramente perceptible y algo más ágil, pero mantiene una presencia premium sin resultar agresivo.

La animación se desactiva cuando el usuario solicita movimiento reducido mediante prefers-reduced-motion, conservando la imagen estática como fondo.

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.