Vanth

A Vanth é uma maison conceito de alta-costura de Berlim, com roupas, sapatos, acessórios e perfumes para a noite. O site apresenta a temporada Outono Inverno 2026 em oito linhas, e cada linha tem os próprios looks, peças e eau de parfum. Criei a marca, fiz a direção de arte de cada fotografia com IA e desenhei e construí a loja.

O visitante abre uma peça por um ponto na fotografia, escolhe o tamanho, enche a sacola e faz um pedido de teste. A maison, as linhas, os nomes e os preços são fictícios.

Papel

Direção de arte, design UX/UI e desenvolvimento front-end

Escopo

74 páginas, oito linhas, oito perfumes e um fluxo de compra

Ferramentas

Webflow, Client-First, GSAP

Setor

Moda, E-Commerce

Uma maison de alta-costura vende pelas fotografias. O visitante vê um vestido numa escadaria e quer saber o nome, o tecido e o preço naquele momento. A loja precisa responder na própria fotografia e manter a campanha na tela.

A fotografia tinha uma segunda função. Oito linhas tinham de parecer oito mundos diferentes, e todos tinham de pertencer a uma só maison.

As referências são a alfaiataria teatral de Alexander McQueen, os volumes de Balenciaga, os corsets de Mugler, as joias douradas de Schiaparelli e o xadrez punk de Vivienne Westwood. O elenco é multicultural.

Cada linha veste uma tribo diferente, com cenário, tecido e cor próprios, e cada uma teve um ensaio completo. Uma fotografia de campanha abre a linha com todo o elenco. Os looks vêm depois, na locação, um de cada vez. Em seguida, cada peça aparece sozinha, e o frasco do perfume repousa sobre uma superfície tirada do mundo da sua linha.

Todas as fotografias da temporada estão numa grade abaixo. Vistos juntos, os oito mundos têm uma só luz, um só grão e uma só maison.

A paleta é papel, preto e um vermelho, e o vermelho aparece como um único destaque em cada tela. Os títulos são em Anton, em caixa-alta e em tamanho gigante. A Inter Tight leva o texto corrido e a JetBrains Mono, os rótulos. Os cantos são retos. Quase todo o site fica sobre preto, com seções em papel para respirar, e um grão de filme corre por todas as páginas.

• A Home abre fixa. A fotografia de campanha cresce até ocupar a tela, e a palavra Vanth entra por cima dela.
• O manifesto acende palavra por palavra com a rolagem.
• No computador, as oito linhas passam de lado enquanto a seção fica parada. No celular, a fileira se move com o dedo.
• Duas fileiras de nomes gigantes correm em sentidos opostos na velocidade da rolagem.
• Na página de perfume, o frasco fica parado enquanto as notas de saída, de coração e de fundo acendem uma de cada vez.
• Cada fotografia de look se abre de uma faixa estreita até o quadro inteiro quando chega.
• Toda interação de rolagem acompanha a rolagem nos dois sentidos, e a própria rolagem é suave.

Cada fotografia de look tem um ponto em cada peça à venda. O cursor ou o foco do teclado abre um cartão com o nome, o tecido e o preço da peça. Fica um cartão aberto por vez, e o Esc o fecha. Um clique leva à página da peça. No celular, o primeiro toque abre o cartão e o segundo abre a peça.

A página da peça mostra os tamanhos em seis sistemas, EU, FR, IT, UK, US e JP. A tabela de medidas abre por cima da página e alterna entre centímetros e polegadas. O botão de adicionar à sacola diz qual peça entrou, e a contagem no menu continua depois de recarregar a página.

A sacola lista cada peça com a quantidade e o total em euros. O checkout chega preenchido com um pedido de teste, sem cobrança, e confirma o pedido numa janela.

• A loja é feita em Webflow, com classes Client-First, Ecommerce, CMS e Interactions nativos, e o mesmo design também roda como site em código.
• As 74 páginas são a Home, as listas de linhas e de perfumes, oito páginas de linha, oito de perfume, 52 de peça, a sacola, o checkout e uma 404.
• As interações rodam em GSAP com ScrollTrigger e SplitText, carregados depois que a primeira tela aparece, então a página surge antes do código das animações.
• As páginas trocam com uma transição de visualização, e a fotografia que ainda está carregando mantém a moldura, então a passagem de uma página para outra é suave.
• As três fontes ficam hospedadas no site, com fontes de reserva medidas no mesmo tamanho, então o texto aparece na hora e fica no lugar quando as fontes chegam.
• Cada fotografia vem em vários tamanhos, então o celular baixa um arquivo menor.
• Cada página tem título e descrição próprios.
• As fotografias foram geradas com Higgsfield e Gemini.

• Os pontos abrem com o teclado e também com o cursor.
• As opções de tamanho são campos nativos, e a tabela de medidas fecha com Esc.
• Com o movimento reduzido ligado, cada seção fica parada e completa, e a rolagem é a do próprio navegador.
• Cada fotografia tem a própria descrição.

• 96-99de desempenho no celular
• 99-100de desempenho no computador
• 100acessibilidade e boas práticas

Lighthouse no celular, site publicado, 15 de outubro de 2026.