Round Corners (라운드 코너)

한 벡터 도형이 다른 도형으로 부드럽게 바뀝니다.

[적용할 곳]에 셰이프 모프(Shape Morph)를 넣어 줘. 패스 모핑(path morphing), SVG 모프(SVG morph)라고도 불러.
오각형이 오므라들며 별이 되는 것처럼 한 도형이 다른 도형으로 부드럽게 바뀌고, 각 점이 고르고 여유 있는 속도로 제자리로 미끄러지게 해 줘.
깜빡임 없이 깔끔하게 바뀌도록 두 도형의 점 개수와 대응을 맞추고, 반복하지 말고 상태가 바뀔 때마다 한 번씩 재생해 줘.

포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.

[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.

포인터가 올라가 있으면 요소가 부드럽게 살짝 작아집니다.

[적용할 곳]에 슈링크(Shrink) 호버 효과를 넣어 줘. 스케일 다운(scale down)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 작아지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터를 올리면 배경이 가운데나 가장자리에서 셔터처럼 열리거나 닫힙니다.

[적용할 곳]에 셔터 필(Shutter Fill) 호버 효과를 넣어 줘. 셔터(shutter)라고도 불러.
새 배경색이 가운데 세로선에서 양옆으로 셔터처럼 열리고, 포인터가 벗어나면 다시 가운데로 닫히게 해 줘. 그동안 글자색은 읽기 좋게 바뀌어야 해. 부드럽고 빠르게.
채우기는 요소 안쪽에서만 보이게 잘라 주고 글자는 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.