Vanth | Caso de Estudio

Resumen

Vanth es una casa conceptual de alta costura gótica de Berlín. Su sitio presenta la temporada Otoño Invierno 2026 en ocho líneas, y cada línea tiene sus propios looks, piezas y eau de parfum. Creé la marca, hice la dirección de arte de cada fotografía con IA y diseñé y construí la tienda.

El visitante abre una pieza desde un punto en la fotografía, elige la talla, llena la bolsa y hace un pedido de prueba. La casa, las líneas, los nombres y los precios son ficticios.

Rol: Dirección de arte, diseño UX/UI y desarrollo front-end
Alcance: 74 páginas, ocho líneas, ocho perfumes y un flujo de compra
Herramientas: HTML, CSS, JavaScript, GSAP
Sector: Moda, E-Commerce

El problema

Una casa de alta costura vende a través de sus fotografías. El visitante ve un vestido en una escalera y quiere saber su nombre, su material y su precio en ese momento. La tienda tiene que responder en la propia fotografía y mantener la campaña en pantalla.

La fotografía tenía una segunda función. Ocho líneas tenían que leerse como ocho mundos distintos, y todos tenían que pertenecer a una sola casa.

Dirección de arte con IA

Cada línea viste a una tribu distinta, con su propio escenario, tejido y color, y cada una tuvo una sesión completa. Una fotografía de campaña abre la línea con todo su elenco. Los looks siguen en locación, uno a uno. Después cada pieza aparece sola, y el frasco del perfume descansa sobre una superficie tomada del mundo de su línea.

Línea	Perfume	El mundo
01 Iron Court	Slate	Armadura cortada como ropa de noche, en plata, satén negro y lana camel
02 Night Office	Amethyst	Ropa de noche para las horas después del trabajo
03 High Rise	Asphalt	La calle, a escala de alta costura
04 Machine	Halide	Tachuelas y cristales sobre una seda que pasa del azul petróleo al dorado
05 Lost Paradise	Gilt	Satén negro y seda esmeralda bajo oro martillado
06 Lacquer	Vermilion	Cuero negro sobre satén rojo y negro
07 Riot	Feedback	Punk en sastrería de alta costura
08 Old Blood	Sanguine	Satén rojo sangre y encaje negro, en salas iluminadas con velas

Todas las fotografías de la temporada están en una cuadrícula abajo. Vistos juntos, los ocho mundos mantienen una sola luz, un solo grano y una sola casa.

Every photograph generated for the Vanth season, on one diagonal grid

Identidad

La paleta es papel, negro y un rojo, y el rojo aparece como un único acento en cada pantalla. Los titulares van en Anton, en mayúsculas y a tamaño gigante. Inter Tight lleva el texto y JetBrains Mono, las etiquetas. Las esquinas son rectas. Casi todo el sitio va sobre negro, con secciones en papel para respirar, y un grano de película recorre todas las páginas.

Interacciones de scroll

La Home se abre fija. La fotografía de campaña crece hasta llenar la pantalla, y la palabra Vanth entra sobre ella.
El manifiesto se enciende palabra por palabra con el scroll.
En escritorio, las ocho líneas pasan de lado mientras la sección se queda fija. En el móvil, la fila se mueve con el dedo.
Dos filas de nombres gigantes corren en sentidos opuestos a la velocidad del scroll.
En la página de perfume, el frasco se queda fijo mientras las notas de salida, de corazón y de fondo se encienden una a una.
Cada fotografía de look se abre desde una franja estrecha hasta el cuadro completo cuando llega.
Toda interacción de scroll sigue el scroll en los dos sentidos, y el propio scroll es suave.

Compra el look

Cada fotografía de look tiene un punto en cada pieza a la venta. El cursor o el foco del teclado abre una tarjeta con el nombre, el material y el precio de la pieza. Queda una tarjeta abierta cada vez, y Esc la cierra. Un clic lleva a la página de la pieza. En el móvil, el primer toque abre la tarjeta y el segundo abre la pieza.

El flujo de compra

La página de la pieza muestra las tallas en seis sistemas, EU, FR, IT, UK, US y JP. La guía de tallas se abre sobre la página y cambia entre centímetros y pulgadas. El botón de añadir a la bolsa dice qué pieza entró, y el contador del menú sigue después de recargar la página.

La bolsa lista cada pieza con su cantidad y el total en euros. El checkout llega rellenado con un pedido de prueba, sin cobro, y confirma el pedido en una ventana.

Desarrollo

Las 74 páginas son la Home, las listas de líneas y de perfumes, ocho páginas de línea, ocho de perfume, 52 de pieza, la bolsa, el checkout y una 404.
Las interacciones corren en GSAP con ScrollTrigger y SplitText, cargados después de dibujar la primera pantalla, así la página aparece antes que el código de las animaciones.
Las páginas cambian con una transición de vista, y la fotografía que aún se está cargando mantiene su marco, así el paso de una página a otra es suave.
Las tres tipografías están alojadas en el sitio, con fuentes de reserva medidas al mismo tamaño, así el texto aparece al instante y se queda en su sitio cuando llegan las fuentes.
Cada fotografía viene en varios tamaños, así el móvil descarga un archivo más pequeño.
Cada página tiene su propio título y descripción.
Las fotografías se generaron con Higgsfield y Gemini.

Resultados

96-99de rendimiento en el móvil
99-100de rendimiento en el ordenador
100accesibilidad y buenas prácticas

Inicio 99

Línea 96

Pieza 99

Perfume 99

Lighthouse en móvil, sitio publicado, 15 de octubre de 2026.

Vanth

Guía de Estilo

Colores y Botones

#ECEAE4 · Paper

#0B0B0B · Black

#E5261F · Red

#8C8A84 · Grey

#FFFFFF · White

Tipografía · Anton, Inter Tight, JetBrains Mono

For the ones who dress after dark.

EjemploNombrePesoTamañoAltura de líneaEspaciado

A couture houseH1 · AntonRegular136px125px0

The eight linesH2 · AntonRegular80px76px0

Eight linesH3 · AntonRegular48px48px0

Iron CourtH5 · AntonRegular24px26.4px0

Armour as eveningwearCuerpo · Inter TightRegular18px27px0

Autumn Winter 2026Etiqueta · JetBrains MonoRegular12px18px8%

Móvil

Hecho en

Diseño y desarrollo de joaomob