🚀 프론트엔드 모션 효과
사용자 경험과 브랜드 몰입감을 높이는 61가지 프론트엔드 전용 모션.
페이지 전환, 버튼/카드, 미디어 인터랙션을 체험하세요.
01. 🚀 [Front] 페이지 진입 & 전환
사용자의 시선을 사로잡는 페이지 진입 및 화면 전환 효과
Page Fade In
전체 화면이 부드럽게 밝아지는 진입
Slide Up
아래에서 위로 밀려올라오는 전환
Wipe Right
오른쪽으로 닦이듯 열리는 전환
Zoom Reveal
중앙에서 확대되며 등장
Curtain Open
좌우 막이 걷히며 콘텐츠 노출
Color Morph
배경색이 물감 번지듯 변경
Staggered Load
시차를 두고 순차적으로 등장
Blur to Clear
흐릿함에서 선명해지는 포커스
Iris Reveal
원형 마스크가 커지며 등장
Split Screen
화면이 반으로 갈라지며 진입
Sticky Section
스크롤 시 고정되는 섹션
Scale Down
스크롤 시 히어로 이미지 축소
Text Reveal
스크롤 도달 시 텍스트 등장
Rotate on Scroll
스크롤에 따라 오브젝트 회전
Depth Zoom
스크롤 시 Z축 확대
Mega Menu
넓은 패널이 부드럽게 드롭
Underline Expand
호버 시 밑줄 양옆으로 확장
Background Pill
활성 메뉴를 따라 배경 캡슐 이동
Menu Cascade
메뉴 항목이 폭포수처럼 등장
Text Color Fill
호버 시 텍스트에 색상이 차오름
02. 🔘 [Front] 버튼/카드 & 타이포
버튼, 카드, 텍스트에 적용하는 감성적 UX 모션
Hover Scale
호버 시 크기 살짝 확대
Pulse CTA
주요 버튼 주위 파동
Shine Sweep
버튼 위로 빛 통과
Arrow Slide
호버 시 화살표 우측 이동
Border Draw
테두리 시계방향 그리기
Morphing Btn
버튼→스피너→완료 변형
3D Press
클릭 시 눌리는 물리적 느낌
Ghost to Solid
아웃라인→솔리드
Card Lift
위로 뜨며 그림자 깊어짐
Content Overlay
텍스트 패널 올라옴
Border Glow
마우스 따라다니는 네온 빛
Carousel Snap
자석처럼 정렬
Word Slide Up
단어 순환 교체
Text Outline
외곽선→내부 채움
Hover Text Swap
텍스트 교체
Gradient Text
그라데이션 흐름
Character Jump
글자 물결 점프
Highlight
형광펜 밑줄
Star Rating
별점 바운스
03. 📸 [Front] 미디어 & 인터랙션
이미지/영상/로딩/마이크로 인터랙션 효과
Ken Burns
배경 천천히 확대/이동
Hover Colorize
흑백→컬러
Masked Reveal
마스크 벗겨짐
Crossfade Slider
이미지 겹치며 전환
Spinners
다양한 로딩 스피너
Logo Draw
로고 윤곽선 그리기
Modal Bounce
모달 바운스
Bottom Sheet
하단 패널
Custom Cursor
커스텀 커서
Add to Cart
장바구니로 날아감
Copy Check
복사 후 체크
npm installAudio Visualizer
음파 막대
Theme Toggle
다크/라이트 전환
Typing Dots
입력중 표시
Step Progress
다단계 진행
Liquid Loader
유체 로딩
Backdrop Blur
배경 블러
Search Expand
검색창 펼침
Page Exit
페이지 종료 페이드
04. 🎯 [Front] 추가 인터랙션
패스 드로잉, 이미지 줌, 원형 메뉴 등 고급 인터랙션
Path Draw
스크롤로 SVG 패스 그리기
Image Zoom Card
프레임 고정 + 내부 확대
Circular Menu
원형 방사형 메뉴