소셜 오브 복숭아.

모션 레퍼런스205개

움직임에는 이름이 있습니다. “부드럽고 세련되게”보다 이름 한 단어가 AI 에게 훨씬 정확하게 전달됩니다. 데모로 움직임을 고르고, 이름이 든 요청 문장을 복사해 붙여 넣으세요.

받는 쪽 · 코딩 AI

UI 컴포넌트

열고 겹치기

  • 모달

    Modal dialog

    뒤를 막고 한가운데 창 하나에 집중시킨다

  • 드로어

    Drawer (Off-canvas)

    화면 가장자리 밖에 숨어 있던 패널이 들어온다

  • 바텀 시트

    Bottom sheet

    아래 가장자리에서 판이 솟아 반쯤 덮는다

  • 아코디언

    Accordion

    제목 줄 아래로 본문이 열렸다 닫힌다

  • 드롭다운

    Dropdown menu

    버튼 바로 밑에 고를 목록이 내려온다

  • 라이트박스

    Lightbox

    썸네일이 제자리에서 어둠 위로 크게 펼쳐진다

고르고 전환하기

  • 탭

    Tabs

    머리표를 고르면 같은 자리의 내용이 갈린다

  • 캐러셀

    Carousel

    가로로 늘어선 판을 한 장씩 밀어 넘긴다

  • 토글 스위치

    Toggle switch

    동그란 손잡이가 옆으로 건너가며 켜진다

  • 세그먼트 컨트롤

    Segmented control

    붙어 있는 칸 사이로 선택 표시가 미끄러진다

  • 필터 칩

    Filter chips

    작은 알약을 눌러 조건을 켰다 끈다

  • 범위 슬라이더

    Range slider

    한 막대 위 두 손잡이 사이가 고른 구간이다

  • 스테퍼

    Stepper (+/-)

    양옆 버튼으로 가운데 수를 하나씩 바꾼다

  • 페이지네이션

    Pagination

    쪽 번호를 골라 긴 목록을 나눠 본다

안내 · 상태

  • 햄버거 메뉴

    Hamburger menu

    가로줄 세 개 아이콘 뒤에 메뉴가 숨어 있다

  • 브레드크럼

    Breadcrumbs

    홈부터 지금 화면까지의 길을 한 줄로 잇는다

  • 메가 메뉴

    Mega menu

    상단 메뉴 아래로 여러 단짜리 넓은 판이 열린다

  • 스텝 인디케이터

    Step indicator

    점과 선으로 절차의 진행 칸을 채워 간다

  • 스켈레톤

    Skeleton screen

    내용이 올 자리를 빛이 지나가는 빈 틀로 채운다

  • 스피너

    Spinner

    끊긴 고리가 제자리에서 돌며 기다리게 한다

  • 빈 상태

    Empty state

    목록이 비었을 때 무엇을 하면 되는지 알려 준다

입력 · 버튼

  • 플로팅 라벨

    Floating label

    입력란 안의 이름표가 테두리 위로 올라간다

  • 로딩 버튼

    Loading button

    누른 버튼이 둥글게 줄어 돌다가 완료로 펴진다

  • 좋아요 애니메이션

    Like button animation

    하트가 튀며 차오르고 둘레로 알갱이가 터진다

  • 맨 위로 버튼

    Back-to-top button

    내려가면 둥근 버튼이 생기고 누르면 꼭대기로

알림 · 피드백

잠깐 뜨는 피드백

  • 토스트

    Toast notification

    모서리에 한 줄 소식이 올라왔다가 물러난다

  • 스낵바

    Snackbar with undo action

    지운 직후 아래에 띠가 올라와 되돌릴 기회를 준다

  • 스택 토스트

    Stacked toasts (expand on hover)

    쌓인 토스트가 카드 더미로 겹쳤다가 포인터를 올리면 펼쳐진다

  • 프로미스 토스트

    Promise toast (loading to success)

    토스트 하나가 「진행 중」에서 「완료」로 모양을 바꾼다

  • 아일랜드 알림

    Dynamic island notification

    화면 위 가운데의 알약이 늘어나 알림을 보여 준다

  • 새 소식 알약

    New items pill

    피드 위에 「새 글」 알약이 내려와 누르면 맨 위로 올린다

머무는 알림

  • 공지 배너

    Announcement banner

    페이지 맨 위에 띠가 내려와 내용을 밀어 내리고, 닫으면 접힌다

  • 인라인 알림

    Inline alert (callout)

    본문 사이에 안내 상자가 높이를 펼치며 끼어든다

  • 배지

    Badge

    아이콘 모서리에 새 소식 수가 붙는다

  • 알림 센터

    Notification center dropdown

    종 아이콘이 흔들리고, 누르면 쌓인 알림 목록이 펼쳐진다

  • 상태 칩

    Status chip transition

    작은 상태 표시가 「초안 → 검토 중 → 게시됨」으로 색과 글을 바꾼다

입력 오류

  • 인라인 검증

    Inline validation

    치는 동안 입력란 끝에 ! 와 ✓ 가 바뀐다

  • 오류 흔들기

    Shake on invalid input

    잘못 제출하면 입력란이 좌우로 흔들리고 테두리가 바뀐다

  • 오류 요약

    Error summary with focus jump

    폼 위에 오류 목록이 뜨고, 첫 오류 칸으로 포커스가 옮겨 간다

응답을 요구하는 알림

  • 확인 다이얼로그

    Confirmation dialog

    지우기 전에 「정말 삭제할까요?」 창이 떠 한 번 더 묻는다

  • 액션 시트

    Action sheet

    모바일 아래에서 선택지 목록과 따로 떨어진 취소 버튼이 올라온다

  • 이탈 방지 팝업

    Exit-intent popup

    커서가 창 위로 빠져나가려 하면 안내 창이 뜬다

  • 결과 화면

    Success screen with checkmark

    원이 커지고 체크 표시가 그려지며 축하 조각이 흩날린다

맥락 안내

  • 툴팁

    Tooltip

    가리키는 동안만 짧은 도움말이 붙는다

  • 팝오버

    Popover

    누른 자리 옆에 꼬리 달린 작은 판이 열린다

  • 코치마크

    Coach mark spotlight

    화면이 어두워지고 한 요소만 뚫린 채 옆에 설명이 붙는다

  • 온보딩 투어

    Onboarding product tour

    밝은 구멍과 말풍선이 단계마다 다음 요소로 옮겨 간다

  • 핫스팟

    Hotspots

    사진 위 점이 맥박치고 누르면 설명이 뜬다

브라우저 · OS

  • 시스템 푸시 알림

    OS push notification

    브라우저 밖, 운영체제 화면 모서리에 앱 알림 카드가 미끄러져 들어온다

  • 알림 권한 요청

    Notification permission prompt

    주소창 아래에 「알림 허용 · 차단」 상자가 떨어지고, 허용하면 종 표시가 켜진다

  • 탭 제목 알림

    Browser tab title alert

    다른 탭을 보는 동안 탭 제목 앞에 「(3)」이 깜빡인다

  • 파비콘 점

    Favicon notification badge

    탭의 작은 아이콘 모서리에 색 점이 톡 붙는다

스크롤 연출

나타남

  • 페이드인

    Scroll-triggered fade-in

    화면에 들어온 카드부터 옅게 떠오른다

  • 슬라이드인

    Slide-in

    그림과 글이 양옆에서 밀려와 한 줄로 맞춰진다

  • 스태거

    Stagger animation

    같은 등장을 카드마다 조금씩 늦게 건다

  • 마스크 리빌

    Clip-path reveal

    덮인 그림이 한쪽 가장자리부터 걷힌다

  • 블러 인

    Blur-in reveal

    뿌연 카드가 초점이 맞듯 또렷해진다

스크롤 연동

  • 스크롤 연동

    Scroll-linked animation

    읽은 만큼 머리줄 밑 막대가 차오른다

  • 패럴랙스

    Parallax scrolling

    먼 층은 느리게, 가까운 층은 빠르게 지나간다

  • 스크롤 줌

    Scale on scroll

    가운데 그림이 커지며 화면을 가득 채운다

  • 이미지 시퀀스

    Scroll-scrubbed image sequence

    연속 사진을 넘겨 물체가 돌아가 보인다

  • SVG 라인 드로잉

    SVG line drawing

    스크롤한 거리만큼 곡선이 그려져 나간다

  • 텍스트 필

    Text fill on scroll

    흐린 글줄에 차례로 색이 칠해진다

  • 배경색 전환

    Background color transition

    구역을 넘을 때마다 바탕색이 갈아입혀진다

  • 마키

    Marquee (scroll velocity)

    흐르는 글자 띠가 스크롤하는 동안 빨라진다

  • 스크롤 텍스트 리빌

    Scroll text reveal

    옅은 문단의 단어가 앞에서부터 진해진다

  • 스크롤 진행 바

    Scroll progress bar

    읽은 만큼 헤더 밑 막대와 퍼센트가 차오른다

고정 · 넘김

  • 스티키

    position: sticky

    올라가던 소제목이 화면 위 끝에 붙는다

  • 따라오는 헤더

    Sticky header

    내려도 머리줄이 맨 위에 붙어 얇아진 채 남는다

  • 스크롤리텔링

    Scrollytelling

    글 단계가 넘어갈 때마다 옆 그림이 바뀐다

  • 카드 스택

    Stacking cards

    다음 카드가 올라와 앞 카드를 덮어 쌓인다

  • 스크롤 스냅

    CSS scroll snap

    한 화면씩 넘어가 칸에 딱 맞춰 선다

  • 가로 스크롤

    Horizontal scroll

    세로로 내리는 동안 카드 줄이 옆으로 흐른다

내비 · 신호

  • 숨는 헤더

    Hide-on-scroll header

    내리면 머리줄이 숨고 올리면 돌아온다

  • 스크롤 스파이

    Scrollspy

    읽는 구역에 맞춰 목차 표시가 옮겨 간다

  • 스무스 스크롤

    Smooth scroll

    툭툭 끊기던 휠 스크롤이 미끄러지듯 이어진다

  • 무한 스크롤

    Infinite scroll

    목록 끝에 닿으면 로딩 뒤 새 항목이 이어 붙는다

  • 스크롤 다운 신호

    Scroll-down cue

    첫 화면 아래 휠과 화살표가 아래를 가리킨다

마우스 · 클릭 반응

호버

  • 호버 떠오르기

    Hover lift

    커서가 올라간 카드가 살짝 뜨고 그림자가 진다

  • 호버 이미지 줌

    Image zoom on hover

    틀은 그대로 두고 안의 사진만 천천히 커진다

  • 밑줄 애니메이션

    Underline animation

    올리면 밑줄이 왼쪽부터 그어지고 떠나면 오른쪽으로 빠진다

  • 3D 틸트

    3D tilt on hover

    카드가 포인터 쪽으로 입체적으로 기운다

  • 호버 이미지 전환

    Image swap on hover

    포인터를 올리면 사진이 다른 컷으로 바뀐다

  • 텍스트 롤

    Text roll on hover

    버튼 글자가 한 자씩 굴러 새 색으로 바뀐다

커서 · 클릭

  • 커서 팔로워

    Cursor follower

    점 커서를 고리 하나가 한 박자 늦게 쫓아온다

  • 마그네틱 버튼

    Magnetic button

    커서가 다가가면 버튼이 그쪽으로 끌려간다

  • 리플 효과

    Ripple effect

    누른 자리에서 밝은 원이 번지며 사라진다

로딩 · 페이지 · 배경

읽어 들임

  • 프리로더

    Preloader

    숫자와 막대가 다 차면 덮개가 걷히며 페이지가 나온다

  • 지연 로딩

    Lazy loading

    화면에 다가온 이미지부터 빈자리에서 선명해진다

페이지 이동

  • 뷰 트랜지션

    View transition (shared element)

    목록의 사진이 그대로 커져 상세 머리가 된다

계속 움직이는 배경

  • 마키

    Marquee

    두 줄의 띠가 서로 반대 방향으로 끝없이 흐른다

  • 셰이프 디바이더

    Animated shape divider

    구역 경계의 물결이 끊임없이 흘러간다

  • 배경 동영상

    Background video

    흐르는 영상 위에 제목과 버튼이 얹힌다

글자

등장

  • 타이핑 효과

    Typewriter effect

    커서가 깜빡이며 글이 한 자씩 쳐진다

  • 마스크 리빌

    Mask reveal

    가려진 틀 안에서 글줄이 한 줄씩 솟는다

  • 스플릿 텍스트

    Split text animation

    글자를 낱낱이 쪼개 차례로 등장시킨다

  • 블러 인

    Blur-in text

    흐린 글자가 하나씩 초점을 찾는다

  • 단어별 페이드 업

    Word-by-word fade up

    낱말 덩어리가 차례로 아래에서 떠오른다

  • 글자 낙하

    Letter drop

    글자가 하나씩 떨어져 바닥에서 튀어 선다

  • 3D 플립 인

    3D flip-in

    누워 있던 글자가 축을 따라 돌아 일어선다

  • 자간 펼치기

    Tracking in

    뭉친 흐린 글자 사이가 벌어지며 또렷해진다

  • 와이프 리빌

    Wipe reveal

    색 막이 덮었다 걷힌 자리에 글자가 남는다

  • 손글씨 그리기

    Handwriting draw

    필기체 획이 펜으로 쓰듯 이어 그려진다

  • 외곽선 → 채움

    Outline to fill

    테두리만 있던 글자 안이 아래부터 차오른다

  • 랜덤 등장

    Random letter fade

    글자가 뒤섞인 순서로 하나씩 켜진다

강조 · 반복

  • 웨이브 텍스트

    Wave text

    글자가 차례로 오르내려 물결이 지나간다

  • 그라데이션 텍스트

    Gradient text animation

    회색 글자 위로 색 띠가 옆으로 훑고 간다

  • 형광펜 효과

    Highlighter effect

    강조할 단어 뒤로 형광펜이 그어진다

  • 반짝임 훑기

    Text shimmer

    글자 위로 빛줄기가 비스듬히 한 번 지나간다

  • 글로우 맥동

    Glow pulse

    글자 둘레의 빛 번짐이 숨 쉬듯 커졌다 준다

  • 떨리는 글자

    Jitter text

    글자마다 제자리에서 잘게 엇박으로 떤다

  • 젤리 글자

    Jelly text

    눌려 납작해진 글자가 말랑하게 출렁인다

  • 고무줄 글자

    Rubber band text

    낱말이 옆으로 늘어났다가 튕기며 돌아온다

  • 취소선 긋기

    Strikethrough draw

    앞말 위에 줄이 그어지고 고친 말이 뜬다

  • 손그림 동그라미

    Hand-drawn circle

    강조할 말 둘레에 동그라미가 그려진다

  • 글자 색 물결

    Color wave

    제자리의 글자 위로 색만 차례로 번져 간다

바꿈 · 전환

  • 텍스트 스크램블

    Text scramble

    기호가 뒤섞이다 왼쪽부터 제 글자로 선다

  • 단어 돌려 바꾸기

    Rotating words

    문장 끝 낱말만 위로 밀려 다음 말이 된다

  • 타이핑 후 지우기

    Type and delete

    한 말을 쓰고 지운 뒤 다른 말을 쓴다

  • 글자 뒤집어 바꾸기

    Flip text swap

    글자가 반 바퀴 뒤집혀 뒷면의 새 말이 된다

  • 블러 크로스페이드

    Blur morph

    흐려지는 말 위로 다음 말이 또렷해진다

  • 글자 섞어 바꾸기

    Letter shuffle swap

    같은 글자들이 자리를 옮겨 새 낱말이 된다

  • 스플릿 플랩 글자

    Split-flap text

    글자판이 위아래로 넘어가며 새 말이 된다

  • 슬롯 롤링 글자

    Slot text roll

    칸마다 글자 띠가 돌다 차례로 멈춘다

  • 디코드

    Decode reveal

    기호에 가려진 문장이 앞부터 풀려 읽힌다

질감 · 글리치

  • RGB 분리 글리치

    RGB split glitch

    색 겹이 좌우로 잠깐 어긋났다 포개진다

  • 슬라이스 글리치

    Slice glitch

    제목이 가로 띠로 잘려 엇갈려 밀린다

  • VHS 노이즈 글자

    VHS text

    노이즈 띠가 지나는 자리의 글자가 밀린다

  • 네온 글자

    Neon sign text

    꺼진 관에 불이 몇 번 깜빡이다 켜진다

  • 픽셀 글자

    Pixelated text

    굵은 모자이크가 점점 고와져 글자가 된다

  • 입체 글자

    3D extrude text

    평평한 글자 뒤로 옆면이 밀려 나온다

  • 긴 그림자

    Long shadow text

    글자 그림자가 한쪽으로 길게 뻗었다 준다

  • 녹아내리는 글자

    Melting text

    글자 밑으로 물줄기가 늘어져 방울이 진다

배치 · 모양

  • 원형 회전 글자

    Circular text

    원 둘레에 놓인 글자가 천천히 돈다

  • 크롤

    Perspective crawl

    기울어진 바닥 위로 글줄이 멀어져 간다

  • 세로 티커

    Vertical ticker

    한 줄 띠 안에서 공지가 위로 넘어간다

  • 겹쳐 쌓인 글자

    Stacked echo

    속 빈 사본이 비스듬히 겹겹이 쌓인다

  • 글자 흩어짐

    Text explode

    글자가 돌며 사방으로 튀었다 다시 모인다

  • 글자 터널

    Text tunnel

    같은 글자 틀이 안쪽에서 끝없이 다가온다

  • 크게 꽉 채우기

    Fit-to-width headline

    줄마다 크기가 달라져 같은 폭을 채운다

  • 세로쓰기 흐름

    Vertical writing flow

    세로쓰기 줄이 오른쪽부터 한 자씩 써진다

  • 텍스트 온 패스

    Text on a path

    원을 따라 늘어선 글자가 둘레를 돈다

  • 텍스트 마스크

    Text mask

    글자 모양 구멍 안으로 줄무늬가 흐른다

반응 (호버 · 커서)

  • 호버 글자 들림

    Hover letter lift

    커서 바로 아래 글자 하나만 솟아오른다

  • 커서 근접 굵기

    Proximity weight

    커서에 가까운 글자일수록 굵어진다

  • 호버 스크램블

    Hover scramble

    커서를 올리면 글자가 섞였다 제자리로 맞춰진다

  • 호버 채움

    Hover fill

    커서를 올린 링크 글자가 옆으로 칠해진다

  • 자석 글자

    Magnetic letters

    가까운 글자일수록 커서 쪽으로 끌려간다

  • 클릭 튀는 글자

    Click burst text

    누른 자리에서 글자들이 튀었다 모인다

숫자

등장 · 기본

  • 금액 슬라이드인

    Currency slide-in

    금액의 자리가 하나씩 아래에서 솟아 선다

  • 오도미터

    Odometer

    자리마다 숫자 띠가 굴러 제 숫자에 선다

  • 슬롯머신

    Slot machine

    세 릴이 돌다 왼쪽부터 차례로 멈춘다

  • 통통 튀는 숫자

    Popping counter

    올라갈 때마다 숫자가 통 튀고 끝에서 터진다

  • 숫자 비 모이기

    Digit rain assemble

    흩날리던 작은 숫자들이 모여 큰 수가 된다

  • 거대 줌인

    Slam zoom-in

    커다란 수가 날아와 꽂히며 화면이 흔들린다

  • 플립 시계

    Flip clock

    판의 위 반쪽이 접혀 내려가며 시각이 바뀐다

세는 · 바뀌는

  • 카운트업

    Count-up

    0 에서 목표값까지 숫자가 빠르게 올라간다

  • 수위 퍼센트

    Liquid fill percentage

    원 안의 물결이 차오르는 만큼 % 가 오른다

  • 떨어지는 자리

    Dropping digits

    자리가 하나씩 떨어져 찌그러졌다 튀어 오른다

  • 카운트다운

    Countdown

    3 · 2 · 1 이 튀어나오고 둘레 고리가 준다

  • 스크램블 확정

    Scramble resolve

    마구 바뀌던 자리가 왼쪽부터 제 숫자로 굳는다

  • 7세그먼트 표시

    Seven-segment display

    막대 일곱 조각이 켜지고 꺼지며 값이 바뀐다

  • 주가 티커

    Stock ticker

    시세가 위로 밀려 바뀌고 행이 한 번 번쩍인다

  • 소수점 고속 카운트

    Decimal spin count

    정수부는 먼저 서고 소수부는 더 오래 돈다

차트 · 지표

  • 막대그래프 수치

    Bar chart values

    막대가 솟는 동안 위의 수치도 같이 오른다

  • 도넛 배분

    Donut breakdown

    고리가 항목별로 차례로 그려지며 % 가 오른다

  • 꺾은선 포인트

    Line chart points

    선이 지나는 점마다 수치가 톡 튀어나온다

  • 랭킹 교체

    Leaderboard reorder

    점수가 앞지르는 순간 행이 미끄러져 자리를 바꾼다

  • 게이지 미터

    Gauge meter

    바늘이 지나쳤다 흔들리며 값에 자리 잡는다

  • KPI 비교

    KPI comparison

    두 기간의 값이 차례로 차고 차이가 배지로 뜬다

  • 스파크라인 KPI

    Sparkline KPI

    증감률이 오르는 동안 옆의 작은 추이선이 그려진다

  • 합계 블록

    Stacking total

    더하는 값 블록이 쌓일 때마다 합계가 는다

쇼핑 · 게임

  • 할인 가격

    Discount price

    원가에 줄이 그어지고 새 가격이 튀어나온다

  • 카트 배지

    Cart badge

    담을 때마다 카트 배지 숫자가 퐁 튀며 는다

  • 환율 보드

    Split-flap board

    숫자판 날개가 착착 넘어가며 값이 바뀐다

  • 포인트 적립

    Points added

    + 포인트가 날아올라 합계에 더해진다

  • 스코어 콤보

    Score combo

    점수가 연달아 더해질 때마다 배율이 커진다

  • 재고 카운트

    Low-stock count

    남은 수가 줄다 얼마 안 남으면 강조되어 뛴다

  • 별점

    Star rating

    평점이 오르는 만큼 별이 왼쪽부터 찬다

  • 타이머 링

    Timer ring

    남은 초가 줄어드는 만큼 둘레 고리도 준다

게임 · 장식

  • 레벨업

    Level up

    경험치 막대가 다 차면 레벨 숫자가 오른다

  • 대미지 숫자

    Damage numbers

    맞을 때마다 숫자가 튀어 위로 날아가 사라진다

  • 최고 기록 갱신

    New high score

    점수가 기록을 넘는 순간 색이 바뀌고 배지가 뜬다

  • 룰렛

    Roulette

    숫자판이 돌다 느려지며 바늘 아래 칸에 선다

  • 주사위

    Dice roll

    주사위가 굴러 멈추면 나온 눈이 숫자로 뜬다

  • 튀는 자리

    Bouncing digits

    자리들이 차례로 튀어 올라 물결을 만든다

  • 네온 숫자

    Neon flicker number

    꺼진 관에 불이 깜빡이다 켜진 채 빛난다

  • 슬라이스 전환

    Slice swap

    숫자가 가로로 갈라져 어긋나는 사이 바뀐다

UI 응용

  • 슬라이더 연동

    Slider-linked value

    손잡이를 끄는 대로 위의 값이 따라 바뀐다

  • 좋아요 카운트

    Like counter

    하트를 누르면 튀고 숫자가 하나 밀려 오른다

  • 배터리 %

    Battery percentage

    배터리가 차오르는 만큼 퍼센트가 오른다

  • 달력 넘김

    Calendar flip

    날짜 장이 위로 넘어가며 다음 날이 나온다

키네틱 타이포그래피

글자 · Kinetic typography

낱말마다 다른 몸짓으로 들어와 문장을 만든다

칩을 고르면 프롬프트에 덧붙습니다 — 묶음마다 하나씩, 다시 누르면 빠집니다.

길이
세기
대상