MOTION PATTERNS
motionsite.ai에서 가져온 4가지 핵심 연출
과함 없이, 목적 있는 움직임. 각 요소는 뷰포트 진입 시 한 번만 부드럽게 등장합니다.
01
부드러운 스크롤
Lenis로 관성 스크롤. 페이지 전체가 물 흐르듯.
02
마스크 리빌
제목이 마스크 아래에서 단어별로 올라옵니다.
03
스크롤 핀
구간을 잠그고 스케일·페이드로 강조.
04
무한 마퀴
키워드 띠가 끊김 없이 흐릅니다.
전국 0개 보건·교육기관이
먼저 움직였습니다.
HOW TO USE
앞으로 인터랙티브 사이트는 이 스타터를 복제
이 파일 + vendor/(gsap·ScrollTrigger·lenis)를 그대로 복사하고, 콘텐츠만 교체하세요. .reveal·.mask 클래스만 붙이면 모션이 자동 적용됩니다. prefers-reduced-motion이면 전부 정적으로 안전하게 폴백합니다.