gsap
Criar animações GSAP profissionais para vídeo
Escrever animações GSAP para composições de vídeo exige timing preciso e execução determinística. Esta skill fornece documentação completa do GSAP e efeitos prontos para usar em HyperFrames, permitindo criar animações suaves e profissionais sem precisar consultar múltiplas fontes.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "gsap". Animar elementos .card com efeito stagger, atraso de 0.1s entre cada card, deslizando da esquerda
Resultado esperado:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
A utilizar "gsap". Construir uma timeline onde .logo aparece com fade-in primeiro, depois .headline desliza para cima, depois .subtitle aparece com fade-in após o headline completar
Resultado esperado:
const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');
A utilizar "gsap". Digitar 'Welcome' a 12 caracteres por segundo com cursor '|' que pisca entre estados sólido e piscante
Resultado esperado:
const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);
Auditoria de Segurança
Baixo RiscoStatic analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.
Problemas de Alto Risco (2)
Problemas de Risco Médio (1)
Problemas de Baixo Risco (2)
Fatores de risco
⚡ Contém scripts (1)
📁 Acesso ao sistema de arquivos (1)
⚙️ Comandos externos (1)
Pontuação de qualidade
O Que Você Pode Construir
Adicionar animações de entrada a sobreposições de vídeo
Criar animações de entrada com fade-in, slide ou scale para textos sobrepostos e elementos de UI em composições de vídeo.
Construir visualizadores reativos a áudio
Criar visualizadores de áudio baseados em canvas que respondem à música ou fala em planos de fundo de vídeo.
Sequenciar animações complexas de múltiplas etapas
Coordenar múltiplas animações com timing preciso usando timelines, labels e parâmetros de posição do GSAP.
Tente Estes Prompts
Use GSAP para animar o elemento #hero aparecendo com fade-in e deslizando para cima 100px. Duração de 0.6s com easing power2.out.
Crie uma timeline GSAP que: 1) aplique fade-in em .title, 2) aplique fade-in em .subtitle 0.2s depois, 3) aplique scale em .button aos 0.5s. Use parâmetros de posição, não delay.
Crie uma animação typewriter para #message que digita a 10 caracteres por segundo com um cursor piscando. O cursor deve piscar quando ocioso.
Renderize o frame de áudio [FRAME] com barras usando o array AUDIO_DATA.frames[0].bands. Cada banda mapeia para um retângulo do canvas. O grave controla scale, o agudo controla opacity.
Melhores Práticas
- Use propriedades de transform (x, y, scale, rotation) em vez de propriedades de layout para aceleração por GPU
- Passe defaults para o construtor da timeline em vez de encadear com delay para melhor legibilidade
- Armazene os valores de retorno de tween e timeline quando precisar controlar a reprodução programaticamente
Evitar
- Não anime width, height, top ou left quando transforms podem alcançar o mesmo efeito
- Não encadeie tweens com delay quando uma timeline com parâmetros de posição os sequencia melhor
- Não crie tweens direcionados a elementos que ainda não existem no DOM