Communitygithub.com

devmartinese/awwwards-animations

GSAP, Motion, Anime.js, Lenis를 활용하여 Awwwards/FWA 수준의 React 애니메이션을 제작하는 전문 스킬입니다. 프리미엄 스크롤 경험, 맞춤형 커서, 페이지 전환, 텍스트 애니메이션, 패럴랙스 효과, 마이크로 인터랙션 등 60fps의 수상 경력에 걸맞은 고품질 애니메이션을 구축할 때 사용하세요.

awwwards-animations란 무엇인가요?

이 스킬은 **Awwwards** 또는 **FWA** 수준의 프리미엄 웹 애니메이션을 React 기반으로 손쉽게 구현할 수 있도록 설계되었습니다. GSAP (useGSAP), Motion (Framer Motion), Anime.js, Lenis 등 최신 애니메이션 라이브러리를 통합하여 스무스 스크롤, ScrollTrigger, 마그네틱 효과, 텍스트 리빌, 수평 스크롤, 핀 섹션, 스테거 효과, useScroll, useTransform 등을 지원합니다. 또한 Three.js/WebGL과의 통합을 통해 알고리즘 아트, 수학적 아트, 제너레이티브 아트, 프랙털, L-시스템, 흐름장(flow field), 스트레인지 어트랙터, 신성 기하학, 기하학적 퍼즐(듀드니 분할, 탱그램, 테셀레이션, 펜로즈 타일)은 물론, 키네틱 타이포그래피, 글리치, 텍스트 폭발, 모핑, 원형 텍스트 등 다양한 실험적이고 예술적인 애니메이션을 구현할 수 있습니다. 이 스킬은 React의 생명주기와 훅을 완벽히 고려하여 메모리 누수 없이 깔끔하게 정리(cleanup)되며, 브루탈리즘, 미니멀리즘, 네오브루탈리즘 등 다양한 디자인 철학과 혼합하여 사용할 수 있어 개발자에게 강력한 창작 도구를 제공합니다.

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

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

awwwards-animations은(는) 무엇을 하나요?

GSAP (useGSAP), Motion (Framer Motion), Anime.js, Lenis를 활용하여 Awwwards/FWA 수준의 React 애니메이션을 제작하는 전문 스킬입니다. 프리미엄 스크롤 경험, 맞춤형 커서, 페이지 전환, 텍스트 애니메이션, 패럴랙스 효과, 마이크로 인터랙션 또는 60fps를 유지해야 하는 수상 경력에 걸맞은 애니메이션을 구축할 때 사용하세요. 다음 요청 시 트리거됩니다: 부드러운 스크롤, ScrollTrigger, 마그네틱 효과, 리빌 애니메이션, 수평 스크롤, 핀 섹션, 스테거 효과, useScroll, useTransform, Three.js/WebGL 통합, 알고리즘 아트, 수학적 아트, 제너레이티브 아트, 프랙털, L-시스템, 흐름장, 스트레인지 어트랙터, 신성 기하학, 기하학적 퍼즐(듀드니 분할, 탱그램, 테셀레이션, 펜로즈 타일), 키네틱 타이포그래피, 글리치 효과, 텍스트 폭발, 모핑 텍스트, 원형 텍스트, 브루탈리스트 디자인, 미니멀리스트 애니메이션, 네오브루탈리즘 또는 디자인 철학 혼합. React 중심 접근 방식으로 적절한 정리(cleanup)와 훅을 사용합니다.

관련 스킬