Proyecto · Demo

BRIGANT

BRIGANT es una tienda de moda inventada. La he creado para enseñar la base de cualquier ficha de ecommerce: una interfaz que se vea bien, una experiencia que se use sin pensar y un SEO técnico que no se deje nada. Es una landing estática en Astro, sin backend ni base de datos, y la compra es una simulación.

Año: 2026
Tipo: Demo de interfaz y experiencia de usuario
Mi papel: Diseño, desarrollo y optimización
Stack: Astro · CSS y JavaScript propios · WebP · JSON-LD
En línea: jcalarcon.dev/demos/brigant
Ficticio: Marca, producto y modelo. Imágenes generadas con IA

Ficha del vestido Nocturna de BRIGANT: la modelo sobre fondo marfil con la palabra NOCTURNA en contorno, el precio y el botón para elegir talla — La ficha del vestido Nocturna: la foto manda y todo lo demás se aparta.

Puedes recorrerla tú mismo: abrir la demo de BRIGANT. Elige una talla, añade el vestido a la bolsa y llega hasta la confirmación; no se cobra nada ni se guarda nada.

UI: una ficha que parezca de una casa de moda

Quería una ficha que pareciera de una casa de moda y no de una plantilla: fondo marfil, serif grande, un logotipo solo de texto y una paleta de cuatro colores. La foto del vestido es la protagonista y todo lo demás se aparta.

Logotipo y paleta: BRIGANT en mayúsculas separadas, sin icono, y marfil, carbón, oro viejo y burdeos como únicos colores.
Tipografía: una serif grande para los titulares y una sans discreta para el texto, las dos con la fuente alojada en el propio sitio.
Escenas: el hero, el tejido, el movimiento, los colores, el detalle y la talla son seis momentos distintos que se enlazan con el scroll.

Primer plano del satén negro del vestido Nocturna, con el texto «Cae como el agua» sobre el tejido — El tejido: un círculo se abre con el scroll sobre el satén.

El vestido Nocturna en burdeos sobre un fondo teñido de rosa, con el selector de color — Los colores: el fondo se tiñe con cada tono del vestido.

UX: que se use sin pensar

El color y la talla no están en un desplegable: el color cambia dentro de la escena, con un círculo que nace donde pulsas, y la talla dibuja las medidas encima del vestido. La bolsa te dice cuánto te falta para el envío gratis, la compra se confirma manteniendo pulsado un botón y todo se puede hacer con teclado. Con el movimiento reducido ves una versión plana con el mismo contenido.

Talla: al elegirla, las medidas de busto, cintura y cadera se dibujan sobre el vestido. Si intentas comprar sin talla, la página te lleva hasta ella.
Bolsa: cantidades, eliminar con animación, totales que suben y bajan y una barra de envío gratis que se completa y se ilumina.
Compra simulada: envío, pago con una tarjeta 3D de demostración y una confirmación con la caja que se cierra y el seguimiento del pedido. Todo ficticio.
Accesibilidad: foco visible, diálogo modal con el foco controlado, avisos para lectores de pantalla y textos con contraste suficiente.

El vestido visto por la espalda con las medidas de busto, cintura y cadera dibujadas encima y las tallas del 34 al 44 — La talla dibuja las medidas encima del vestido.

La bolsa de compra con dos unidades del vestido, el aviso de envío gratis y el total — La bolsa con el envío gratis conseguido.

Paso de pago de la compra simulada: una tarjeta de demostración en 3D, los métodos de pago y el resumen del pedido — El pago de mentira: una tarjeta que se inclina con el cursor y un botón que se confirma manteniendo pulsado.

SEO técnico

Título y descripción medidos, canonical, un solo h1, Open Graph y Twitter Card, datos estructurados enlazados con el resto de la web y todas las imágenes con su texto alternativo. No he usado el tipo Product a propósito: la tienda es ficticia y no quiero que Google la trate como una oferta real.

Datos estructurados: una página (WebPage), la demo como obra (CreativeWork) y la ruta Inicio › Proyectos › BRIGANT (BreadcrumbList), enlazadas con mi persona y con este sitio.
Imágenes: todas en WebP y ninguna por encima de 200 KB, con nombres descriptivos, srcset, ancho y alto y la imagen principal precargada.
URL limpia: /demos/brigant, sin extensión ni barra final, como el resto del sitio.

Rendimiento y accesibilidad

Medido con Lighthouse el 25 de octubre de 2026, primero en local (con el servidor sirviendo gzip y caché como el de producción) y después ya publicada, en jcalarcon.dev/demos/brigant:

Escritorio, en producción: 100 · 100 · 100 · 100 (rendimiento, accesibilidad, buenas prácticas y SEO) en todas las pasadas. LCP de 0,4 s, TBT de 0 ms y CLS de 0,003.
Móvil (simulado), en producción: 100 · 100 · 100 · 100 en la mayoría de las pasadas, con LCP de 1,5 s, TBT de 0 ms y CLS de 0. Alguna sale con 96–98 de rendimiento por una tarea larga de maquetación que Lighthouse amplifica al frenar la CPU cuatro veces; no lo voy a esconder.
Esta página de proyecto: 100 en las cuatro categorías, en móvil y en escritorio.

Informe de Lighthouse de jcalarcon.dev/demos/brigant con 100 en rendimiento, accesibilidad, buenas prácticas y SEO — Informe real de Lighthouse sobre la demo publicada, en móvil.

La primera carga pesa unos 100 KiB y las 20 imágenes son WebP, ninguna por encima de 200 KB (la mayor, 116 KB).

Cómo está hecho

Cero librerías de animación: un único script de unos 7 KB comprimidos y 8 KB de CSS. El progreso del scroll lo calculo con requestAnimationFrame y solo para las secciones visibles; el color y el tejido usan clip-path; las fotos se funden con el marfil con mix-blend-mode: multiply tras subir el blanco de cada imagen; el confeti es un canvas de 170 partículas.

Astro genera la página estática y el resto es CSS y JavaScript propios, sin ninguna dependencia en el navegador.
Sin backend, sin base de datos, sin cookies y sin guardar nada: la bolsa vive en memoria y se pierde al recargar.
Mejora progresiva: sin JavaScript o con movimiento reducido, la página se ve completa y plana.

Lo que he aprendido

Que un efecto bonito puede romper una auditoría (mi cabecera con mezcla de color suspendía el contraste), que una transformación en un padre aísla el modo de fusión de la imagen y que casi todo lo que hace falta para un 100 es sentido común aplicado desde el principio.

Imágenes e IA

Las fotos de la modelo y los vestidos las he generado con IA y las he editado para que sea siempre la misma persona; el código lo he escrito con ayuda de Claude Code. Marca, producto y modelo son ficticios, y la demo lo dice en su pie.