Communitygithub.com

devmartinese/awwwards-animations

Skill profissional de animação React para criar animações em nível Awwwards/FWA usando GSAP (useGSAP), Motion (Framer Motion), Anime.js e Lenis. Use ao construir experiências de scroll premium, cursores personalizados, transições de página, animações de texto, efeitos de parallax, micro-interações ou qualquer animação que precise ser 60fps e digna de prêmios.

O que é awwwards-animations?

Este skill capacita um agente de IA a criar animações de nível Awwwards/FWA em aplicações React, utilizando as bibliotecas GSAP (com useGSAP), Motion (antigo Framer Motion), Anime.js e Lenis. Ele é acionado automaticamente quando o desenvolvedor solicita scroll suave, efeitos ScrollTrigger, interações magnéticas, animações de revelação, scroll horizontal, seções fixas (pin), efeitos de escalonamento (stagger), além de hooks avançados como useScroll e useTransform. O skill também cobre integração com Three.js/WebGL para gráficos 3D, arte algorítmica, gerativa e matemática (fractais, sistemas-L, campos de fluxo, atratores estranhos), geometria sagrada e quebra-cabeças geométricos (dissecações de Dudeney, tangram, ladrilhos Penrose), tipografia cinética, glitch, explosão de texto, texto morfológico, texto circular, design brutalista, animação minimalista e neo-brutalismo. A abordagem é sempre React-first, com ênfase em hooks e limpeza adequada de recursos para garantir performance a 60fps e experiência de nível premiado. Suporta todas as principais plataformas de desenvolvimento baseadas em React (como Vite, Next.js, Remix, etc.).

Funciona com~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/devmartinese/awwwards-animations-skill/tree/main/skills/awwwards-animations

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que awwwards-animations faz?

Skill profissional de animação React para criar animações em nível Awwwards/FWA usando GSAP (useGSAP), Motion (Framer Motion), Anime.js e Lenis. Use ao construir experiências de scroll premium, cursores personalizados, transições de página, animações de texto, efeitos de parallax, micro-interações ou qualquer animação que precise ser 60fps e digna de prêmios. É acionado em solicitações de scroll suave, ScrollTrigger, efeitos magnéticos, animações de revelação, scroll horizontal, seções fixas, efeitos de escalonamento, useScroll, useTransform, integração com Three.js/WebGL, arte algorítmica, arte matemática, arte generativa, fractais, sistemas-L, campos de fluxo, atratores estranhos, geometria sagrada, quebra-cabeças geométricos, dissecações de Dudeney, tangram, ladrilhos, ladrilhos Penrose, tipografia cinética, efeitos glitch, explosão de texto, texto morfológico, texto circular, design brutalista, animação minimalista, neo-brutalismo ou mistura de filosofia de design. Abordagem React-first com limpeza adequada e hooks.

Habilidades Relacionadas