Icon Spin (아이콘 스핀)

요소가 일정한 속도로 계속 회전합니다.

[적용할 곳]에 스핀(Spin) 효과를 넣어 줘. 스피너(spinner), 로테이트 루프(rotate loop)라고도 불러.
요소가 일정하고 고른 속도로 계속 돌게 하고, 회전 사이에 이징은 넣지 마.
루프는 끊김 없이 이어지게 하고, 스피너에 접근성 있는 로딩 레이블을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.

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

[적용할 곳]에 로테이트(Rotate) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 시계 방향으로 살짝 돌고, 벗어나면 돌아오게 해 줘. 부드럽고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

[적용할 곳]에 아이콘 드롭(Icon Drop) 호버 효과를 넣어 줘.
요소 안의 아이콘이 아래로 떨어져 사라졌다가 위에서 제자리로 다시 떨어지게 해 줘. 빠르게, 착지는 부드럽게.
반복하지 말고 포인터가 들어올 때마다 한 번만 재생하고, 라벨과 버튼 크기는 그대로 둬 줘.

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

[적용할 곳]에 인터랙티브 호버 버튼(Interactive Hover Button) 효과를 넣어 줘.
라벨 옆의 작은 점이 커지면서 버튼을 가득 채우는 동안 라벨은 옆으로 밀려나며 사라지고, 화살표가 붙은 라벨이 새 채움 색 위로 밀려 들어오게 해 줘. 부드럽고 빠르게.
버튼 크기는 고정하고 라벨은 내내 읽히게 두고, 키보드 포커스에도 같은 효과를 보여 줘.

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

[적용할 곳]에 넛지 포워드 / 백워드(Nudge Forward / Backward) 호버 효과를 넣어 줘. 애로 넛지(arrow nudge)라고도 불러.
포인터가 올라가 있는 동안 화살표가 가리키는 방향으로 살짝 밀리고, 벗어나면 돌아오게 해 줘. 빠르고 작게.
라벨이나 레이아웃은 밀지 말고 화살표만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.

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

[적용할 곳]에 아웃라인 익스팬드(Outline Expand) 호버 효과를 넣어 줘.
외곽선이 요소 가장자리에 딱 붙은 채로 시작해 바깥으로 벌어지며 둘레에 작은 틈을 만들고, 호버 중에는 그대로 있다가 포인터가 벗어나면 다시 좁혀지게 해 줘. 부드럽고 빠르게.
요소 크기를 바꾸거나 주변 콘텐츠를 밀지 않는 방식으로 외곽선을 그리고, 키보드 포커스에도 같은 효과를 보여 줘.