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

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

VELARIS Scroll Landing

Arquitectura de lujo narrada a través del scroll

VELARIS Luxury House Scroll Landing transforma un travelling de diez segundos por una residencia contemporánea en una secuencia de 90 fotogramas WebP. El usuario controla el recorrido con el scroll: al bajar avanza desde la fachada hasta el dormitorio y al subir retrocede con suavidad.

Sobre la imagen aparecen de forma progresiva el HERO editorial «Luxury, without noise.» y cuatro escenas narrativas dedicadas a la llegada, la zona de día, los materiales y la suite privada. El fondo permanece fijado mediante canvas mientras los contenidos entran y salen con desplazamientos, máscaras y cambios de opacidad coordinados con el progreso.

La implementación utiliza HTML, CSS y JavaScript nativos, caché limitada de fotogramas, precarga de estados cercanos, DPR controlado, navegación responsive, fallback estático para movimiento reducido y una combinación tipográfica de Italiana, Manrope y DM Mono.

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

Cursor Cat Interactive Hero

Una mirada que responde al visitante

Cursor Cat transforma un vídeo de diez segundos en fotogramas WEBP de 1920 × 1080. El HERO presenta un concepto editorial para MISO: al mover el puntero, interpola los pasos disponibles de la cabeza y la mirada sin buscar la posición temporal dentro del vídeo. En pantallas táctiles responde a un toque y vuelve al centro; con movimiento reducido permanece en una imagen fija.

La interacción está limitada a los movimientos visibles en el vídeo original. Algunas diagonales son aproximadas y no se generan gestos inexistentes. Las imágenes se incluyen en Core y también se entregan por separado para alojarlas en otro proyecto. El recurso contiene una demo, imagen de previsualización y Prompt Maestro. No necesita servicios externos, cámara ni almacenamiento de movimientos del usuario.

GATACA / PÁGINA

NOCTIS Astronomy Landing

Una landing ilustrada para mirar más allá de lo visible

NOCTIS Astronomy Landing recrea una dirección artística nocturna basada en ilustración vectorial: cielo violeta, colinas en silueta, luna, árbol, farola, personajes, planetas e iconografía temática construidos directamente con SVG y CSS.

La landing cambia por completo los textos del diseño de referencia y desarrolla un concepto editorial en español alrededor de la observación astronómica. El recorrido incluye hero, marcas ficticias, archivo de contenidos, dos bloques narrativos con ilustraciones y footer visual.

La tipografía combina una familia condensada de alto contraste para titulares con una sans serif limpia para lectura. La paleta se apoya en violeta profundo, azul eléctrico, cian y luz marfil. En móvil la navegación se transforma en menú hamburguesa a pantalla completa y todos los vectores se reencuadran para conservar legibilidad.

GATACA / PÁGINA

NEONIX Zoom Background

Un fondo animado con retrato y movimiento sutil

NEONIX Zoom Background transforma un único fotograma en un fondo vivo listo para cubrir secciones completas. La imagen ocupa todo el viewport mediante object-fit: cover y ejecuta un zoom progresivo adelante y atrás en bucle a una velocidad media para mantener interés visual sin distraer.

El recurso está pensado para usar el retrato como capa de fondo en heros, portadas, piezas narrativas o layouts experimentales, manteniendo una implementación muy ligera: HTML + CSS y sin controles visibles.

Incluye compatibilidad con prefers-reduced-motion, de modo que la animación se desactiva cuando el usuario prefiere menos movimiento.

GATACA / PÁGINA

NEONIX Scroll Landing

Una landing construida alrededor del movimiento por scroll

NEONIX Scroll Landing utiliza una secuencia de 80 fotogramas WebP renderizada sobre canvas para convertir el desplazamiento vertical en una animación reversible. Al bajar, la secuencia avanza; al subir, retrocede de forma natural. El recurso evita depender de un vídeo de fondo y mejora el control de la experiencia especialmente en dispositivos móviles.

El hero mantiene la imagen animada como fondo fijo mientras los textos, controles y elementos de interfaz se desplazan por encima. Después continúa con secciones de presentación, servicios, clientes, llamada a la acción y footer, manteniendo una identidad visual coherente en tonos burdeos y rosa.

La implementación incorpora caché limitada de frames, precarga progresiva, canvas con DPR controlado, IntersectionObserver, pausa fuera del área relevante, navegación activa y soporte para prefers-reduced-motion.

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

Nexus Particle Hero

Una interfaz que demuestra que está viva

NEXUS Particle Hero convierte el movimiento generativo en el argumento central de una portada digital. Cientos de nodos creados mediante Canvas 2D forman una estructura tridimensional que cambia entre tres estados: Core, Flow y Field. No utiliza vídeos, imágenes, modelos 3D ni librerías externas.

El sistema responde al puntero deformando localmente la nube de partículas y permite lanzar una onda expansiva desde el CTA «Activate pulse». Los controles accesibles cambian la formación en tiempo real, mientras la composición editorial mantiene el contenido y la propuesta de valor por delante del efecto.

El rendimiento se adapta al dispositivo: limita el DPR, reduce la densidad de nodos en móvil, agrupa el dibujo en un único requestAnimationFrame, se detiene fuera del viewport o con la pestaña oculta y ofrece una escena estática funcional con prefers-reduced-motion. Si JavaScript no está disponible, una estructura CSS conserva el equilibrio visual del hero.