scroll-effects
Installation
SKILL.md
Skill: scroll-effects
Hub hiệu ứng cuộn trang: 64 bản gốc nguyên văn (freefrontend/CodePen, MIT) ở Rheinmir/uiux-asset — duyệt gallery, copy nguyên file. Kèm 7 hiệu ứng vanilla tự viết trong assets/ cho dự án không được kéo lib ngoài.
WHAT
Purpose và context
- Purpose: gắn hiệu ứng cuộn trang nhẹ vào trang đích — mặc định copy nguyên file bản GỐC từ
Rheinmir/uiux-asset; dự án không được kéo lib ngoài thì dùng 7 pattern vanilla trongassets/. - Trigger (when to use):
- Trang cần hiệu ứng hiện-dần khi cuộn, chữ stagger, highlight dẫn mắt, nav co lại, nút về đầu trang, mục lục bám theo section, hoặc parallax nhẹ.
- User nói "hiệu ứng scroll", "scroll to top", "scrollspy", "parallax", "reveal khi cuộn".
- Non-goals: KHÔNG dùng cho: chuyển ảnh điện ảnh nặng GPU (đó là
blur), trục timeline mốc thời gian (đó làtimeline), cuộn ngang pin-section kiểu GSAP ScrollTrigger phức tạp (vượt phạm vi skill nhẹ này — nói rõ với user).
Mental model
nhu cầu hiệu ứng → gallery 64 bản gốc (mặc định, copy nguyên file) hoặc 7 pattern vanilla (không được kéo lib) → adapt token theo design.md → một IntersectionObserver + một scroll listener rAF → reduced-motion tắt hết → verify playwright. Hub rẽ sang skill con tương ứng khi mục gallery thuộc skill con.