프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 독 확대(Dock Magnification) 효과를 넣어 줘. 독(dock)이라고도 불러.
포인터가 가까워질수록 줄 안의 아이콘이 부드럽게 커지고, 가장 가까운 아이콘이 가장 크며 양옆 아이콘도 조금 커지게 해 줘. 포인터가 벗어나면 모두 원래 크기로 돌아오게 해 줘.
아이콘은 고정된 기준선에서 위쪽으로 커지게 하고, 터치와 키보드에서는 모든 아이콘을 원래 크기 그대로 쓸 수 있게 해 줘.비슷한 모션
A
마우스를 올려 보세요
Grow (그로우)
다른 이름 Scale Up, Zoom In on hover
포인터가 올라가 있으면 요소가 부드럽게 살짝 커집니다.
쓰는 곳
버튼, 링크, 썸네일
[적용할 곳]에 그로우(Grow) 호버 효과를 넣어 줘. 스케일 업(scale up)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 커지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
포인터를 움직여 보세요
Magnetic Button (마그네틱 버튼)
다른 이름 Magnetic target, Magnetic hover
포인터가 가까이 오면 요소가 그쪽으로 끌려가고, 멀어지면 제자리로 튕기듯 돌아옵니다.
쓰는 곳
CTA 버튼, 내비게이션 아이콘
[적용할 곳]에 마그네틱 버튼(Magnetic Button) 효과를 넣어 줘. 마그네틱 타깃(magnetic target), 마그네틱 호버(magnetic hover)라고도 불러.
포인터가 가까이 오면 버튼이 그쪽으로 조금 끌려가고 라벨은 조금 더 움직이게 해 줘. 포인터가 떠나면 살짝 튕기며 제자리로 돌아오게.
주변 레이아웃이 밀리지 않게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 끌림을 꺼 줘.마우스를 올려 보세요
Hover Zoom (호버 줌)
다른 이름 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
포인터를 올리면 이미지가 틀 안에서 커지고, 때로는 포인터를 따라 이동합니다.
쓰는 곳
제품 카드, 썸네일
[적용할 곳]에 호버 줌(Hover Zoom) 효과를 넣어 줘. 이미지 줌 온 호버(image zoom on hover), 줌 팬(zoom-pan)이라고도 불러.
포인터가 이미지 위에 있는 동안 틀 크기는 그대로 두고 이미지가 틀 안에서 느리고 부드럽게 커지고, 벗어나면 부드럽게 돌아오게 해 줘.
이미지는 틀에 맞춰 잘라 레이아웃 밖으로 넘치지 않게 하고, 키보드 포커스에도 같은 줌을 보여 줘.Hover의 다른 모션
A
마우스를 올려 보세요
Float (플로트)
다른 이름 Lift, Raise
마우스를 올리면 요소가 떠오르듯 몇 픽셀 위로 올라갑니다.
쓰는 곳
카드, 버튼
[적용할 곳]에 플로트(Float) 호버 효과를 넣어 줘. 리프트(lift), 레이즈(raise)라고도 불러.
포인터가 올라가 있는 동안 요소가 살짝 떠올라 있다가, 벗어나면 제자리로 내려오게 해 줘. 부드럽고 은은하게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.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)라고도 불러.
포인터가 올라가 있는 동안 요소 둘레에 부드러운 색 빛 번짐이 서서히 나타나고, 벗어나면 사라지게 해 줘. 은은하게, 움직임 없이.
빛 번짐이 레이아웃에 영향을 주지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.