Hover

모션 42개[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.

색 배경이 한쪽 끝에서 쓸려 들어오며 탄력 있게 살짝 넘쳤다가 자리 잡습니다.

버튼

Background Fade (배경 페이드)

다른 이름 Color Fade

마우스를 올리면 배경색과 글자색이 새 색으로 부드럽게 바뀝니다.

버튼, 내비게이션 항목

Background Sweep (배경 스윕)

다른 이름 Background Fill, Slide Fill

마우스를 올리면 색 배경이 한쪽 끝에서 요소를 가로질러 쓸고 지나갑니다.

버튼, 메뉴 링크

Bob (밥)

다른 이름 Hang

마우스를 올려 둔 동안 요소가 떠오른 뒤 위아래로 계속 둥실거립니다.

아이콘, 버튼

마우스를 올리면 테두리 색이 서서히 나타나거나 바뀝니다.

버튼, 입력창

마우스를 올리면 동심원 테두리 고리가 요소에서 바깥으로 퍼지거나 안쪽으로 모입니다.

버튼

Bounce Scale (바운스 스케일)

다른 이름 Bounce In / Out

호버가 시작되거나 끝날 때 요소가 탄력 있게 살짝 넘치며 커지거나 작아집니다.

버튼, 배지

Card Hover Effect (카드 호버 효과)

다른 이름 Sliding highlight card grid

강조 배경이 그리드 안의 카드 사이를 미끄러지듯 옮겨 다니며 마우스를 올린 카드를 따라갑니다.

카드 그리드, 기능 목록

Card Spotlight (카드 스포트라이트)

다른 이름 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover

부드러운 원형 빛이 포인터를 따라 카드 표면을 움직이며 아래 배경을 드러냅니다.

기능 소개 카드, 벤토 그리드

Curl (컬)

다른 이름 Page curl

마우스를 올리면 요소의 한 모서리가 책장을 넘기듯 말려 올라갑니다.

카드, 메모

Direction Aware Hover (디렉션 어웨어 호버)

다른 이름 Direction-aware overlay

포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 빠져나갑니다.

이미지 갤러리, 포트폴리오 그리드

macOS Dock처럼 포인터가 가까워질수록 한 줄로 놓인 아이콘이 부드럽게 커집니다.

아이콘 툴바, 내비게이션

Float (플로트)

다른 이름 Lift, Raise

마우스를 올리면 요소가 떠오르듯 몇 픽셀 위로 올라갑니다.

카드, 버튼

Focus Cards (포커스 카드)

다른 이름 Blur siblings on hover, Hover focus blur, Card hover effect

마우스를 올린 카드만 선명하게 남고 나머지 카드는 흐려지고 어두워집니다.

카드 그리드, 갤러리

Glow (글로우)

다른 이름 Neon glow

마우스를 올리면 요소 둘레에 색 빛 번짐이 나타납니다.

버튼, 카드, 아이콘

Grow (그로우)

다른 이름 Scale Up, Zoom In on hover

포인터가 올라가 있으면 요소가 부드럽게 살짝 커집니다.

버튼, 링크, 썸네일

Hollow (할로우)

다른 이름 Ghost fill

마우스를 올리면 채워진 배경이 비워지고 테두리만 남은 버튼이 됩니다.

버튼

그라디언트 테두리가 요소 둘레를 따라 움직이고, 포인터를 올리면 퍼져 나갑니다.

버튼, 카드

Hover Shadow (호버 섀도)

다른 이름 Drop Shadow on hover, Elevation on hover

마우스를 올리면 요소 아래에 부드러운 그림자가 생기거나 짙어져 떠오른 느낌을 줍니다.

카드, 버튼

Hover State Layer (호버 스테이트 레이어)

다른 이름 Hover State, State layer, Hover overlay

반투명 오버레이가 요소에 색을 덧입혀 포인터가 올라가 있음을 보여 줍니다.

디자인 시스템 컴포넌트

마우스를 올리면 아이콘이 아래로 떨어져 사라졌다가 위에서 다시 내려옵니다.

아이콘 버튼

아이콘이 버튼 밖으로 떠올라 사라지고, 새 아이콘이 둥실 떠오르며 들어옵니다.

아이콘 버튼

버튼에 마우스를 올리면 안의 아이콘이 한 바퀴 돕니다.

아이콘 버튼

마우스를 올리면 버튼 라벨이 밀려 나가고 화살표와 채움 색이 펼쳐지며 들어옵니다.

CTA 버튼

마우스를 올리면 화살표나 요소 자체가 몇 픽셀 앞이나 뒤로 밀립니다.

다음/이전 링크, 화살표

마우스를 올리면 외곽선이 요소에서 바깥으로 퍼지거나 요소 쪽으로 좁혀집니다.

버튼

마우스를 올리면 텍스트 위에 선이 왼쪽·가운데·오른쪽에서 뻗어 나옵니다.

내비게이션 링크, 탭

요소가 빠르게 커졌다가 톡 튕기듯 제자리로 돌아옵니다.

아이콘, 버튼

요소가 안쪽으로 눌렸다가 돌아와, 실제 버튼을 누른 것 같은 느낌을 줍니다.

버튼

Radial Fill (레이디얼 필)

다른 이름 Circle expand

마우스를 올리면 색이 있는 원이 가운데에서 커지거나 가운데로 줄어들며 요소를 채웁니다.

버튼

마우스를 올리면 요소 안에서 사각형이 커지거나 줄어들며 배경이 바뀝니다.

버튼

마우스를 올리면 요소가 몇 도 정도 회전합니다.

아이콘, 썸네일

포인터를 올리면 요소의 모서리가 부드럽게 둥글어집니다.

버튼, 이미지

Shine Sweep (샤인 스윕)

다른 이름 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button

포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.

버튼, 카드, 배지

Shrink (슈링크)

다른 이름 Scale Down

포인터가 올라가 있으면 요소가 부드럽게 살짝 작아집니다.

버튼, 타일

Shutter Fill (셔터 필)

다른 이름 Shutter

포인터를 올리면 배경이 가운데나 가장자리에서 셔터처럼 열리거나 닫힙니다.

버튼, 카드

포인터를 올리면 요소가 몇 픽셀 아래로 내려가 페이지 안으로 눌린 듯 보입니다.

버튼

포인터를 올리면 요소가 옆으로 비스듬히 기울어집니다.

버튼, 태그

Speech Bubble (말풍선)

다른 이름 Bubble

포인터를 올리면 요소 한쪽에 말풍선 꼬리 모양의 작은 삼각형이 나타납니다.

탭, 툴팁

포인터를 올리면 요소 가장자리 안쪽에 안쪽 테두리 선이 나타납니다.

버튼, 카드

Underline Reveal (언더라인 리빌)

다른 이름 Overline Reveal, Reveal

선이 아래나 위 가장자리에서 미끄러져 들어와 요소에 밑줄이나 윗줄을 긋습니다.

내비게이션 링크, 버튼

카드 위에서 포인터가 움직이면 그에 맞춰 카드가 살짝 이동하고 커집니다.

프로모션 카드

[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.