프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 카드 호버 효과(Card Hover Effect)를 넣어 줘. 슬라이딩 하이라이트 카드 그리드(sliding highlight card grid)라고도 불러.
마우스를 올린 카드 뒤에 부드러운 강조 배경이 나타나고, 포인터가 다른 카드로 옮겨 가면 그쪽으로 매끄럽게 미끄러져 가며, 포인터가 그리드를 벗어나면 서서히 사라지게 해 줘.
키보드 포커스로도 강조 배경이 똑같이 움직이게 하고, 카드 자체는 밀리지 않게 해 줘.비슷한 모션
ABC
클릭해 보세요
Tab Indicator Slide (탭 인디케이터 슬라이드)
다른 이름 Sliding underline, Active tab indicator, Segmented control pill
밑줄이나 알약 모양 배경이 이전 탭에서 새로 선택한 탭으로 미끄러지듯 이동합니다.
쓰는 곳
탭 바, 세그먼트 컨트롤
[적용할 곳]에 탭 인디케이터 슬라이드(Tab Indicator Slide)를 넣어 줘. 슬라이딩 언더라인(sliding underline), 액티브 탭 인디케이터(active tab indicator)라고도 불러.
새 탭을 선택하면 밑줄이 이전 탭에서 새 탭으로 빠르게, 부드럽게 감속하며 미끄러지고, 탭 너비가 다르면 새 탭 너비에 맞게 늘어나게 해 줘.
화살표 키로 이동할 수 있는 올바른 탭 시맨틱을 지키고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 미끄러지지 않고 바로 옮겨지게 해 줘.ACB
클릭해 보세요
Shared Layout Animation (셰어드 레이아웃 애니메이션)
다른 이름 layoutId, Shared element (in-page)
요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.
쓰는 곳
선택 하이라이트, 썸네일에서 확대 보기로
[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.ABC
포인터를 움직여 보세요
Focus Cards (포커스 카드)
다른 이름 Blur siblings on hover, Hover focus blur, Card hover effect
마우스를 올린 카드만 선명하게 남고 나머지 카드는 흐려지고 어두워집니다.
쓰는 곳
카드 그리드, 갤러리
[적용할 곳]에 포커스 카드(Focus Cards) 효과를 넣어 줘. 블러 시블링스 온 호버(blur siblings on hover), 호버 포커스 블러(hover focus blur), 카드 호버 효과(card hover effect)라고도 불러.
포인터가 한 카드 위에 있는 동안 그 카드는 선명하게 두고 나머지 카드는 흐려지고 어두워지며 살짝 작아지게 해 줘. 모두 부드럽게 전환되고, 포인터가 벗어나면 되돌아가게 해 줘.
키보드 포커스에도 같은 강조를 적용하고, 아무 카드도 호버하지 않을 때는 모든 카드를 선명하고 잘 읽히게 둬 줘.A
포인터를 움직여 보세요
Card Spotlight (카드 스포트라이트)
다른 이름 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
부드러운 원형 빛이 포인터를 따라 카드 표면을 움직이며 아래 배경을 드러냅니다.
쓰는 곳
기능 소개 카드, 벤토 그리드
[적용할 곳]에 카드 스포트라이트(Card Spotlight) 효과를 넣어 줘. 스포트라이트 호버(spotlight hover), 포인터 글로우(pointer glow), 마우스 추적 글로우(mouse-following glow), 방사형 그라디언트 호버(radial gradient hover)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.Hover의 다른 모션
A
마우스를 올려 보세요
Curl (컬)
다른 이름 Page curl
마우스를 올리면 요소의 한 모서리가 책장을 넘기듯 말려 올라갑니다.
쓰는 곳
카드, 메모
[적용할 곳]에 컬(Curl) 호버 효과를 넣어 줘. 페이지 컬(page curl)이라고도 불러.
요소의 한 모서리가 책장을 넘기듯 부드럽게 말려 올라가 접힌 뒷면이 보이고, 포인터가 벗어나면 다시 평평해지게 해 줘.
중요한 내용을 가리지 않게 접힌 부분은 작게 두고, 키보드 포커스에도 같은 효과를 보여 줘.A
B
포인터를 움직여 보세요
Direction Aware Hover (디렉션 어웨어 호버)
다른 이름 Direction-aware overlay
포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 빠져나갑니다.
쓰는 곳
이미지 갤러리, 포트폴리오 그리드
[적용할 곳]에 디렉션 어웨어 호버(Direction Aware Hover) 효과를 넣어 줘. 방향 인식 오버레이(direction-aware overlay)라고도 불러.
포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 미끄러져 나가게 해 줘. 빠르고 부드럽게.
들어올 때와 나갈 때의 포인터 위치로 방향을 판단하고, 터치나 키보드 포커스에서는 정해 둔 한 방향을 써 줘.