IntersectionObserver
웹 애니메이션 사전 72종 (vibe-webeffect)
해결하는 문제
밋밋한 웹페이지에 어울리는 움직임을 넣고 싶은데 효과 이름을 모른다.
스크롤, 마우스 올리기, 등장 같은 웹 효과 72가지를 맥락에 맞게 골라 AI가 코드로 적용합니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것평범한 웹페이지
브라우저가 하는 일효과 목록에서 맥락에 맞는 효과 고르기
나오는 것움직이는 화면
쓰는 브라우저 기술
CSS Animations·TransitionsIntersectionObserverWeb Animations API
라이브러리와 모델
vibe-webeffect (npm·Agent Skills)
바꿀 수 있는 옵션
- 효과 범주 (스크롤, 호버, 등장)
- 움직임 줄이기 설정 존중
자주 막히는 곳
- 효과를 너무 많이 넣으면 산만하고 느려진다
- 움직임 줄이기 설정을 무시하면 접근성 문제가 생긴다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI 코딩 도구에 효과 스킬 장착
웹 서비스
- 랜딩페이지 고급화
피지컬 AI
- 디지털 사이니지 모션
넓히는 방법
- 효과 미리보기 갤러리
- 브랜드 모션 가이드
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
npx skills add cdsassj00/vibe-webeffect로 설치한 효과 스킬을 써서 이 랜딩페이지에 어울리는 스크롤 효과를 넣어줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md