Saltar al contenido
Gataca Sites

GATACA / PÁGINA

CWCRYPTO Investing Landing

Una landing fintech propia para una marca de inversión digital

CWCRYPTO Investing Landing desarrolla una experiencia one-page con identidad propia: fondo oscuro con retícula sutil, acento verde lima, jerarquía tipográfica marcada y contenido real en HTML para favorecer SEO, edición y rendimiento.

La página se centra en claridad de cartera, seguridad, automatización e información útil. El hero combina navegación, propuesta de valor, prueba social y mockups móviles; después aparecen bloques sobre decisiones inteligentes, protección de cuenta, visión de portfolio, onboarding en tres pasos, herramientas de control y un footer editorial completo.

El resultado mantiene la fuerza visual del lenguaje fintech contemporáneo, pero utiliza mensajes originales de CWCRYPTO y una narrativa diferenciada, adaptable a proyectos de inversión, Web3 o productos financieros digitales.

GATACA / PÁGINA

LUMORA Gradient Hero

Un hero limpio con una interacción que invita a explorar

LUMORA Gradient Hero propone una cabecera premium de lectura inmediata para webs de servicios, estudios, productos digitales o marcas personales. El fondo degradado, la iluminación suave y los paneles translúcidos mantienen la composición clara y contemporánea.

La escena incorpora una gran esfera formada por partículas: gira y separa los puntos próximos al pasar el cursor. Cualquier clic dentro del HERO —sobre la esfera, el menú, los botones o el fondo— genera una expansión que vuelve suavemente a su forma sin bloquear la acción pulsada. En móvil responde al toque. El efecto se pausa fuera de pantalla y respeta la preferencia de movimiento reducido.

El logo bicolor, el H1, el párrafo y los dos CTA se mantienen como HTML real para facilitar indexación, accesibilidad y edición posterior. El resultado combina claridad, rendimiento y una interacción visual reconocible.

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.

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.

GATACA / PÁGINA

Shiftcase Portfolio

Portfolio que responde al usuario

Shiftcase Portfolio convierte la clásica galería de proyectos en una experiencia interactiva. Las filas se expanden y comprimen al pasar el cursor, de forma que el caso activo gana protagonismo mientras los proyectos vecinos ceden espacio sin perder contexto.

La sección incorpora filtros por Web, Branding, Motion y Producto, previews de vídeo cargadas únicamente cuando el usuario interactúa y una apertura de detalle mediante diálogo nativo. Cada caso puede mostrar servicios, año, impacto y una pieza visual ampliada, manteniendo una navegación rápida sin abandonar la página.

El recurso está optimizado para rendimiento: las imágenes usan carga diferida salvo las primeras, los vídeos permanecen sin src hasta el primer hover, no hay frameworks y la experiencia reduce movimiento automáticamente con prefers-reduced-motion. En móvil la rejilla se apila y mantiene el contenido esencial siempre visible.

GATACA / PÁGINA

Domia Smart Home Landing

Una landing completa para hogar conectado

Domia Smart Home Landing amplía el Hero original hasta convertirlo en una experiencia completa para una marca de automatización doméstica. La portada mantiene la fotografía futurista, la tipografía editorial y la secuencia de cuatro pasos, mientras el resto de la página desarrolla la propuesta de producto de forma coherente y profesional.

La landing incorpora bloques de funciones, ecosistema de dispositivos, automatizaciones diarias, control y privacidad, llamada a la acción final y footer. La dirección visual alterna marfil, verde salvia y carbón para crear ritmo sin romper la identidad del Hero.

El desarrollo prioriza rendimiento: la imagen principal se precarga y funciona como LCP, el contenido restante se resuelve con HTML, CSS y SVG inline, y el JavaScript queda limitado al menú móvil accesible, la navegación activa y los revelados de entrada. No utiliza frameworks ni librerías visuales innecesarias.

GATACA / PÁGINA

Orbital Pricing

Precios con profundidad y formas orbitales

Orbital Pricing plantea una dirección visual completamente distinta a Ritmo Pricing y Obsidian Pricing. El fondo oscuro se construye con grandes círculos desenfocados, halos de color y transparencias controladas que generan sensación de profundidad sin sacrificar legibilidad.

Los tres planes combinan paneles translúcidos con grandes medallones circulares para los precios y una jerarquía visual muy marcada. El plan central gana protagonismo mediante escala, luz y color, mientras los laterales mantienen un carácter más sobrio. La composición se adapta a servicios digitales, membresías, estudios creativos o productos premium.

La implementación utiliza HTML semántico, CSS compacto y no necesita JavaScript para funcionar. En móvil los planes se apilan y los fondos circulares se simplifican. También respeta prefers-reduced-motion y evita animaciones continuas de alto coste.

GATACA / PÁGINA

Obsidian Pricing

Precios oscuros con estructura horizontal

Obsidian Pricing cambia por completo el lenguaje visual de una tabla de precios tradicional. En lugar de tarjetas verticales, organiza cada plan como una franja horizontal de gran formato sobre un fondo negro carbón, con una rejilla técnica muy sutil y acentos violeta y naranja.

El plan recomendado rompe la secuencia con un bloque violeta de alto contraste, mientras los demás niveles permanecen integrados en el fondo mediante líneas finas. La información se distribuye por columnas: nombre, descripción, precio, beneficios y CTA, facilitando una lectura rápida sin recurrir a cajas repetitivas.

El selector mensual/anual actualiza los importes con JavaScript mínimo y accesible. La sección es completamente responsive, conserva el estado mensual si JavaScript falla y respeta prefers-reduced-motion.

GATACA / PÁGINA

Ritmo Pricing

Precios con jerarquía editorial

Ritmo Pricing evita la apariencia de una tabla SaaS genérica mediante una composición editorial de alto contraste, líneas finas, tipografía contundente y una paleta marfil, negro y verde ácido. La sección presenta tres niveles con una jerarquía clara y destaca el plan intermedio sin recurrir a sombras o efectos excesivos.

El selector mensual/anual modifica los precios de forma inmediata y accesible, manteniendo la interfaz ligera y comprensible. Cada plan incluye beneficios concretos, CTA propio y una estructura fácil de adaptar a servicios, software, membresías o productos digitales.

La implementación usa HTML semántico, CSS responsive y JavaScript mínimo, sin dependencias externas aparte de las tipografías. En móvil los planes se apilan sin perder jerarquía, y prefers-reduced-motion desactiva las transiciones no esenciales.