| 1 | 스크롤 등장(페이드 · 슬라이드 · 줌) | awwwards.com ↗ framer.com ↗ motion.dev ↗ |
| 2 | 글줄 마스크 리빌 | Codrops ↗ motion.dev ↗ motion.dev ↗ |
| 3 | 글자 · 단어 스플릿 등장 | Codrops ↗ motion.dev ↗ |
| 4 | 차례로 나타나기 | framer.com ↗ motion.dev ↗ |
| 5 | 패럴랙스 레이어 | awwwards.com ↗ scroll-driven-animations.style ↗ motion.dev ↗ |
| 6 | 숫자 카운트업 | motion.dev ↗ |
| 7 | 핀 고정 단계 전환 | awwwards.com ↗ scroll-driven-animations.style ↗ |
| 8 | 스크롤 시퀀스 | 21st.dev ↗ |
| 9 | 끌어 넘기는 가로 줄 | awwwards.com ↗ motion.dev ↗ motion.dev ↗ |
| 10 | 펼침 사진 갤러리 | framer.com ↗ freefrontend.com ↗ cssscript.com ↗ |
| 11 | 궤도 · 커버 플로우 카드 | scroll-driven-animations.style ↗ Codrops ↗ motion.dev ↗ |
| 12 | 슬라이드쇼 진행 막대 | scroll-driven-animations.style ↗ motion.dev ↗ motion.dev ↗ |
| 13 | 스크롤 진행 바 | scroll-driven-animations.style ↗ motion.dev ↗ |
| 14 | 사진 호버 확대 | framer.com ↗ Codrops ↗ |
| 15 | 무한 마키(로고 · 문구 흐름) | university.webflow.com ↗ framer.com ↗ motion.dev ↗ |
| 16 | 쌓이는 카드(스택 카드) | scroll-driven-animations.style ↗ framer.com ↗ Codrops ↗ |
| 17 | 스크롤하면 줄어드는 상단바 | scroll-driven-animations.style ↗ scroll-driven-animations.style ↗ motion.dev ↗ |
| 18 | 사진 마스크 펼침(clip-path 리빌) | scroll-driven-animations.style ↗ Codrops ↗ motion.dev ↗ |
| 19 | 카드 3D 틸트 호버 | framer.com ↗ motion.dev ↗ |
| 20 | 페이지 넘김(View Transitions) | Chrome ↗ awwwards.com ↗ Chrome ↗ |
| 21 | 마그네틱 버튼 | Codrops ↗ motion.dev ↗ |
| 22 | 커서 추종(사용자 정의 커서 · 호버 미리보기 사진) | Codrops ↗ motion.dev ↗ motion.dev ↗ |
| 23 | 스크롤 따라 글 채우기 | Codrops ↗ motion.dev ↗ motion.dev ↗ |
| 24 | 핀 고정 가로 스크롤 | scroll-driven-animations.style ↗ awwwards.com ↗ motion.dev ↗ |
| 25 | 스크롤 속도 반응 마키 | framer.com ↗ motion.dev ↗ motion.dev ↗ |
| 26 | 스크롤 연동 확대 대문 | uiuxshowcase.com ↗ scroll-driven-animations.style ↗ motion.dev ↗ |
| 27 | 리퀴드 버튼 호버 | recent.design ↗ framer.com ↗ Codrops ↗ |
| 28 | WebGL 왜곡 호버 · 유체 · 파티클 | Codrops ↗ Codrops ↗ motion.dev ↗ |
| 29 | 무한 3D 스크롤 · 셰이더 화면 전환 | recent.design ↗ awwwards.com ↗ motion.dev ↗ |
| 30 | 로딩 화면(프리로더) | recent.design ↗ motion.dev ↗ |
| 31 | 텍스트 스크램블 | motion.dev ↗ motion.dev ↗ cruip.com ↗ |
| 32 | 타자기(글자 치기 · 문구 바꿔 끼우기) | motion.dev ↗ motion.dev ↗ |
| 33 | 움직이는 그라디언트 메시 배경 | quackit.com ↗ unpkg.com ↗ framer.com ↗ |
| 34 | 노이즈 · 그레인 질감 | css-tricks.com ↗ freecodecamp.org ↗ |
| 35 | 스포트라이트(커서 위치 조명) | frontendmasters.com ↗ 30secondsofcode.org ↗ webflow.com ↗ |
| 36 | 보더 빔(테두리 따라 도는 빛) | v3.magicui.design ↗ aceternity.com ↗ |
| 37 | 벤토 그리드 호버 | webflow.com ↗ awwwards.com ↗ framer.com ↗ |
| 38 | 무한 드래그 그리드 | Codrops ↗ webflow.com ↗ framer.com ↗ |
| 39 | 이미지 트레일(커서 따라 사진) | webflow.com ↗ motion.dev ↗ |
| 40 | 비포 · 애프터 비교 슬라이더 | motion.dev ↗ |
| 41 | 카드 뒤집기 | help.webflow.com ↗ Codrops ↗ coursera.w3schools.com ↗ |
| 42 | 3D 회전 캐러셀(링) | w3schools.com ↗ codepen.io ↗ motion.dev ↗ |
| 43 | 선 그리기(연혁 · 과정 경로) | motion.dev ↗ scrollmagic.io ↗ w3schools.com ↗ |
| 44 | 아이콘 모프 | motion.dev ↗ motion.dev ↗ |
| 45 | 숫자 롤링(오도미터) | frontendmasters.com ↗ motion.dev ↗ motion.dev ↗ |
| 46 | 스크롤 비디오 스크럽 | codeshack.io ↗ greensock.com ↗ |
| 47 | 섹션 색 전환(스크롤 따라 바탕색) | cruip.com ↗ alvarotrigo.com ↗ |
| 48 | 역방향 스크롤 기둥 | scroll-driven-animations.style ↗ |
| 49 | 내리면 숨고 올리면 나오는 상단바 | motion.dev ↗ |
| 50 | 바닥글 드러남(커튼 푸터) | motion.dev ↗ hongkiat.com ↗ ryanseddon.com ↗ |
| 51 | 화면 커튼 전환(와이프 · 아이리스 · 블라인드) | motion.dev ↗ motion.dev ↗ motion.dev ↗ |
| 52 | 풀스크린 메뉴 오버레이 | Codrops ↗ Codrops ↗ quackit.com ↗ |
| 53 | 굵기 변하는 글자(가변 글꼴) | framer.com ↗ framer.com ↗ shadcn.io ↗ |
| 54 | 곡선 따라 흐르는 글(textPath) | css-tricks.com ↗ developer.mozilla.org ↗ |
| 55 | 롤링 글자 버튼 | motion.dev ↗ motion.dev ↗ |
| 56 | 물결 글자(웨이브) | motion.dev ↗ |
| 57 | 흩어졌다 모이는 글자(스캐터) | motion.dev ↗ |
| 58 | 격자 차례 등장(가운데서 · 무작위 · 가장자리에서) | motion.dev ↗ motion.dev ↗ motion.dev ↗ |
| 59 | 누름 리플(누른 자리에서 번지는 물결) | motion.dev ↗ |
| 60 | 원뿔 그라디언트 포인터(커서 쪽 테두리 빛) | motion.dev ↗ dev.to ↗ |
| 61 | 스크롤 그림자(넘치는 쪽 가장자리) | scroll-driven-animations.style ↗ |
| 62 | 날아들고 빠지는 목록 | scroll-driven-animations.style ↗ |
| 63 | CSS 캐러셀 점 · 버튼(`::scroll-marker`) | Chrome ↗ scroll-driven-animations.style ↗ |
| 64 | 카드가 커져 상세로(공유 요소 전환) | Chrome ↗ motion.dev ↗ motion.dev ↗ |
| 65 | 링크 밑줄 그어지기 | webflow.com ↗ codyhouse.co ↗ ics.media ↗ |
| 66 | 스크롤 스냅 전체 화면 구역 | webflow.com ↗ |
| 67 | 스켈레톤 반짝임 | motion.dev ↗ |
| 68 | 넘기는 카드 묶음(스와이프 스택) | motion.dev ↗ codepen.io ↗ |
| 69 | 흐림에서 또렷이(블러 페이드) | magicui.design ↗ animata.design ↗ GitHub ↗ |
| 70 | 단어 차례 등장 | ui.aceternity.com ↗ magicui.design ↗ |
| 71 | 바꿔 끼우는 단어(플립 워드) | ui.aceternity.com ↗ magicui.design ↗ ui.aceternity.com ↗ |
| 72 | 반짝 · 흐르는 그라디언트 글자 | magicui.design ↗ magicui.design ↗ magicui.design ↗ |
| 73 | 형광펜 긋기 | magicui.design ↗ ui.aceternity.com ↗ GitHub ↗ |
| 74 | 녹아 바뀌는 단어(모핑 텍스트) | magicui.design ↗ |
| 75 | 윤곽 글자 커서 채움 | ui.aceternity.com ↗ |
| 76 | 영상이 비치는 글자 | magicui.design ↗ ui.aceternity.com ↗ |
| 77 | 반복 · 잘린 글자 겹 | GitHub ↗ GitHub ↗ GitHub ↗ |
| 78 | 3D로 넘어가는 글자 | magicui.design ↗ GitHub ↗ |
| 79 | 키네틱 타이포 | magicui.design ↗ GitHub ↗ |
| 80 | 구불거리는 글자 | ui.aceternity.com ↗ GitHub ↗ |
| 81 | 글 속에서 커지는 사진 | GitHub ↗ GitHub ↗ |
| 82 | 스크롤 따라 퍼지는 큰 글자 | GitHub ↗ GitHub ↗ codepen.io ↗ |
| 83 | 반짝이 별 글자 | magicui.design ↗ ui.aceternity.com ↗ |
| 84 | 빛이 지나가는 버튼(쉬머) | magicui.design ↗ magicui.design ↗ magicui.design ↗ |
| 85 | 맥동 버튼 | magicui.design ↗ |
| 86 | 길게 눌러 확인 | motion.dev ↗ |
| 87 | 상태 바뀌는 버튼(보냄 → 완료 · 복사됨) | ui.aceternity.com ↗ motion.dev ↗ motion.dev ↗ |
| 88 | 담기 날아가기 | motion.dev ↗ |
| 89 | 꽃가루 · 입자 터짐 | magicui.design ↗ motion.dev ↗ GitHub ↗ |
| 90 | 펼쳐지는 떠 있는 버튼(줄 · 원형) | motion.dev ↗ animata.design ↗ animata.design ↗ |
| 91 | 진행 원이 차는 «맨 위로» | magicui.design ↗ magicui.design ↗ |
| 92 | 스프링 감속(탄력 이징) | motion.dev ↗ motion.dev ↗ motion.dev ↗ |
| 93 | 미끄러지는 탭 표시줄 | motion.dev ↗ motion.dev ↗ animata.design ↗ |
| 94 | 메가 메뉴 펼침 | motion.dev ↗ ui.aceternity.com ↗ |
| 95 | 근접 확대(독 · 격자) | magicui.design ↗ ui.aceternity.com ↗ codepen.io ↗ |
| 96 | 구역 따라 바뀌는 고정 로고 · 상단바 | GitHub ↗ GitHub ↗ |
| 97 | 올리면 흐르는 메뉴 | GitHub ↗ GitHub ↗ |
| 98 | 붙었을 때 바뀌는 고정 칸 | Chrome ↗ |
| 99 | 공지 띠 등장 | ui.aceternity.com ↗ animata.design ↗ |
| 100 | 들어온 쪽에서 덮개(방향 감지 호버) | ui.aceternity.com ↗ |
| 101 | 칸 사이를 미끄러지는 호버 배경 | ui.aceternity.com ↗ motion.dev ↗ |
| 102 | 빛 반사(글레어) | ui.aceternity.com ↗ magicui.design ↗ |
| 103 | 펼쳐지는 카드 더미(부채 · 폴더) | animata.design ↗ framer.com ↗ framer.com ↗ |
| 104 | 커서 자리 글자 무늬 | ui.aceternity.com ↗ GitHub ↗ |
| 105 | 사진 더미가 넘어가는 후기 | ui.aceternity.com ↗ |
| 106 | 요금 월 · 연 전환 | motion.dev ↗ codepen.io ↗ framer.com ↗ |
| 107 | 물리 놀이(매달린 명찰 · 떨어지는 태그) | framer.com ↗ framer.com ↗ |
| 108 | 돋보기 렌즈 | ui.aceternity.com ↗ magicui.design ↗ |
| 109 | 픽셀에서 또렷해지는 사진 | GitHub ↗ magicui.design ↗ |
| 110 | 두 장 클립 호버 | GitHub ↗ GitHub ↗ |
| 111 | 격자 ↔ 슬라이드 보기 전환 | GitHub ↗ GitHub ↗ GitHub ↗ |
| 112 | 비켜주는 격자 | GitHub ↗ GitHub ↗ |
| 113 | 원근 격자 스크롤 | GitHub ↗ GitHub ↗ GitHub ↗ |
| 114 | 스크롤 따라 배치가 바뀌는 사진 | GitHub ↗ GitHub ↗ GitHub ↗ |
| 115 | 흩어진 사진이 격자로 정렬(등장) | GitHub ↗ GitHub ↗ GitHub ↗ |
| 116 | 큐브 · 뒤집기 넘김 | swiperjs.com ↗ swiperjs.com ↗ |
| 117 | 썸네일 연동 갤러리 | swiperjs.com ↗ motion.dev ↗ |
| 118 | 사진 · 영상 크게 보기(제자리 확대) | motion.dev ↗ motion.dev ↗ magicui.design ↗ |
| 119 | SVG 필터 사진 일렁임 | GitHub ↗ GitHub ↗ |
| 120 | 글리치 · 색수차 | GitHub ↗ GitHub ↗ ui.aceternity.com ↗ |
| 121 | 구겨진 종이 펴짐 | framer.com ↗ recent.design ↗ |
| 122 | 책장 넘김 | framer.com ↗ GitHub ↗ |
| 123 | 구 · 나선 3D 갤러리 | motion.dev ↗ motion.dev ↗ motion.dev ↗ |
| 124 | 분류 누르면 재배치되는 갤러리 | framer.com ↗ motion.dev ↗ motion.dev ↗ |
| 125 | 켄 번즈(천천히 확대 · 이동) | quackit.com ↗ kirupa.com ↗ |
| 126 | 올리면 영상 재생 카드 | framer.com ↗ framer.com ↗ webflow.com ↗ |
| 127 | 빨리 내리면 기우는 사진(스큐) | codepen.io ↗ motion.dev ↗ |
| 128 | 기울어진 화면이 펴지는 스크롤 | ui.aceternity.com ↗ ui.aceternity.com ↗ |
| 129 | 덮이며 물러나는 구역 | GitHub ↗ |
| 130 | 구역을 넘나드는 한 요소 | GitHub ↗ |
| 131 | 스크롤 따라 바뀌는 배경 도형 | GitHub ↗ codepen.io ↗ GitHub ↗ |
| 132 | 붙은 칸만 강조(스냅 상태) | Chrome ↗ |
| 133 | 경로 따라 움직이는 아이콘 | GitHub ↗ motion.dev ↗ codepen.io ↗ |
| 134 | 부드러운 · 무한 스크롤(가로채기 계열) | motion.dev ↗ lenis.darkroom.engineering ↗ GitHub ↗ |
| 135 | 움직이는 빛줄기 | ui.aceternity.com ↗ ui.aceternity.com ↗ magicui.design ↗ |
| 136 | 유성 | magicui.design ↗ ui.aceternity.com ↗ ui.aceternity.com ↗ |
| 137 | 깜빡이는 격자 · 레트로 바닥 | magicui.design ↗ magicui.design ↗ magicui.design ↗ |
| 138 | 커서에 반응하는 격자 · 점 | magicui.design ↗ ui.aceternity.com ↗ ui.aceternity.com ↗ |
| 139 | 램프 조명 | ui.aceternity.com ↗ |
| 140 | 흐르는 물결선 | ui.aceternity.com ↗ ui.aceternity.com ↗ |
| 141 | 리퀴드 글래스 | ui.aceternity.com ↗ framer.com ↗ framer.com ↗ |
| 142 | 가장자리 점점 흐림 | magicui.design ↗ |
| 143 | 지도 연결선 그려짐 | ui.aceternity.com ↗ magicui.design ↗ |
| 144 | 회전 지구본 | magicui.design ↗ ui.aceternity.com ↗ ui.aceternity.com ↗ |
| 145 | 궤도 · 구름 아이콘 | magicui.design ↗ magicui.design ↗ |
| 146 | 아이콘 사이를 흐르는 연결선 | magicui.design ↗ cult-ui.com ↗ |
| 147 | 그래프 그려짐(막대 · 선) | animata.design ↗ motion.dev ↗ |
| 148 | 원형 게이지 차오름 | animata.design ↗ animata.design ↗ magicui.design ↗ |
| 149 | 3D 장면 임베드(Spline) | spline.design ↗ viewer.spline.design ↗ docs.spline.design ↗ |
| 150 | Lottie · Rive 벡터 애니메이션 | lottiefiles.com ↗ rive.app ↗ |
| 151 | 플립 보드 · 카운트다운 | ui.aceternity.com ↗ hover.dev ↗ |
| 152 | 아코디언 높이 부드럽게 | Chrome ↗ motion.dev ↗ hover.dev ↗ |
| 153 | 열고 닫히는 창의 등장 · 퇴장 | Chrome ↗ Chrome ↗ ui.aceternity.com ↗ |
| 154 | 아래에서 올라오는 시트 | motion.dev ↗ |
| 155 | 튀어오르는 말풍선 툴팁 | ui.aceternity.com ↗ GitHub ↗ Chrome ↗ |
| 156 | 쌓이는 알림(토스트) | motion.dev ↗ motion.dev ↗ magicui.design ↗ |
| 157 | 떠오르는 입력 이름표 | quackit.com ↗ codepen.io ↗ |
| 158 | 바뀌는 입력 안내문 | ui.aceternity.com ↗ |
| 159 | 잘못 넣으면 흔들기 | 30secondsofcode.org ↗ quackit.com ↗ |
| 160 | 밝기 전환 — 해 · 달 모양 · 원형 번짐 | web.dev ↗ magicui.design ↗ |
| 161 | 펼침 목록(셀렉트) 꾸미기 | Chrome ↗ |
| 162 | 끌어 놓는 파일 올리기 | ui.aceternity.com ↗ |
| 163 | 체크 표시가 그려지는 체크박스 | motion.dev ↗ motion.dev ↗ framer.com ↗ |
| 164 | 단계별 진행 표시 | ui.aceternity.com ↗ |
| 165 | 3D로 젖혀지며 나타나기 | michalsnik.github.io ↗ |
| 166 | 마우스 따라 움직이는 배경 층 | GitHub ↗ GitHub ↗ swiperjs.com ↗ |
| 167 | 더 불러온 글이 차례로 나타남 | motion.dev ↗ motion.dev ↗ |
| 168 | 기울어진 사진 벽 흐름(3D 마키) | ui.aceternity.com ↗ motion.dev ↗ |