O FIM dos sites estáticos: A nova moda são sites animados do Claude

Criei um site com uma baita experiência apenas utilizando inteligência artificial! Prompt para alterar a foto do produto: "Manter (não alterar): A posição da bicicleta no enquadramento — mesma distância e mesmo ângulo em relação à câmera. Alterar (novo contexto): Adicionar um ciclista pilotando a bicicleta. Posicionar corretamente o pé do ciclista no pedal. Aplicar desfoque de movimento (motion blur) no fundo, com estética esportiva e dinâmica. Ambientar o cenário em trilha de terra e barro (mountain bike / off-road)." Prompt para alterar o ângulo da foto: "Câmera / enquadramento: Afastar a câmera para mostrar o corpo inteiro do ciclista. O ciclista e a bike devem ocupar cerca de 1/3 da imagem, centralizados. Cenário: Alterar o cenário, mas manter a mesma cor e o mesmo estilo de ambientação da imagem anterior. Movimento: Manter o desfoque de movimento (motion blur), com sensação esportiva e dinâmica." Prompt para fazer o vídeo 360: "Movimento de câmera: Giro de 360° ao redor da bike (câmera orbitando o objeto). A câmera gira e retorna exatamente ao ponto inicial — volta completa. Movimento contínuo e fluido, em loop perfeito (início e fim no mesmo enquadramento)." Prompt inicial para o Claude: "Crie um site de vitrine para uma loja de bicicletas premium chamada MANUAL BIKES, com uma experiência de rolagem cinematográfica usando scroll scrubbing. Estrutura Um cabeçalho fixo no topo com o logo "MANUAL BIKES", links de navegação e um botão "Comprar". Ele deve permanecer legível sobre qualquer imagem de fundo. Duas seções em tela cheia, uma para cada bicicleta. Um rodapé simples ao final. Cada seção mostra uma sequência de quadros controlada pela rolagem (scroll scrubbing): o vídeo de fundo tem exatamente 15 quadros, e cada posição da rolagem corresponde a um quadro exato. Rolar para baixo avança os quadros; rolar para cima volta, na mesma medida — a pessoa "dirige" a cena com o scroll. A troca de quadro precisa ser instantânea, sem travar e sem pular. Para garantir isso, o site deve pré-carregar os 15 quadros assim que abrir e apenas trocar a imagem exibida conforme a rolagem. Enquanto os quadros avançam, os textos surgem suavemente de baixo para cima, um após o outro: um rótulo pequeno, um título grande, algumas informações rápidas da bike (com barras de destaque) e um botão "Saiba mais". Tudo alinhado à esquerda. Quando os quadros chegam ao fim, há um momento de pausa — continuar rolando não faz nada por alguns instantes. Se a pessoa insistir, a página desliza para a segunda seção, que repete a mesma experiência com a outra bicicleta. Crie uma pasta assets e deixe programado para que eu apenas cole os vídeos em mp4 no lugar. Ao clicar em "Saiba mais": Aparecem na hora mais informações da bicicleta — descrição, ficha com os detalhes, preço e um botão "Comprar". O texto anterior sai de cena. Os quadros correm até o último por trás dessas informações. Entra um novo vídeo do produto em tela cheia. Esse vídeo então, com uma animação suave, encolhe e se encaixa como um card ao lado do texto. O fundo fica totalmente preto, deixando só o texto à esquerda e o vídeo à direita. O card do vídeo é widescreen (16:9), fica colado no texto (sem espaço entre eles) e se estende até a borda direita da tela, aproveitando toda a largura. Um botão "Voltar" desfaz tudo e retorna à vitrine, exatamente no ponto em que estava. Visual Estilo escuro e sofisticado, com sensação de marca esportiva de alta performance. Use exatamente esta paleta: Fundo: #000000 (preto) Texto principal: #f4f4f2 (off-white) Texto secundário: #f4f4f2 a 62% de opacidade Cor de destaque: #d8ff3e (verde-limão) — botões, rótulos, barras e preço Texto dentro dos botões verdes: #0c0f02 Fundo da página de produto (modo detalhe): #000000 (preto puro) Tipografia: Títulos: Tektur (moderna, tecnológica) Corpo: Archivo." Olá! Eu sou o Eduardo Gelinger, publicitário, criador de conteúdo e apaixonado por tecnologia, ciência e criatividade. Aqui no canal Manual de Criação, eu compartilho minhas experiências. Se você curte esse universo e quer aprender cada vez mais, se inscreva no canal!