Oficina do BirutMateriais / Repositórios
Deixe a sua interface animada com skills de Three.js e GSAP
Com skills de Three.js, GSAP e motion design instaladas, o Claude cria animações melhores a partir de um pedido simples. Veja o que cada uma faz e como pedir.
Sem ajuda, a IA anima do jeito mais comum: tudo aparece com um fade. Uma skill ensina o Claude a usar uma ferramenta de animação do jeito que quem entende usaria. Foi com skills assim que fizemos o fundo 3D desta página.
Quatro famílias que valem a pena
- Three.js: cenas em 3D no navegador, como as formas flutuando no fundo deste site.
- GSAP: animações de entrada, rolagem e sequências com controle fino de tempo.
- Motion design: princípios de movimento, como antecipação, peso e folga. Servem para qualquer ferramenta.
- DNA de design: extrai o estilo visual de um exemplo para a IA seguir.
Como achar e instalar
Use o guia de escolha de skills deste site, e leia cada skill antes de instalar. Para encontrar, peça:
Pedido 1 · buscar
Procure skills gratuitas e populares para animação com Three.js, GSAP e princípios de motion design. Mostre as 5 melhores, com a origem e o que fazem. Não instale nada ainda.
Como pedir uma animação
O segredo é descrever o movimento e a sensação, não só o objeto.
Entrada de uma seção
Pedido 2 · entrada com intenção
Anime a entrada da seção [nome]: o título sobe com um leve overshoot, o texto aparece 0,15 s depois e os cartões entram um a um com intervalo de 0,1 s. Respeite a opção de reduzir movimento do sistema.
Fundo em 3D
Pedido 3 · cena 3D
Crie um fundo 3D com formas geométricas flutuando devagar nas cores [cores], que reagem de leve ao mouse e à rolagem. Use poucas formas no celular. Se o 3D não carregar, a página deve continuar funcionando.
Revisão
Pedido 4 · revisar o movimento
Revise as animações da página com os princípios de motion design: tem algo rápido demais, parado demais ou que atrapalha a leitura? Liste e proponha ajustes simples.
Cuidados
- Acessibilidade: quem tem sensibilidade a movimento precisa de uma versão mais calma.
- Desempenho: animação em excesso deixa a página lenta no celular. Teste em um aparelho simples.
- Menos é mais: escolha um momento de destaque e deixe o resto quieto.
Baixar o materialEscolher o formato
O que é .md? É o Markdown: um arquivo de texto simples que o Claude, o ChatGPT e programas de notas, como o Obsidian, leem direto. Ideal para colar na IA ou guardar no seu cofre de notas.
Conferido em 27/10/2026. As ferramentas de IA mudam com frequência.