Numa loja online comum, você olha a foto da roupa e imagina como ela ficaria. Nessa vitrine, você faz o contrário: pega a jaqueta com o mouse, arrasta até o modelo e ele aparece vestindo. Enquanto a peça está em cima dele, o modelo muda de pose. Clicar nele abre o conceito da peça.
Esse guia ensina só essa parte, a interativa. São duas coisas: gerar as fotos certas (é aqui que a maioria erra) e pedir o código pra IA. As fotos vêm primeiro, porque o código depende delas.
O que você precisa
- Uma IA de imagem: ChatGPT, Gemini ou outra que aceite mandar imagens junto com o pedido.
- Uma ferramenta de recorte pra tirar o fundo das imagens, como o remove.bg ou o recorte do Photoshop.
- Claude Code com um projeto novo (HTML, CSS e JavaScript, com ou sem Vite).
Quer o site inteiro, com o zoom do hero, a transição de mosaico e as imagens prontas pra testar? Tá no Premium ↓
Antes de gerar: as 3 fotos de cada peça
Cada peça precisa de 3 imagens, e os nomes importam, porque o código troca uma pela outra:
1Product.png: a jaqueta sozinha, sem fundo. Fica dentro do card e é o que você arrasta.1Model.png: o modelo vestindo essa jaqueta. Aparece no centro, depois de soltar a peça.1ModelHover.png: o mesmo modelo, em outra pose. Aparece no centro enquanto você segura a peça por cima dele.
Pra peça 2 e 3, é 2Product.png, 2Model.png, 2ModelHover.png, e assim por diante.
A regra que faz a vitrine parecer boa: o modelo tem que ter exatamente o mesmo enquadramento em todas as imagens (mesmo tamanho, mesma posição na tela, mesmo fundo). Quando você solta a jaqueta, a imagem do modelo é trocada por outra. Se a cabeça estiver 20 pixels mais alta, o corpo "pula" na tela e a mágica some. É por isso que as fotos dos próximos passos são geradas a partir de uma foto base, e não do zero.
Passo 1: a foto base do modelo
Gere o modelo uma vez, com uma roupa neutra. Ela vai ser a base de todas as outras.
Foto de moda editorial, corpo inteiro, de frente, de um homem jovem
[DESCREVA O MODELO: idade, cabelo, tom de pele, expressão séria].
Ele veste uma camiseta preta lisa, calça preta e tênis pretos, com os braços
soltos ao lado do corpo.
Fundo cinza claro e liso, sem objetos. Luz de estúdio suave e frontal,
sem sombra forte no chão.
Enquadramento vertical 2:3: a cabeça a 8% do topo da imagem e os pés a 8%
da base, o corpo centralizado. Câmera na altura do peito, sem distorção
de lente.
Gere algumas versões e escolha uma. Essa imagem não será usada no site: ela só serve de modelo pras próximas.
Passo 2: a peça sozinha
Agora a jaqueta, de frente, como uma foto de produto.
Foto de produto de uma jaqueta [DESCREVA: modelo, cor, material, detalhes
como capuz, bolsos, zíper, logo], vista de frente, como se estivesse vestida
em um manequim invisível, com as mangas levemente abertas.
Centralizada e ocupando 80% do quadro, sem cortar nada.
Fundo cinza claro e liso, luz de estúdio suave, sem sombra no chão.
Imagem vertical 4:5.
Faça uma por peça. Se tiver uma foto real da jaqueta, mande ela no lugar de gerar: funciona melhor.
Passo 3: o modelo vestindo a peça
Aqui entra a foto base. Anexe as duas imagens (a do modelo e a da jaqueta) junto com o pedido.
Use a primeira imagem (o modelo) e a segunda imagem (a jaqueta).
Vista o modelo da primeira imagem com a jaqueta da segunda.
Mantenha IDÊNTICOS à primeira imagem: o rosto, o cabelo, a pose, o tamanho
do corpo, a posição na tela, o enquadramento, o fundo cinza e a luz.
Troque somente a roupa de cima pela jaqueta. Não mude a calça nem o tênis.
O logo e os detalhes da jaqueta devem ficar iguais aos da segunda imagem.
Repita pra cada peça, sempre partindo da foto base do passo 1, e não da última imagem gerada. Se você encadear uma na outra, o rosto e o enquadramento vão derivando a cada imagem.
Passo 4: a pose de hover
É a imagem que aparece enquanto você segura a jaqueta em cima do modelo. Faz o modelo "reagir". Anexe a imagem do modelo vestindo a peça (a do passo 3).
Use a imagem anexada. Mantenha o mesmo modelo, a mesma jaqueta, o mesmo
enquadramento, o mesmo tamanho de corpo, o mesmo fundo e a mesma luz.
Mude SÓ a pose: o modelo está com uma das mãos no bolso, o ombro levemente
inclinado e o olhar voltado um pouco pro lado, como quem aprova a peça.
A posição do corpo na tela não pode mudar: a cabeça e os pés ficam
exatamente nas mesmas alturas.
Pose simples funciona melhor. Se o corpo mudar de posição na tela, o modelo "dá um salto" quando a jaqueta chega perto dele.
Passo 5: tirar o fundo e nomear os arquivos
- Remova o fundo de todas as imagens (a foto base fica de fora).
- Exporte em PNG com transparência. O fundo precisa ficar transparente, não branco.
- Salve na pasta
public/do projeto com os nomes da tabela:1Product.png,1Model.png,1ModelHover.png,2Product.png, e assim por diante. - Confira que todas as imagens do modelo têm o mesmo tamanho em pixels. Se uma sair diferente, redimensione antes de salvar.
Passo 6: o prompt do código
Com as fotos na pasta, cole no Claude Code. Ele monta a vitrine inteira: os cards, o arrastar, a pose de hover e o painel.
Quero uma vitrine interativa de roupas em HTML, CSS e JavaScript puros (pode ser com Vite, sem framework). Uma tela só, em fundo escuro, com um modelo no centro e 3 jaquetas em cards espalhados ao redor. A pessoa ARRASTA uma jaqueta até o modelo e ele passa a vestir aquela peça. Clicar no modelo abre um painel com o conceito da peça.
Imagens (estão na pasta public/, com transparência):
- 1Product.png, 2Product.png, 3Product.png: a jaqueta isolada, que vai dentro do card.
- 1Model.png, 2Model.png, 3Model.png: o modelo vestindo cada jaqueta.
- 1ModelHover.png, 2ModelHover.png, 3ModelHover.png: o mesmo modelo, em outra pose.
O nome importa: o código troca "Model" por "ModelHover" pra achar a pose. As 3 imagens do modelo têm o mesmo enquadramento, então trocar uma pela outra não faz o corpo pular.
## 1. Estrutura
- .interactive-section: ocupa a tela toda (min-height 100vh), fundo quase preto com um leve grão de filme.
- Dentro, .container e .shirts-container (centralizam tudo, posição relative).
- Modelo central: <img id="centerImage" class="rat-center" src="/1Model.png">.
- 3 cards (.card), cada um com:
- .card-photo: o "visor" da jaqueta, proporção 4/5, com a <img class="shirt"> dentro.
- .card-info: nome em maiúsculas, número do produto (01, 02, 03) e uma descrição curta.
- A <img class="shirt"> leva: data-mouse-src="/1Model.png" (o modelo vestindo essa jaqueta), data-shirt-name e data-model-size.
## 2. Visual
- Card: position absolute, width clamp(150px, 15vw, 250px), pointer-events none (só a jaqueta reage ao mouse).
- Os 3 cards ficam espalhados de propósito, fora de alinhamento, cada um com uma inclinação diferente (propriedade CSS "rotate", pra não brigar com a animação de levitação): topo esquerdo (-5deg), embaixo à esquerda (4deg) e meio à direita (3deg).
- .card-photo: fundo de vidro escuro translucido (gradiente de 160deg, de rgba(247,243,239,0.07) a rgba(10,6,18,0.35)), borda de 1px em rgba(247,243,239,0.12), backdrop-filter blur(6px) e dois cantos marcados em creme (14px, no canto superior esquerdo e no inferior direito).
- Modelo: position absolute, max-width 26%, centralizado com top 50% e left 50%, levita bem devagar (animação de 9.5s, que sobe 3px, e já inclui translate(-50%, -50%) em cada keyframe). Cursor pointer.
- Cada card também levita, com uma animação diferente (7.2s, 8.8s e 6.8s) pra nunca ficarem sincronizados.
- A jaqueta (.shirt): position relative com left e top em 0, width e height 100%, object-fit cover, cursor grab. No hover sobe 6px e cresce 1.04, com sombra.
## 3. Arrastar e soltar (o coração da vitrine)
Só a jaqueta (img.shirt) arrasta. O card continua no lugar.
- Funciona com mouse (mousedown, mousemove, mouseup) e com toque (touchstart, touchmove, touchend). No toque, use passive: false e preventDefault.
- Ao agarrar: a jaqueta ganha a classe "grabbed" (escala 1.08, cursor grabbing) e o card dela sobe de z-index pra jaqueta passar POR CIMA do modelo.
- O card é inclinado. Então a posição left/top da jaqueta vive no sistema de coordenadas girado dele. Converta o movimento do mouse (em tela) pra esse sistema com seno e cosseno da rotação do card, senão a jaqueta anda torta.
- Durante o arraste, a jaqueta se inclina em 3D conforme a direção: classe "dragging-right" (perspective(500px) rotateY(-15deg) rotateX(5deg) skew(-5deg, 2deg)) ou "dragging-left" (o espelho disso). Se o movimento parar por 50ms, volta pra "grabbed". Esses estados usam transition de 0.2s com cubic-bezier(0.68, -0.55, 0.265, 1.55).
- Colisão: a cada movimento, compare o retângulo da jaqueta com o retângulo do modelo (getBoundingClientRect). Se estiverem se tocando, troque a imagem do modelo pela pose ModelHover. Se a jaqueta sair de cima, volte pra imagem base. Tem um detalhe: se já estiver em hover quando agarrar outra jaqueta, trate sempre a imagem BASE (sem "Hover") como a original.
- Ao soltar: o drop só vale se o CENTRO da jaqueta estiver dentro do retângulo do modelo (mais preciso que o canto). Se valer, o modelo passa a usar o data-mouse-src daquela jaqueta, e essa vira a nova imagem base. Se não valer, volta a imagem que estava.
- Nos dois casos a jaqueta volta sozinha pro card: left e top voltam ao valor inicial, e o CSS anima isso (transition de 0.6s com cubic-bezier(0.16, 1, 0.3, 1)). O z-index do card só volta ao normal 650ms depois, quando a jaqueta já chegou.
- Pré-carregue todas as imagens (produto, modelo e hover de cada peça) antes da interação, pra trocar sem piscar.
- Se a janela mudar de tamanho, limpe o left/top inline das jaquetas.
## 4. Painel do conceito
- Um objeto PRODUCT_CONCEPTS com os textos de cada peça. A chave é o nome do arquivo do modelo ("1Model.png"). Cada peça tem: número, nome, coleção, tamanho, conceito (texto longo), 2 detalhes e 3 palavras de clima.
- Clicar no modelo abre o painel da peça que ele está vestindo agora (descubra pela imagem atual, tratando "ModelHover" como o "Model" base).
- O painel é um fundo escuro com blur (rgba(0,0,0,0.82), backdrop-filter blur(8px)) cobrindo a tela, com um card no centro que aparece com scale de 0.96 pra 1. Fica FORA do wrapper da página pra o position fixed funcionar.
- Fecha pelo botão X, clicando no fundo escuro (fora do card) ou com a tecla Escape. Enquanto aberto, trave a rolagem da página.
## 5. Celular (menos de 768px)
- Os cards ficam menores (31% de largura), sem número nem descrição, e o modelo ocupa 80% da largura.
## 6. Qualidade
- Respeite prefers-reduced-motion: sem as animações de levitação.
- Sem erro no console. Rode o projeto e teste arrastar as 3 jaquetas, soltar fora do modelo (tem que voltar sem trocar) e abrir e fechar o painel das 3 formas.Como usar
01 Cria uma pasta de projeto, coloca as 9 imagens em public/ e abre o Claude Code nela.
02 Cola o prompt e troque os nomes e textos das 3 peças.
03 Roda npm run dev e testa: arrasta cada jaqueta até o modelo, solta uma fora dele (tem que voltar sem trocar) e clica no modelo pra abrir o painel.
O que faz funcionar (e o que mais dá errado)
Quem arrasta é a jaqueta, não o card. O card fica parado, inclinado, e só a imagem da jaqueta se move. Como o card é inclinado, o movimento do mouse precisa ser convertido pro sistema girado dele, senão a peça anda torta. O prompt já pede isso, mas é o primeiro lugar pra olhar se a jaqueta "fugir" do mouse.
O drop vale pelo centro da jaqueta. Se valesse pelo canto, soltar a peça perto do modelo trocaria a roupa sem querer. Pelo centro, só troca quando a peça está de fato em cima dele.
A pose de hover é um segundo arquivo, não uma animação. O código só troca a imagem do modelo por ModelHover enquanto a jaqueta está sobre ele, e volta ao soltar. Por isso as duas imagens precisam ter o mesmo enquadramento.
A jaqueta sempre volta. Soltando dentro ou fora do modelo, ela volta pro card com uma animação. Só o modelo muda, e só se o drop foi válido.
O site completo está no Premium
Esse guia só cobre a vitrine. O template do Premium é o site inteiro que aparece no vídeo do topo: o hero com zoom telescópico, a transição de mosaico até chegar na vitrine, a citação com fotos que sobem e o rodapé. Vem com o código todo e as imagens de exemplo prontas.
O template completo da vitrine, todos os templates e a mentoria pronta
de R$ 129,90por R$ 47,90-63% Pagamento único e acesso vitalício.
- O template Streetwear completo, com o código e as imagens de exemplo
- Mentoria pronta: o método do primeiro site ao primeiro cliente
- Os prompts completos de todos os templates cinematográficos
- As animações e as transições Premium, com prompt e código
- As skills cinematográficas pro Claude Code
- Grupo VIP no Discord
- Pagamento via Hotmart, garantia de 7 dias
Bastidores e sites novos no @rafha.gpt →