Saltar al contenido
Gataca Sites

GATACA / PÁGINA

VELTRA Audio Hero

Un hero de producto pensado para vender y destacar marca

VELTRA Audio Hero propone una portada premium para ecommerce o campañas de tecnología, audio y lifestyle. La pieza se apoya en un fondo verde oscuro con degradados controlados, un gran producto en el lado derecho y una jerarquía tipográfica que mezcla un titular geométrico con una palabra gestual en acento lima.

La cabecera combina una marca centrada, un menú principal dentro de una cápsula clara y un bloque de iconos minimalistas para bolsa, favoritos y cuenta. El cuerpo principal presenta un kicker fino, un H1 de gran impacto, texto de apoyo, CTA primario, acceso a vídeo/historia y una fila de beneficios con iconografía circular. En la parte inferior se suma una navegación de categorías para reforzar el lenguaje de tienda.

El resultado debe sentirse limpio, luminoso, tecnológico y comercial sin caer en el estilo SaaS. La demo se resuelve con HTML, CSS y JavaScript ligero para el menú móvil. Los elementos principales aparecen de forma secuencial mediante un fade puro de 0 a 100% de opacidad, uno detrás de otro, manteniendo una composición estable, accesible y perfectamente reutilizable en marcas de electrónica, audio, moda o producto premium.

GATACA / PÁGINA

X-RAY Product Explorer

Descubre el producto desde dentro

X-RAY Product Explorer transforma una ficha técnica en una experiencia visual. Una cámara fotográfica realista pasa del estado montado a una vista técnica explosionada conforme avanza el scroll, revelando óptica, sensor, procesador y batería sin perder el contexto del conjunto.

La demo utiliza dos renders WebP transparentes, locales y optimizados: el producto montado se precarga y la vista explosionada se solicita cuando la sección se aproxima al viewport. Cada etapa desplaza un foco técnico, actualiza la explicación y muestra datos del componente. En escritorio añade una inclinación mínima ligada al cursor; en móvil sustituye el recorrido largo por controles táctiles directos.

La sección está preparada para reutilizarse con tecnología, automoción, relojería, calzado, mobiliario o maquinaria. Incluye clases encapsuladas, contenido semántico, navegación por teclado, fallback visual, reducción de movimiento, pausa fuera del viewport y animación coordinada con requestAnimationFrame.