Vanth

Vanth es una casa conceptual de alta costura de Berlín, con ropa, zapatos, accesorios y perfumes para la noche. 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

Webflow, Client-First, GSAP

Sector

Moda, E-Commerce

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.

Las referencias son la sastrería teatral de Alexander McQueen, los volúmenes de Balenciaga, los corsés de Mugler, las joyas doradas de Schiaparelli y el tartán punk de Vivienne Westwood. El elenco es multicultural.

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.

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.

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.

• 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.

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.

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.

• La tienda está hecha en Webflow, con clases Client-First, Ecommerce, CMS e Interactions nativos, y el mismo diseño también funciona como sitio en código.
• 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.

• Los puntos se abren con el teclado y también con el cursor.
• Las opciones de talla son campos nativos, y la guía de tallas se cierra con Esc.
• Con el movimiento reducido activado, cada sección queda quieta y completa, y el scroll es el del propio navegador.
• Cada fotografía tiene su propia descripción.

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

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