Magnetic Button (마그네틱 버튼)

macOS Dock처럼 포인터가 가까워질수록 한 줄로 놓인 아이콘이 부드럽게 커집니다.

[적용할 곳]에 독 확대(Dock Magnification) 효과를 넣어 줘. 독(dock)이라고도 불러.
포인터가 가까워질수록 줄 안의 아이콘이 부드럽게 커지고, 가장 가까운 아이콘이 가장 크며 양옆 아이콘도 조금 커지게 해 줘. 포인터가 벗어나면 모두 원래 크기로 돌아오게 해 줘.
아이콘은 고정된 기준선에서 위쪽으로 커지게 하고, 터치와 키보드에서는 모든 아이콘을 원래 크기 그대로 쓸 수 있게 해 줘.

카드 위에서 포인터가 움직이면 그에 맞춰 카드가 살짝 이동하고 커집니다.

[적용할 곳]에 워블 카드(Wobble Card) 효과를 넣어 줘.
포인터가 카드 위에서 움직이면 카드는 포인터 쪽으로 살짝 움직이고, 안의 콘텐츠는 반대쪽으로 살짝 움직이며 조금 커지면서 부드럽게 따라가게 해 줘. 포인터가 벗어나면 모두 제자리로 돌아와야 해.
움직임은 작게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 꺼 줘.

작은 선들이 자석 주변의 철가루처럼 포인터 쪽을 향해 방향을 돌립니다.

[적용할 곳]에 자석 철가루(Magnetic Filings) 효과를 넣어 줘.
격자로 늘어선 짧은 선들이 자석 주변의 철가루처럼 각자 곧바로 포인터를 똑바로 가리키게 하고, 포인터가 없을 때는 모두 가운데를 향하게 해 줘.
클릭을 절대 막지 않는 장식용 배경으로 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 선을 멈춰 둬.

텍스트 캐럿이 옆에 있는 글자 크기에 맞춰 커지거나 작아집니다.

[적용할 곳]에 어댑티브 캐럿(Adaptive Caret) 효과를 넣어 줘. 어댑티브 캐럿 크기(adaptive caret size)라고도 불러.
텍스트 캐럿이 포인터에 가장 가까운 글자 앞으로 옮겨 가서 그 글자 높이에 맞게 빠르게 늘어나거나 줄어들게 해 줘. 부드럽고 경쾌하게 크기가 바뀌고, 튕김 없이.
텍스트 자체는 밀리지 않게 하고, 캐럿이 포인터를 따라가듯 키보드 이동도 똑같이 따라가게 해 줘.

원형 커서가 mix-blend-mode difference로 아래에 있는 색을 반전시킵니다.

[적용할 곳]에 블렌드 모드 커서(Blend-Mode Cursor)를 넣어 줘. 디퍼런스 커서(difference cursor), 반전 커서(inverting cursor)라고도 불러.
포인터를 속이 찬 원으로 바꿔 지연 없이 포인터 바로 아래에 두고, 지나가는 텍스트와 도형의 색을 반전시켜 줘.
블렌딩은 그 영역 안에만 가둬 페이지 나머지와 섞이지 않게 하고, 다크 모드에서도 또렷하게 반전되게 하고, 터치 기기에서는 일반 커서를 그대로 둬.