Jello (젤로)

요소가 가로로 늘어나고 세로로 눌리는 탄성 있는 동작을 몇 번 거친 뒤 원래대로 돌아옵니다.

[적용할 곳]에 러버 밴드(Rubber Band) 주목 효과를 넣어 줘. rubberband라고도 불러.
요소가 가로로 늘어나고 세로로 눌렸다가, 점점 작아지는 탄성 동작을 몇 번 거쳐 원래 크기로 자리 잡게 해 줘.
트리거되면 한 번만 재생하고, 늘어나는 동안 주변 레이아웃이 밀리지 않게 해 줘.

요소가 불안정한 물체처럼 기울어지며 좌우로 흔들립니다.

[적용할 곳]에 워블(Wobble) 주목 효과를 넣어 줘.
요소가 기울어지며 좌우로 흔들리게 해 줘. 처음엔 크게, 흔들릴 때마다 작아지다가 멈추게.
트리거되면 한 번만 재생하고, 옆 콘텐츠가 밀리지 않게 해 줘.

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

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

요소가 살짝 회전하며 좌우로 흔들려, 고개를 저어 아니라고 하는 느낌을 줍니다.

[적용할 곳]에 헤드 셰이크(Head Shake) 주목 효과를 넣어 줘. headshake, no shake라고도 불러.
요소가 고개를 젓듯 살짝 비틀면서 좌우로 빠르게 돌고, 한 번 돌 때마다 폭이 줄어들다가 멈추게 해 줘.
동작이 거절됐을 때처럼 트리거될 때마다 한 번씩 재생하고, 주변 레이아웃은 움직이지 않게 해 줘.

요소의 복사본이 레이더 파동처럼 커지며 사라지기를 반복합니다.

[적용할 곳]에 핑(Ping) 효과를 넣어 줘. 레이더 핑(radar ping), 펄스 링(pulse ring)이라고도 불러.
요소의 복사본이 바깥으로 커지며 사라지는 동작을 일정한 속도로 계속 반복하고, 요소 자체는 가만히 있게 해 줘.
링은 별도 레이어에 그려서 레이아웃이 절대 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반복을 멈춰 줘.

요소가 부드럽게 커졌다 작아지거나 흐려졌다 선명해지기를 반복합니다.

[적용할 곳]에 펄스(Pulse) 효과를 넣어 줘. 펄싱(pulsing)이라고도 불러.
요소가 느리고 일정한 리듬으로 부드럽게 부풀었다 돌아오게 해 줘. 은은하게, 튕기는 느낌 없이.
주변 레이아웃을 밀지 않고 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.