EFFECTS273 LOADED
RENDER60 FPS

📊 관리자 모션 효과

관리자 대시보드와 운영 환경에 최적화된 106가지 모션 효과.
데이터 시각화, 테이블, 상태 피드백, 네비게이션, 폼 인터랙션을 체험하세요.

01. 📈 [Admin] 데이터 시각화 & 차트

차트, 그래프, KPI 등 데이터 시각화에 활용하는 모션

Num Counting

숫자 카운팅 애니메이션

1.1
0

Graph Line

선 그래프 드로잉

1.2

Bar Chart Rise

막대 차트 솟아오름

1.3

Donut Chart

도넛 차트 채움

1.4

Realtime Blink

실시간 데이터 점멸

1.5
매출
1,234
방문
5,678
전환
910

Up/Down Color

증감에 따른 색상 전환

1.6
100
0
200
0
300
0

Chart Tooltip

차트 툴팁 호버

1.7

Stacked Chart

스택 차트 쌓임

1.8

Heatmap Fade

히트맵 셀 페이드

1.9

Gauge Anim

게이지 채움

1.10
0%

Data Pulse

데이터 수신 펄스

1.11
CPU
72%
MEM
58%
DISK
41%

KPI Highlight

KPI 강조 반짝임

1.12
매출
₩2.4억
성장률
+18.5%
고객수
1,247

Progress++

프로그레스 증가

1.13
작업 완료0%
파일 업로드0%
데이터 처리0%

Pie Explode

파이 차트 분리

1.14

Legend Toggle

범례 토글

1.15
React
Vue
Angular

Realtime Stream

실시간 스트림

1.16

Sparkline

스파크라인 그래프

1.17
매출
방문
전환

Chart Zoom

차트 확대/축소

1.18

Axis Reveal

축 드로잉

1.19
2022202320242025202620%40%60%80%

Data Compare

데이터 비교 전환

1.20
Plan A
Plan B

02. 📋 [Admin] 테이블 & 리스트

테이블 행, 정렬, 페이지네이션, 편집 등 인터랙션 모션

Row Hover

행 호버 하이라이트

2.1
#1김철수 / 개발팀
#2이영희 / 디자인팀
#3박지수 / 기획팀
#4최민호 / 마케팅팀

Row Expand

행 확장 디테일

2.2
프로젝트 A
진행률: 78% · 담당: 개발팀 · 마감: 2026-05
프로젝트 B
진행률: 78% · 담당: 개발팀 · 마감: 2026-05
프로젝트 C
진행률: 78% · 담당: 개발팀 · 마감: 2026-05

Pagination

페이지 전환 페이드

2.3
페이지 1 데이터 표시중...

Sorting

정렬 아이콘 전환

2.4
10
25
38
52
67

Filter

필터 적용 트랜지션

2.5
React
Node.js
Vue
Python
Angular
Go

Row Add

행 추가 슬라이드

2.6
항목 1
항목 2

Row Delete

행 삭제 페이드

2.7
삭제할 항목 A
삭제할 항목 B
삭제할 항목 C
삭제할 항목 D

Skeleton Table

테이블 스켈레톤

2.8

Drag Reorder

드래그 순서변경

2.9
첫 번째
두 번째
세 번째
네 번째

Checkbox Ripple

체크박스 리플

2.10
옵션 A
옵션 B
옵션 C
옵션 D

Bulk Select

일괄 선택

2.11
전체 선택
항목 1
항목 2
항목 3

Inline Edit

인라인 편집

2.12
더블클릭하세요

Hover Actions

호버 액션 표시

2.13
프로젝트 항목
✏️📋🗑️

Sticky Header

고정 헤더

2.14
NAME | ROLE | STATUS
사용자 1 · 개발팀 · 활성
사용자 2 · 개발팀 · 활성
사용자 3 · 개발팀 · 활성
사용자 4 · 개발팀 · 활성
사용자 5 · 개발팀 · 활성
사용자 6 · 개발팀 · 활성
사용자 7 · 개발팀 · 활성
사용자 8 · 개발팀 · 활성

Scroll Shadow

스크롤 그림자

2.15
스크롤 항목 1
스크롤 항목 2
스크롤 항목 3
스크롤 항목 4
스크롤 항목 5
스크롤 항목 6
스크롤 항목 7
스크롤 항목 8
스크롤 항목 9
스크롤 항목 10
스크롤 항목 11
스크롤 항목 12

Loading Overlay

로딩 오버레이

2.16
테이블 데이터

Empty State

빈 상태 표시

2.17
📭
데이터가 없습니다

Search Highlight

검색 하이라이트

2.18
React 프로젝트
Next.js 웹앱
Flutter 모바일
Unity 게임

Row Flash

행 업데이트 깜빡

2.19
항목 1대기중
항목 2처리중
항목 3완료
항목 4오류

03. 🔔 [Admin] 상태 & 피드백

성공/에러/경고/알림 등 사용자 피드백 모션

Save Check

저장 체크마크

3.1

Error Shake

에러 시 흔들림

3.2
⚠ 오류가 발생했습니다

Toast Slide

토스트 슬라이드

3.3

Alert Badge

알림 배지 팝

3.4
🔔

Async Spinner

비동기 스피너

3.5

Retry Pulse

재시도 펄스

3.6
⚠ 연결 실패

Validation HL

유효성 강조

3.7
✕ 3자 이상 필요

Input Glow

입력 글로우

3.8

Disabled Fade

비활성 페이드

3.9

Success Fill

성공 채움

3.10

Error Border

에러 테두리

3.11

Warning Blink

경고 점멸

3.12
⚠️주의가 필요합니다

Tooltip Fade

툴팁 페이드

3.13

Modal Scale

모달 스케일

3.14

Confirm Shake

확인 쉐이크

3.15
정말 삭제하시겠습니까?

Autosave

자동저장 표시

3.16
저장됨

Status Pulse

상태 펄스

3.17
온라인
점검중
오프라인

API Loading

API 로딩 바

3.18

Alert Dismiss

알림 해제

3.19
ℹ 새로운 알림이 있습니다

Snackbar

스낵바 슬라이드

3.20

04. 🧭 [Admin] 네비게이션 & 레이아웃

사이드바, 드로어, 탭, 메뉴 등 레이아웃 모션

Sidebar Collapse

사이드바 접기

4.1
◀ 접기
대시보드
프로젝트
사용자
설정
콘텐츠

Menu Highlight

메뉴 활성 강조

4.2
Home
Projects
Team
Settings

Breadcrumb

브레드크럼 슬라이드

4.3
Home/Projects

Tab Underline

탭 밑줄 이동

4.4
전체
진행중
완료
보류
전체 탭 콘텐츠

Tab Content

탭 콘텐츠 전환

4.5
Panel 1

Drawer Slide

드로어 슬라이드

4.6
DRAWER
항목 1
항목 2
항목 3

Panel Expand

패널 확장

4.7
PANEL

Header Shrink

헤더 축소

4.8
STICKY HEADER
콘텐츠 블록 1
콘텐츠 블록 2
콘텐츠 블록 3
콘텐츠 블록 4
콘텐츠 블록 5
콘텐츠 블록 6
콘텐츠 블록 7
콘텐츠 블록 8
콘텐츠 블록 9
콘텐츠 블록 10

FAB Appear

FAB 등장

4.9

Scroll Indicator

스크롤 표시

4.10
스크롤 콘텐츠 1
스크롤 콘텐츠 2
스크롤 콘텐츠 3
스크롤 콘텐츠 4
스크롤 콘텐츠 5
스크롤 콘텐츠 6
스크롤 콘텐츠 7
스크롤 콘텐츠 8
스크롤 콘텐츠 9
스크롤 콘텐츠 10

Menu Hover

메뉴 호버

4.11
대시보드
분석
리포트
설정

Multi Level

다단계 메뉴

4.12
프로젝트
모바일
게임
개발
디자인
설정
일반
보안

Context Menu

컨텍스트 메뉴

4.13
우클릭하세요

Grid Rearrange

그리드 재배열

4.14
1
2
3
4
5
6

Split Pane

분할 패널

4.15
Left
Right

Fullscreen

전체 화면 토글

4.16

Nav Indicator

네비 인디케이터

4.17
Home
Feed
Chat
Profile

05. ✏️ [Admin] 입력 & 폼

입력 필드, 체크박스, 드롭다운 등 폼 요소 모션

Focus Border

포커스 테두리

5.1

Label Float

라벨 플로팅

5.2

Checkbox

체크박스 애니메이션

5.3
동의
구독
알림

Radio Ripple

라디오 리플

5.4
옵션A
옵션B
옵션C

Switch

스위치 전환

5.5
알림
OFF

Dropdown

드롭다운 슬라이드

5.6
선택하세요
React
Next.js
Vue
Angular

Select Fade

선택 페이드

5.7
전체
진행중
완료
취소

Date Picker

달력 팝업

5.8
📅 2026-04-01

Validation

유효성 체크

5.9

Input Shake

입력 에러 흔들림

5.10

File Upload

파일 업로드 진행

5.11

Drag Drop

드래그 앤 드롭

5.12
📁드래그 & 드롭

Autocomplete

자동완성

5.13

Multi Select

다중 선택 태그

5.14

Clear Button

클리어 버튼

5.15

Password Toggle

비밀번호 표시/숨기기

5.16
👁️

Form Submit

제출 시 로딩→완료

5.17

Form Reset

초기화

5.18

Focus Glow

포커스 글로우 링

5.19

06. 🛠️ [Admin] 추가 시스템 효과

토스트 타이머, 읍음 처리, FAB 메뉴, 네트워크 경고, 세션 잠금 등

Toast Timer

토스트 타이머 바

6.1

Mark as Read

읍음 처리 페이드

6.2
새 문의가 접수됨
서버 알림 발생
업데이트 완료

Minimize Dock

창 최소화→독

6.3
MODAL
작업 내용...

File Drop

파일 드롭 바운스

6.4
📁클릭하여 드롭

Star Spin

별 회전 중요도

6.5

Export

내보내기 프로그레스

6.6

Offline Alert

네트워크 끊김 경고

6.7

Lock Screen

세션 잠금 화면

6.8
Dashboard Content

Radar Chart

방사형 레이다 차트

6.9
속도안정보안확장UX

FAB Menu

FAB 하위 메뉴 스핀

6.10
+