Synaptic SkillsSynapticSkills
MarketplaceSkill GraphCriar SkillMCP ServerPlataformaEnterprise
v0.1.0-beta
Voltar ao Marketplace
ContentAvançado

Awwwards Animations

pordevmartinese·devmartinese· v1.0.0 · atualizado em 2026-04-10
83
Score

Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transitions, text animations, parallax effects, micro-interactions, or any animation that needs to be 60fps and award-worthy. Triggers on requests for smooth scroll, ScrollTrigger, magnetic effects, reveal animations, horizontal scroll, pin sections, stagger effects, useScroll, useTransform, integration with Three.js/WebGL, algorithmic art, mathematical art, generative art, fractals, L-systems, flow fields, strange attractors, sacred geometry, geometric puzzles, Dudeney dissections, tangram, tessellations, Penrose tiles, kinetic typography, glitch effects, text explosion, morphing text, circular text, brutalist design, minimalist animation, neo-brutalism, or design philosophy mixing. React-first approach with proper cleanup and hooks.

reactanimationgsapframer-motionanimejsweb-designui-uxscrolltrigger
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdawwwards-animations/workflow
1
Choose Animation Library: — Select GSAP, Framer Motion, or Anime.js based on complexity and performance needs.
2
Install Dependencies: — Install the necessary npm packages (gsap, @gsap/react, lenis, motion, animejs).
3
Configure GSAP (if needed): — Set up GSAP plugins like ScrollTrigger and useGSAP.
4
Implement Animation: — Write React components using the chosen library to create the desired animation effect.
5
Integrate with ScrollTrigger (if needed): — Use ScrollTrigger to trigger animations based on scroll position.
6
Test and Optimize: — Test the animation on different devices and browsers, optimizing for performance and accessibility.
7
Refactor: — Abstract animation logic into reusable components or hooks.

Telemetria de Agentes

Execuções
0
total
Taxa de Sucesso
0%
últimos 30d
Latência Média
0.0s
p50
Alucinação
0.0%
detecção
Tokens Entrada
0
avg 0/exec
Tokens Saída
0
avg 0/exec

Uso por Plataforma

Skills Relacionados

Depende deGSAP Animation Skill
100%
Hebbian Synapse
Composite1.000
w = 0.3·α + 0.5·β + 0.2·γ
83
Similar aImplement Design
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar aApp Store Screenshots Generator
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar aMarp Slide Creator
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
77

Árvore do Skill

Awwwards Animations
awwwards-animations
Fases Cognitivas6
1.SENSE
2.CONTEXTUALIZE
3.HYPOTHESIZE
4.ACT
5.EVALUATE
6.REFLECT
Triggers8
create a smooth scroll animation in Reactimplement a parallax effect using GSAPadd a magnetic cursor to my websiteanimate text characters with Framer Motionbuild an Awwwards-level animationcreate a glitch text effectgenerate a fractal tree using Canvasdesign a brutalist grid animation

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%
🤖Sucesso de Agentes0%
🕐Atualidade100%
🔗Saúde de Dependências100%
🕸️Centralidade no Grafo0%
🛡️Segurança50%
CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download awwwards-animations
$ synaptic skills detail awwwards-animations
$ synaptic skills live awwwards-animations

Dependências

gsap@gsap/reactlenismotionanimejs

Links

GitHub Repository