הנפשות לאתר: בחירה ובנייה

Animações para Site: Seleção e Construção

Este skill ajuda a selecionar e construir uma animação para site, a partir de 30 receitas. Os arquivos na pasta:

• placements.md: 8 locais no site e quais animações são adequadas para cada local.
• recipes.md: detalhes de construção para cada uma das 30 animações.

Etapa 1: Perguntar onde aplicar

Quando o skill for carregado, pergunte primeiro esta questão, no idioma do usuário, com a lista numerada. Não comece a escrever código antes de ter uma resposta.

"Onde no site você gostaria de colocar a animação?"

1. Área de abertura (Hero) de uma página de destino
2. Transição durante a rolagem ou entre telas
3. Cartões e grade de recursos
4. Formulários, campos de entrada e código de uso único
5. Botões, interruptores e indicadores de progresso
6. Navegação e menus
7. Exibição de produto ou aplicativo (mockup de telefone, carrossel)
8. Personagem ou efeito que acompanha o cursor em toda a página

Se o usuário já mencionou o local na solicitação, pule para a Etapa 2 e indique qual local foi entendido.

Etapa 2: Perguntar qual tipo de animação

Leia o arquivo placements.md e exiba apenas as opções do local escolhido, em uma lista numerada. Para cada opção: nome, uma frase no idioma do usuário descrevendo o que se vê, e nível de complexidade. Peça ao usuário para escolher um número ou descrever uma combinação de duas.

Se o usuário não tiver certeza, recomende uma e justifique em uma frase com base no que se sabe: tipo de negócio, público e quanta complexidade ele está disposto a manter.

Etapa 3: Três perguntas rápidas antes da construção

Faça em uma única mensagem:

1. Em que plataforma construir: HTML/CSS/JS simples, React, Next.js, Webflow, WordPress ou outro?
2. Qual o conteúdo: título, texto, imagens, cores da marca, logotipo. Se não houver, use conteúdo fictício e marque-o.
3. O site precisa funcionar em todos os navegadores e em dispositivos móveis? Animações marcadas como "experimental" dependem de API disponível apenas no Chrome.

Etapa 4: Construção

1. Abra em recipes.md a receita escolhida e leia as especificações completas.
2. Construa uma implementação do zero de acordo com as especificações e o conteúdo do usuário.
3. Escolha a ferramenta mais simples que atinge o efeito: CSS antes de Canvas, e Canvas antes de WebGL. Use Three.js ou R3F apenas quando houver profundidade, iluminação ou shader reais.
4. Exponha os "botões de ajuste" da receita como variáveis no topo do arquivo, ou em um painel pequeno (por exemplo, lil-gui ou Leva), para que seja possível ajustar sem tocar no código.
5. Em receitas marcadas como Chrome apenas: construa um fallback, como uma captura do HTML como textura ou uma versão CSS simples. Verifique o suporte em tempo de execução e não com base no user agent.

Etapa 5: Verificação antes da entrega

Percorra a lista e informe ao usuário o que foi verificado e o que não foi:

1. prefers-reduced-motion: com esta configuração, a animação para ou é substituída por uma versão estática.
2. Desempenho: busque 60fps em um computador comum. Pare o loop quando o componente não estiver visível (IntersectionObserver) e quando a guia estiver oculta. Limite devicePixelRatio a 2.
3. Dispositivo móvel: toque no lugar de hover, e uma versão mais leve ou estática em dispositivos fracos.
4. Acessibilidade: o texto permanece HTML real, acessível a leitores de tela e mecanismos de busca. Um efeito que oculta conteúdo não bloqueia a leitura.
5. Se não executei o código no navegador, escreva isso explicitamente.