Shutter Fill (셔터 필)

마우스를 올리면 요소 안에서 사각형이 커지거나 줄어들며 배경이 바뀝니다.

[적용할 곳]에 렉탱글 필(Rectangle Fill) 호버 효과를 넣어 줘.
안쪽 사각형이 가운데로 줄어들면서 새 배경색이 네 변에서 좁혀 들어오고, 포인터가 벗어나면 다시 열리게 해 줘. 그동안 라벨 색도 읽히도록 바꾸고, 부드럽고 빠르게.
라벨은 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 색 배경이 한쪽 끝에서 요소를 가로질러 쓸고 지나갑니다.

[적용할 곳]에 배경 스윕(Background Sweep) 호버 효과를 넣어 줘. 백그라운드 필(background fill), 슬라이드 필(slide fill)이라고도 불러.
새 배경색이 왼쪽 끝에서 오른쪽 끝으로 튕김 없이 부드럽고 빠르게 쓸고 지나가고, 포인터가 벗어나면 같은 방식으로 물러나게 해 줘. 글자색은 잘 읽히도록 바뀌게 해 줘.
채움은 요소 모양 안쪽으로 잘라 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 색이 있는 원이 가운데에서 커지거나 가운데로 줄어들며 요소를 채웁니다.

[적용할 곳]에 레이디얼 필(Radial Fill) 호버 효과를 넣어 줘. 서클 익스팬드(circle expand)라고도 불러.
새 색의 원이 가운데에서 부드럽게 커져 요소를 가득 채우고, 포인터가 벗어나면 다시 가운데로 줄어들게 해 줘. 그동안 라벨 색도 읽히도록 바꿔 주고.
원은 요소 모양 안으로 잘라 넣고 라벨은 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

단색 패널이 화면을 쓸고 지나가며 이전 페이지를 덮은 뒤, 물러나면서 새 페이지를 드러냅니다.

[적용할 곳]에 커튼 / 패널 와이프(Curtain / Panel Wipe) 페이지 전환을 넣어 줘. 페이지 와이프(page wipe), 스태거드 패널(staggered panels)이라고도 불러.
단색 패널이 하나씩 차례로 쓸고 들어와 이전 페이지를 덮고, 완전히 덮인 동안 페이지를 바꾼 뒤, 패널이 계속 화면 밖으로 빠져나가며 새 페이지를 드러내게 해 줘. 과감하고 매끄럽게.
패널이 이전 페이지를 다 덮기 전에는 새 페이지를 절대 보여 주지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

포인터를 올리면 요소가 몇 픽셀 아래로 내려가 페이지 안으로 눌린 듯 보입니다.

[적용할 곳]에 싱크(Sink) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 살짝 내려가 그대로 머물러 페이지 안으로 눌린 듯 보이고, 벗어나면 다시 올라오게 해 줘. 부드럽게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 옮기고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터를 올리면 요소가 옆으로 비스듬히 기울어집니다.

[적용할 곳]에 스큐(Skew) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 옆으로 살짝 비스듬히 기울고, 벗어나면 다시 반듯해지게 해 줘. 빠르고 부드럽게.
기울어진 상태에서도 글자가 잘 읽히게 하고, 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터를 올리면 요소 한쪽에 말풍선 꼬리 모양의 작은 삼각형이 나타납니다.

[적용할 곳]에 말풍선(Speech Bubble) 호버 효과를 넣어 줘. 버블(bubble)이라고도 불러.
요소 한쪽 뒤에서 작은 삼각형 꼬리가 미끄러져 나와 말풍선 모양이 되고, 포인터가 벗어나면 다시 들어가게 해 줘. 빠르고 부드럽게.
꼬리는 요소와 같은 색으로 해서 하나의 모양으로 보이게 하고, 키보드 포커스에도 같은 효과를 보여 줘.