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