Vanth | Case Study | João Marcos

Visão geral

A Vanth é uma maison conceito de alta-costura gótica de Berlim. 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: HTML, CSS, JavaScript, GSAP
Setor: Moda, E-Commerce

O problema

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.

Direção de arte com IA

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.

Linha	Perfume	O mundo
01 Iron Court	Slate	Armadura cortada como traje de noite, em prata, cetim preto e lã camelo
02 Night Office	Amethyst	Roupa de noite para as horas depois do trabalho
03 High Rise	Asphalt	A rua, em escala de alta-costura
04 Machine	Halide	Tachas e cristais sobre uma seda que passa do azul-petróleo ao dourado
05 Lost Paradise	Gilt	Cetim preto e seda esmeralda sob ouro martelado
06 Lacquer	Vermilion	Couro preto sobre cetim vermelho e preto
07 Riot	Feedback	Punk em alfaiataria de alta-costura
08 Old Blood	Sanguine	Cetim vermelho-sangue e renda preta, em salas iluminadas por velas

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.

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

Identidade

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.

Interações de rolagem

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.

Compre o look

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.

O fluxo de compra

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.

Desenvolvimento

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.

Resultados

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

Home 99

Linha 96

Peça 99

Perfume 99

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

Vanth

Guia de Estilo

Cores e Botões

#ECEAE4 · Paper

#0B0B0B · Black

#E5261F · Red

#8C8A84 · Grey

#FFFFFF · White

Tipografia · Anton, Inter Tight, JetBrains Mono

For the ones who dress after dark.

ExemploNomePesoTamanhoAltura da linhaEspaçamento

A couture houseH1 · AntonRegular136px125px0

The eight linesH2 · AntonRegular80px76px0

Eight linesH3 · AntonRegular48px48px0

Iron CourtH5 · AntonRegular24px26.4px0

Armour as eveningwearCorpo · Inter TightRegular18px27px0

Autumn Winter 2026Rótulo · JetBrains MonoRegular12px18px8%

Mobile

Feito no

Design e desenvolvimento de joaomob