Saltar al contenido
Gataca Sites

GATACA / PÁGINA

NEXO Contact Form

Formulario de contacto completo y listo para integrar

NEXO Contact Form combina una columna informativa en verde petróleo con un formulario limpio de dos columnas, campos bien jerarquizados y un CTA naranja de alta visibilidad.

Incluye validación en español por campo, estados válido e inválido, contador de caracteres, consentimiento de privacidad, honeypot anti-spam, loading durante el envío y una pantalla de confirmación con animación de check.

La demo funciona de forma local y segura: no transmite datos mientras no se configure un endpoint. El recurso está construido con HTML, CSS y JavaScript nativos, usa Plus Jakarta Sans y se adapta a tablet y móvil sin dependencias de interfaz.

GATACA / PÁGINA

BLOQUE Brutalist Navigation

Un menú neo-brutalista con movimiento y carácter

BLOQUE Brutalist Navigation combina una barra amarilla de borde negro y sombra dura con un ticker superior continuo, una navegación de alto contraste y un desplegable de servicios que entra con animación escalonada.

Los enlaces principales reciben un relleno negro que sube desde abajo y una inclinación elástica. El botón rosa de llamada a la acción se comporta como una pieza física: gana sombra al hover y se hunde al pulsarlo. El desplegable incluye cuatro servicios codificados por color con iconos tipográficos y microcopy.

En móvil, la navegación se transforma en hamburguesa y el listado se despliega con efecto persiana. El recurso mantiene navegación por teclado, cierre con Escape, apertura por hover en escritorio, prefers-reduced-motion y las tipografías Archivo Black, Archivo y JetBrains Mono.

GATACA / PÁGINA

Mercurio Gooey Navigation

Navegación líquida con una microinteracción precisa

Mercurio Gooey Navigation convierte un menú horizontal compacto en una sección de navegación con personalidad propia. Dos manchas superpuestas se desplazan bajo cada opción y el filtro SVG gooey las fusiona visualmente para crear una estela líquida suave.

Al pasar el cursor o entrar con teclado, el indicador acompaña al elemento enfocado. Al hacer clic, el nuevo elemento pasa a ser el activo y la mancha principal ejecuta un pequeño rebote elástico. Cuando el usuario abandona el menú, el indicador vuelve automáticamente a la opción seleccionada.

El recurso está construido con HTML, CSS, SVG y JavaScript nativos, usa Manrope 600/700 y contempla navegación por teclado, prefers-reduced-motion y ajustes específicos para móvil.

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

Croma Services

Una rejilla de servicios con impacto visual

Croma Services toma como punto de partida una rejilla editorial de bloques asimétricos, pero sustituye el acabado monocromático por tarjetas con color y profundidad. Cada caja funciona como una pieza autónoma capaz de presentar un servicio clave con un ritmo visual mucho más atractivo.

La sección organiza seis servicios en una composición escalonada: una tarjeta alta a la izquierda, un bloque horizontal superior, dos tarjetas intermedias y un cierre con un gran bloque ancho acompañado por una tarjeta compacta. El resultado se siente moderno, claro y adaptable a agencias, estudios, consultoras o equipos de marketing.

La implementación evita dependencias externas más allá de la tipografía, usa HTML semántico y CSS responsive, y resuelve la identidad visual mediante gradientes, halos y formas abstractas puramente CSS. En móvil toda la rejilla se apila sin perder jerarquía ni legibilidad.

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.