vibe-webeffect — 웹 애니메이션 추천·적용 스킬

파일 구성

• catalog.json

  — 72개 효과.

  {id, cat, kr, en, intensity, tags, prereq, code, ref}

  스키마

• references/recipes.md

  — 카테고리별 공용 구현 패턴(보일러플레이트). 코드 적용 전 반드시 읽는다

워크플로우

1단계 — UI 컨텍스트 추출

2단계 — 카탈로그 매칭

catalog.json

3단계 — 추천 제시 (적용 전에 반드시)

[한국어 이름] ([영어 이름]) — 왜 이 화면에 맞는지 한 줄 + 필요한 전제조건(있으면)

4단계 — 적용

1. references/recipes.md

   에서 해당 카테고리의 공용 패턴을 읽는다
2. catalog의

   code

   (핵심)와 recipes의 보일러플레이트를 조합해 사용자 프로젝트 구조에 맞게 삽입한다
3. 아래 적용 규칙을 지킨다

5단계 — 결과 보고

적용 규칙 (위반 금지)

1. 강도 배합 — 한 화면(뷰포트)에

   bold

   는 최대 1개. 나머지는 subtle/medium. 전 화면이 다 움직이면 아무것도 안 보인다.
2. reduced-motion 필수 — 모든 애니메이션에

   @media(prefers-reduced-motion:reduce)

   가드 또는 JS

   matchMedia

   체크를 넣는다.
3. 성능 — transform·opacity만 애니메이션하는 것을 기본으로 한다.

   filter

   ·

   box-shadow

   애니메이션은 작은 요소에만. 스크롤 핸들러엔 lerp/rAF, 리스너엔

   {passive:true}

   .
4. transition 재생 함정 — transition 기반 효과를 재트리거할 땐 recipes.md의 "스냅 리셋" 패턴을 쓴다 (클래스 뗐다 바로 붙이면 재생 안 됨).
5. 등장 효과는 IntersectionObserver 1개로 통합 — 요소마다 옵저버를 만들지 않는다.
6. 로딩 UX 원칙 — 진행률을 알면 확정 프로그레스(+% 숫자), 모르면 무한/스피너, 구조를 알면 스켈레톤. 1초 미만 작업엔 로딩 표시 생략.
7. 의존성 0 — 모든 효과는 라이브러리 없이 순수 HTML/CSS/JS로 적용한다. 사용자가 GSAP 등을 이미 쓰고 있을 때만 그 방식을 따른다.
8. 마이크로 인터랙션 공용 이징 —

   cubic-bezier(.34,1.56,.64,1)

   (오버슈트 스프링).

추천 어조

• 이름을 가르치듯: "이건 **라인 마스크 리빌(line mask reveal)**이라고 하는데…"
• 과잉을 말리는 것도 추천이다: "여긴 효과 없이 두는 게 낫다"가 정답인 화면이 있다.
• 전제조건(예: 이미지 시퀀스는 ffmpeg 프레임 추출 필요)은 추천 시점에 미리 알린다.