프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 언더라인 리빌(Underline Reveal) 호버 효과를 넣어 줘. 오버라인 리빌(overline reveal), 리빌(reveal)이라고도 불러.
포인터가 요소 위에 있는 동안 전체 너비의 선이 아래 가장자리 바로 밑에서 위로 미끄러져 제자리에 오고, 벗어나면 다시 아래로 미끄러져 사라지게 해 줘. 빠르고 부드럽게.
선을 가장자리에서 잘라 서서히 나타나거나 늘어나는 대신 미끄러져 나오게 하고, 키보드 포커스에도 같은 효과를 보여 줘.비슷한 모션
ABC DEF
마우스를 올려 보세요
Underline Draw (언더라인 드로우)
다른 이름 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
호버하면 링크 아래에 한쪽 끝이나 가운데에서 밑줄이 자라납니다.
쓰는 곳
내비게이션 링크, 본문 링크
[적용할 곳]에 언더라인 드로우(Underline Draw) 호버 효과를 넣어 줘. 애니메이션 밑줄(animated underline), 호버 밑줄 애니메이션(hover underline animation)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABC
마우스를 올려 보세요
마우스를 올리면 텍스트 위에 선이 왼쪽·가운데·오른쪽에서 뻗어 나옵니다.
쓰는 곳
내비게이션 링크, 탭
[적용할 곳]에 오버라인 그로우(Overline Grow) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 텍스트 위의 선이 가운데에서 양옆으로 뻗어 나가고, 벗어나면 다시 가운데로 줄어들게 해 줘. 빠르고 부드럽게.
텍스트가 밀리지 않게 선 자리를 미리 확보하고, 키보드 포커스에도 같은 효과를 보여 줘.ABC DEFG HIJ KL
Text Highlighter (텍스트 하이라이터)
다른 이름 Highlight Marker, Marker Underline, Hero Highlight
형광펜 같은 색 띠가 문구 위로 그어지며 강조해 줍니다.
쓰는 곳
핵심 문구 강조
[적용할 곳]에 텍스트 하이라이터(Text Highlighter) 효과를 넣어 줘. 하이라이트 마커(highlight marker), 마커 밑줄(marker underline)이라고도 불러.
형광펜 같은 색 띠가 핵심 문구 뒤를 왼쪽에서 오른쪽으로 부드럽게 지나가서, 누군가 펜으로 칠하는 것처럼 보이게 해 줘.
문구가 스크롤로 화면에 들어올 때 한 번만 재생하고, 띠 위에서도 글자가 잘 읽히게 하고, 문구가 두 줄로 줄바꿈되어도 띠가 제대로 따라가게 해 줘.ABC
클릭해 보세요
Tab Indicator Slide (탭 인디케이터 슬라이드)
다른 이름 Sliding underline, Active tab indicator, Segmented control pill
밑줄이나 알약 모양 배경이 이전 탭에서 새로 선택한 탭으로 미끄러지듯 이동합니다.
쓰는 곳
탭 바, 세그먼트 컨트롤
[적용할 곳]에 탭 인디케이터 슬라이드(Tab Indicator Slide)를 넣어 줘. 슬라이딩 언더라인(sliding underline), 액티브 탭 인디케이터(active tab indicator)라고도 불러.
새 탭을 선택하면 밑줄이 이전 탭에서 새 탭으로 빠르게, 부드럽게 감속하며 미끄러지고, 탭 너비가 다르면 새 탭 너비에 맞게 늘어나게 해 줘.
화살표 키로 이동할 수 있는 올바른 탭 시맨틱을 지키고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 미끄러지지 않고 바로 옮겨지게 해 줘.Hover의 다른 모션
A
포인터를 움직여 보세요
카드 위에서 포인터가 움직이면 그에 맞춰 카드가 살짝 이동하고 커집니다.
쓰는 곳
프로모션 카드
[적용할 곳]에 워블 카드(Wobble Card) 효과를 넣어 줘.
포인터가 카드 위에서 움직이면 카드는 포인터 쪽으로 살짝 움직이고, 안의 콘텐츠는 반대쪽으로 살짝 움직이며 조금 커지면서 부드럽게 따라가게 해 줘. 포인터가 벗어나면 모두 제자리로 돌아와야 해.
움직임은 작게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 꺼 줘.A
마우스를 올려 보세요
색 배경이 한쪽 끝에서 쓸려 들어오며 탄력 있게 살짝 넘쳤다가 자리 잡습니다.
쓰는 곳
버튼
[적용할 곳]에 배경 바운스 스윕(Background Bounce Sweep) 호버 효과를 넣어 줘.
새 배경색이 한쪽 끝에서 쓸려 들어와 반대쪽 끝을 탄력 있게 살짝 넘었다가 자리 잡고, 글자색은 잘 읽히도록 바뀌게 해 줘. 포인터가 벗어나면 부드럽게 다시 빠져나가게 해 줘.
글자는 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
Background Fade (배경 페이드)
다른 이름 Color Fade
마우스를 올리면 배경색과 글자색이 새 색으로 부드럽게 바뀝니다.
쓰는 곳
버튼, 내비게이션 항목
[적용할 곳]에 배경 페이드(Background Fade) 호버 효과를 넣어 줘. 컬러 페이드(color fade)라고도 불러.
포인터가 요소 위에 있는 동안 배경색과 글자색이 새 색으로 부드럽게 바뀌고, 벗어나면 원래대로 돌아오게 해 줘. 차분하게, 움직임 없이.
두 상태 모두 글자와 배경의 대비를 충분히 유지하고, 키보드 포커스에도 같은 효과를 보여 줘.