01scroll scrubbing18 효과
스크롤 스크러빙
스크롤을 영상 편집 타임라인의 스크러버처럼 쓴다. 스크롤한 만큼 효과가 재생되는 요즘 사이트의 핵심 원리 + 결합 데모 12종.
열기 →HOVER
02hover effects9 효과
마우스 호버
리프트·3D 틸트·글로우·샤인·마그네틱·스포트라이트. 커서에 반응하는 미세한 움직임이 만드는 ‘고급스러움’의 정체.
열기 →
SCRAMBLEGLITCHSPLITMARQUEE
SCRAMBLEGLITCHSPLITMARQUEE
03signature effects9 효과
시그니처 효과
어워즈 사이트가 쓰는 ‘와’ 소리 나는 효과. 텍스트 스크램블·글리치·커스텀 커서·스티키 스택·모프 블롭.
열기 →REVEAL
04reveal on scroll9 효과
등장·리빌
화면에 들어오는 순간 재생되는 등장 효과. 페이드 업·스태거·라인 마스크·카운트업 — IntersectionObserver 하나로 전부 구동.
열기 →05micro-interactions9 효과
마이크로 인터랙션
토글·좋아요 버스트·리플·별점·체크 드로우·벨 알림. 앱이 ‘살아있다’고 느끼게 하는 0.5초의 디테일.
열기 →06loading · states9 효과
로딩·상태
스피너·스켈레톤 시머·프로그레스·성공 체크·에러 셰이크·버튼 몰프. UI의 신뢰감을 만드는 상태 피드백.
열기 →07experimental9 효과
실험실 · 브라우저가 이런 것도?
라이브러리 0개. 순수 canvas·SVG·CSS로 구이 메탈볼, 파티클 성좌, 매트릭스 레인, 리퀴드 텍스트, ASCII 3D 도넛, 무한 터널까지.
열기 →