프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 플로트(Float) 호버 효과를 넣어 줘. 리프트(lift), 레이즈(raise)라고도 불러.
포인터가 올라가 있는 동안 요소가 살짝 떠올라 있다가, 벗어나면 제자리로 내려오게 해 줘. 부드럽고 은은하게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.비슷한 모션
A
마우스를 올려 보세요
Bob (밥)
다른 이름 Hang
마우스를 올려 둔 동안 요소가 떠오른 뒤 위아래로 계속 둥실거립니다.
쓰는 곳
아이콘, 버튼
[적용할 곳]에 밥(Bob) 호버 효과를 넣어 줘. 행(hang)이라고도 불러.
요소가 살짝 떠오른 뒤, 포인터가 올라가 있는 동안 위아래로 부드럽게 계속 둥실거리고, 벗어나면 제자리로 내려오게 해 줘. 느리고 부드럽게.
둥실거림은 호버 중에만 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.A
마우스를 올려 보세요
Hover Shadow (호버 섀도)
다른 이름 Drop Shadow on hover, Elevation on hover
마우스를 올리면 요소 아래에 부드러운 그림자가 생기거나 짙어져 떠오른 느낌을 줍니다.
쓰는 곳
카드, 버튼
[적용할 곳]에 호버 섀도(Hover Shadow) 효과를 넣어 줘. 드롭 섀도 온 호버(drop shadow on hover), 엘리베이션 온 호버(elevation on hover)라고도 불러.
포인터가 올라가 있는 동안 요소 아래의 부드러운 그림자가 짙어지고 퍼져서 떠 보이게 하고, 벗어나면 다시 옅어지게 해 줘. 요소 자체는 제자리에 두고.
라이트·다크 테마 모두에서 어울리도록 그림자는 은은하게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
포인터를 올리면 요소가 몇 픽셀 아래로 내려가 페이지 안으로 눌린 듯 보입니다.
쓰는 곳
버튼
[적용할 곳]에 싱크(Sink) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 살짝 내려가 그대로 머물러 페이지 안으로 눌린 듯 보이고, 벗어나면 다시 올라오게 해 줘. 부드럽게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 옮기고, 키보드 포커스에도 같은 효과를 보여 줘.마우스를 올려 보세요
Nudge Forward / Backward (넛지 포워드 / 백워드)
다른 이름 Arrow nudge
마우스를 올리면 화살표나 요소 자체가 몇 픽셀 앞이나 뒤로 밀립니다.
쓰는 곳
다음/이전 링크, 화살표
[적용할 곳]에 넛지 포워드 / 백워드(Nudge Forward / Backward) 호버 효과를 넣어 줘. 애로 넛지(arrow nudge)라고도 불러.
포인터가 올라가 있는 동안 화살표가 가리키는 방향으로 살짝 밀리고, 벗어나면 돌아오게 해 줘. 빠르고 작게.
라벨이나 레이아웃은 밀지 말고 화살표만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.Hover의 다른 모션
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
마우스를 올려 보세요
Glow (글로우)
다른 이름 Neon glow
마우스를 올리면 요소 둘레에 색 빛 번짐이 나타납니다.
쓰는 곳
버튼, 카드, 아이콘
[적용할 곳]에 글로우(Glow) 호버 효과를 넣어 줘. 네온 글로우(neon glow)라고도 불러.
포인터가 올라가 있는 동안 요소 둘레에 부드러운 색 빛 번짐이 서서히 나타나고, 벗어나면 사라지게 해 줘. 은은하게, 움직임 없이.
빛 번짐이 레이아웃에 영향을 주지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
Grow (그로우)
다른 이름 Scale Up, Zoom In on hover
포인터가 올라가 있으면 요소가 부드럽게 살짝 커집니다.
쓰는 곳
버튼, 링크, 썸네일
[적용할 곳]에 그로우(Grow) 호버 효과를 넣어 줘. 스케일 업(scale up)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 커지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.