웹 모션을 보고, 프롬프트를 바로 복사하세요.

요소가 작게 줄어든 채 비켜난 위치에서 시작해, 미끄러져 들어오며 원래 크기로 커집니다.

[적용할 곳]에 백 인(Back In) 등장 애니메이션을 넣어 줘. 백 인 업(back in up), 백 인 다운(back in down)이라고도 불러.
요소가 작게 줄어들고 살짝 흐린 채로 가장자리 바깥에서 들어오고, 제자리에 도착한 뒤에 원래 크기로 커지게 해 줘. 톡 튀어나오는 게 아니라 의도적인 두 단계 움직임으로.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 줄어들면서 가장자리 쪽으로 미끄러져 나가며 사라집니다.

[적용할 곳]에 백 아웃(Back Out) 퇴장 애니메이션을 넣어 줘.
요소가 먼저 제자리에서 살짝 줄어든 다음, 가장자리 쪽으로 미끄러져 나가면서 사라지게 해 줘. 한 번에 빠르게 사라지는 게 아니라 의도적인 두 단계 퇴장으로.
움직이는 도중에 레이아웃이 튀지 않게 애니메이션이 끝난 뒤에 요소를 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 없애 줘.

요소가 크게 흐려진 상태에서 점점 또렷해지며, 보통 미끄러지거나 서서히 나타나는 움직임과 함께합니다.

[적용할 곳]에 블러 인(Blur In) 등장 애니메이션을 넣어 줘. 텍스트 포커스 인(text focus in), 포커스 인(focus in), 블러 텍스트 리빌(blur text reveal)이라고도 불러.
내용이 크게 흐리고 투명한 상태에서 시작해 제자리에서 점점 또렷해지게 해 줘. 부드럽고 약간 느리게, 위치는 움직이지 않게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 처음부터 또렷하게 보여 줘.

요소가 사라지거나 미끄러져 나가면서 점점 흐려집니다.

[적용할 곳]에 블러 아웃(Blur Out) 퇴장 애니메이션을 넣어 줘. 텍스트 블러 아웃(text blur out), 스모키 텍스트 디시페이트(smoky text dissipate)라고도 불러.
내용이 제자리에서 점점 더 흐려지면서 사라지게 해 줘. 녹아 없어지듯 부드럽고 약간 느리게.
흐려짐이 끝난 뒤에 요소를 숨기거나 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 목표를 살짝 지나쳤다가 자리 잡는 통통 튀는 움직임으로 등장합니다. 커지면서 나타나거나 가장자리에서 떨어져 들어옵니다.

[적용할 곳]에 바운스 인(Bounce In) 등장 애니메이션을 넣어 줘. 바운스 인 다운(bounce in down), 바운스 인 업(bounce in up)이라고도 불러.
요소가 작은 상태에서 커지다가 원래 크기를 살짝 넘고, 몇 번 출렁인 뒤 자리 잡게 해 줘. 빠르고 탄력 있게.
계속 시선을 끌지 않게 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 살짝 튀었다가 줄어들거나 가장자리 밖으로 날아갑니다.

[적용할 곳]에 바운스 아웃(Bounce Out) 퇴장 애니메이션을 넣어 줘.
요소가 살짝 가라앉았다가 원래 크기보다 조금 부풀고, 그다음 줄어들면서 사라지게 해 줘. 짧고 탄력 있게.
애니메이션이 끝난 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

clip-path나 마스크가 가장자리나 한 점에서 넓어지며 이미지나 텍스트를 차츰 드러냅니다.

[적용할 곳]에 클립 리빌(Clip Reveal) 등장 효과를 넣어 줘. 마스크 리빌(mask reveal), 와이프 리빌(wipe reveal), 이미지 리빌(image reveal)이라고도 불러.
잘라 내는 경계선이 왼쪽에서 오른쪽으로 쓸고 지나가며, 내용은 가만히 있는 채로 차츰 드러나게 해 줘. 매끄럽게, 시작과 끝은 부드럽게.
아무것도 밀리지 않게 처음부터 요소 자리를 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전부 드러난 상태로 보여 줘.

요소가 제자리에서 완전히 투명한 상태에서 완전히 불투명하게 바뀌고, 사라질 때는 반대로 바뀝니다.

[적용할 곳]에 페이드 인 / 페이드 아웃(Fade In / Fade Out) 애니메이션을 넣어 줘. 페이드(fade)라고도 불러.
나타날 때는 요소가 제자리에서 완전히 투명한 상태에서 또렷하게 보이는 상태로 바뀌고, 사라질 때는 같은 방식으로 흐려지게 해 줘. 은은하게, 이동이나 크기 변화 없이.
사라진 뒤에는 클릭도 키보드 접근도 안 되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.

요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으며 서서히 나타납니다.

[적용할 곳]에 방향 페이드 인(Fade In Directional) 등장 애니메이션을 넣어 줘. 페이드 인 레프트(fade in left), 페이드 인 라이트(fade in right), 페이드 인 다운(fade in down)이라고도 불러.
요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으면서 서서히 나타나게 해 줘. 빠르고 매끄럽게, 도착할 때 감속하고 튕김 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 한쪽 방향으로 흘러가며 사라집니다.

[적용할 곳]에 방향 페이드 아웃(Fade Out Directional) 퇴장 애니메이션을 넣어 줘. 페이드 아웃 업(fade out up), 페이드 아웃 다운(fade out down)이라고도 불러.
요소가 한쪽 방향으로 짧게 이동하면서 사라지게 해 줘. 빠르게, 나갈수록 가속하게.
주변 내용이 미리 당겨지지 않게 페이드가 끝난 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 살짝 떠오르며 서서히 나타나, 제자리에 자리 잡는 느낌을 줍니다.

[적용할 곳]에 페이드 업(Fade Up) 등장 애니메이션을 넣어 줘. 페이드 인 업(fade-in-up), 스크롤 리빌(reveal on scroll)이라고도 불러.
요소가 처음 화면에 들어올 때 살짝 떠오르면서 서서히 나타나게 해 줘. 은은하고 빠르게, 튕기는 느낌 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.

요소가 고장 난 네온사인처럼 빠르게 깜빡이다가 켜진 상태로 남습니다.

[적용할 곳]에 플리커 인(Flicker In) 등장 애니메이션을 넣어 줘.
고장 난 네온사인처럼 요소가 불규칙한 간격으로 몇 번 켜졌다 꺼졌다 한 뒤 켜진 채로 남게 해 줘. 딱딱 끊기는 깜빡임으로, 위치는 움직이지 않게.
한 번만 재생하고, 깜빡이는 빛에 민감한 사람도 안전하도록 깜빡임은 적고 너무 빠르지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 켜진 상태로 보여 줘.

요소가 Y축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가왔다가 돌아갑니다.

[적용할 곳]에 플립(Flip) 애니메이션을 넣어 줘.
요소가 세로축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가오고, 크기가 아주 살짝 줄었다가 제자리로 돌아오게 해 줘. 생기 있지만 짧게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 반복하지 말고 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 생략해 줘.

요소가 가로축이나 세로축을 중심으로 3D 회전해, 옆면만 보이던 상태에서 정면을 향하게 됩니다.

[적용할 곳]에 플립 인(Flip In) 등장 애니메이션을 넣어 줘. 플립 인 X(flip in X), 플립 인 Y(flip in Y)라고도 불러.
요소가 옆면만 보이는 상태에서 시작해 가로축을 중심으로 돌아 정면을 향하고, 살짝 지나쳤다가 돌아와 자리 잡게 해 줘. 빠르게, 작은 흔들림과 함께.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 정면 상태로 보여 줘.

요소가 3D로 회전해 옆면만 남으며 보이지 않게 됩니다.

[적용할 곳]에 플립 아웃(Flip Out) 퇴장 애니메이션을 넣어 줘. 플립 아웃 X(flip out X), 플립 아웃 Y(flip out Y)라고도 불러.
요소가 살짝 뒤로 기울었다가 세로축을 중심으로 돌아 옆면만 남으며 사라지게 해 줘. 빠르고 깔끔하게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 회전이 끝난 뒤에 요소를 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 왼쪽 위 모서리를 경첩 삼아 흔들리며 매달렸다가 화면 밖으로 떨어집니다.

[적용할 곳]에 힌지(Hinge) 퇴장 애니메이션을 넣어 줘.
나사가 풀린 것처럼 요소가 왼쪽 위 모서리를 축으로 아래로 늘어지고, 앞뒤로 흔들리다가 사라지면서 화면 밖으로 떨어지게 해 줘. 느리고 코믹하게, 의도적으로.
레이아웃을 밀거나 스크롤바를 만들지 않고 다른 내용 위로 떨어지게 하고, 다 떨어지면 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 작고 기울어진 상태에서 튀어나와 살짝 지나쳤다가, 깜짝 상자 장난감처럼 자리 잡습니다.

[적용할 곳]에 잭 인 더 박스(Jack In The Box) 등장 애니메이션을 넣어 줘.
요소가 아래쪽 가장자리를 축으로, 아주 작고 기울어진 상태에서 튀어 올라 똑바른 자세를 넘나들며 좌우로 흔들리다 자리 잡게 해 줘. 탄력 있고 장난스럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 비스듬히 기운 채 옆에서 빠르게 날아 들어와, 도착하면서 반듯하게 펴집니다.

[적용할 곳]에 라이트 스피드 인(Light Speed In) 등장 애니메이션을 넣어 줘. lightspeed in이라고도 불러.
요소가 빠르게 달리는 것처럼 비스듬히 기운 채 옆에서 날아 들어오고, 기울기가 한 번 반대로 살짝 넘어갔다가 도착하면서 반듯해지게 해 줘. 빠르고 극적으로, 끝에서 느려지게.
화면 밖에 있는 동안 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 비스듬히 기울며 서서히 사라지는 동시에 옆으로 빠르게 빠져나갑니다.

[적용할 곳]에 라이트 스피드 아웃(Light Speed Out) 퇴장 애니메이션을 넣어 줘. lightspeed out이라고도 불러.
요소가 비스듬히 기울면서 서서히 사라지는 동시에 옆으로 빠르게 빠져나가게 해 줘. 빠르게, 나갈수록 가속되게.
가장자리를 지날 때 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 크고 흐릿하며 투명한 상태에서 줄어들며 또렷해져 연기처럼 나타나고, 사라질 때는 반대로 움직입니다.

[적용할 곳]에 퍼프 인 / 퍼프 아웃(Puff In / Puff Out) 애니메이션을 넣어 줘. 퍼프(puff)라고도 불러.
나타날 때는 크고 흐릿하며 투명한 상태에서 줄어들며 연기가 가라앉듯 또렷해지고, 사라질 때는 다시 흐릿하게 부풀면서 없어지게 해 줘. 부드럽고 꽤 빠르게.
커진 상태가 레이아웃을 밀어내거나 스크롤바를 만들지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.

요소가 바퀴처럼 왼쪽에서 굴러 들어오며 서서히 나타납니다.

[적용할 곳]에 롤 인(Roll In) 등장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 왼쪽에서 굴러 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽게, 도착할 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 오른쪽으로 굴러 나가며 서서히 사라집니다.

[적용할 곳]에 롤 아웃(Roll Out) 퇴장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 오른쪽으로 굴러 나가고, 동시에 서서히 사라지게 해 줘. 부드럽게, 나갈수록 빨라지게.
다 굴러 나간 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 모서리나 중심을 축으로 회전하며 서서히 나타납니다.

[적용할 곳]에 로테이트 인(Rotate In) 등장 애니메이션을 넣어 줘. rotate in down left라고도 불러.
요소가 기울어진 각도에서 왼쪽 아래 모서리를 축으로 돌며 제자리로 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽고 여유 있게, 자리 잡을 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 한 점을 축으로 회전하며 서서히 사라집니다.

[적용할 곳]에 로테이트 아웃(Rotate Out) 퇴장 애니메이션을 넣어 줘.
요소가 중심을 축으로 반 바퀴 조금 넘게 돌면서 서서히 사라지게 해 줘. 부드럽게, 갈수록 빨라지게.
회전이 끝난 뒤에 제거하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 컨테이너 가장자리 바깥에서 제자리까지 페이드 없이 미끄러져 들어옵니다.

[적용할 곳]에 슬라이드 인(Slide In) 등장 애니메이션을 넣어 줘. slide in left, slide in right, slide in up, slide in down이라고도 불러.
요소가 컨테이너 가장자리 바깥에서 제자리까지 미끄러져 들어오고, 그동안 계속 완전히 불투명하게 해 줘. 빠르게, 튕김 없이 부드럽게 감속하게.
바깥에 있는 동안 이웃 요소와 겹치거나 스크롤바가 생기지 않게 컨테이너 가장자리에서 잘라 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 제자리에 바로 보여 줘.

요소가 컨테이너 가장자리 너머로 미끄러져 나가 사라집니다.

[적용할 곳]에 슬라이드 아웃(Slide Out) 퇴장 애니메이션을 넣어 줘. slide out up, slide out down이라고도 불러.
요소가 완전히 불투명한 채로 컨테이너 가장자리 너머로 미끄러져 나가 사라지게 해 줘. 빠르게, 나갈수록 가속되게.
컨테이너 가장자리에서 잘라 주고, 화면에서 벗어나면 키보드와 스크린 리더에서도 숨기고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.

[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.

요소가 한 점에서 회전하며 커지고 서서히 나타납니다.

[적용할 곳]에 스월 인(Swirl In) 등장 애니메이션을 넣어 줘. swirl in forward라고도 불러.
요소가 한 점에서 원래 크기로 커지면서 한 바퀴를 훌쩍 넘게 돌고, 동시에 서서히 나타나게 해 줘. 처음엔 빠르게, 자리 잡으며 느려지게.
그룹 전체가 아니라 요소 하나에만 한 번 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

글자가 넓게 벌어진 흐릿한 상태에서 시작해, 나타나면서 보통 자간으로 좁혀집니다.

[적용할 곳]에 트래킹 인(Tracking In) 텍스트 애니메이션을 넣어 줘. text tracking in, letter-spacing in이라고도 불러.
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 완전히 보이게 되면서 보통 자간으로 좁혀지게 해 줘. 부드럽게, 끝에서 느려지게.
자간이 바뀌는 동안 텍스트를 가운데 정렬된 한 줄로 유지해 주변 레이아웃이 밀리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 보통 자간으로 보여 줘.

요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타납니다.

[적용할 곳]에 줌 인(Zoom In) 등장 애니메이션을 넣어 줘. 스케일 인(scale in)이라고도 불러.
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타나게 해 줘. 빠르고 부드럽게, 크기가 넘쳤다 돌아오는 느낌 없이.
주변 레이아웃에 영향을 주지 않게 중심에서 확대하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 줄어들며 서서히 옅어지다 사라집니다.

[적용할 곳]에 줌 아웃(Zoom Out) 퇴장 애니메이션을 넣어 줘. 스케일 아웃(scale out)이라고도 불러.
요소가 중심을 향해 줄어들면서 서서히 옅어지다 사라지게 해 줘. 빠르게, 갈수록 가속되게.
완전히 사라진 뒤에 레이아웃과 키보드 포커스에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 위아래로 통통 튀며, 튀는 폭이 점점 줄어듭니다.

[적용할 곳]에 바운스(Bounce) 주목 효과를 넣어 줘.
요소가 위로 튀었다 떨어지기를 몇 번 빠르게 반복하되 점점 작게 튀고, 착지할 때 살짝 눌리게 해 줘.
반복 재생하지 말고 트리거될 때 한 번만 재생하고, 모션 줄이기를 켠 사용자에게는 생략해 줘.

요소가 불투명도를 빠르게 바꾸며 깜박입니다.

[적용할 곳]에 플래시(Flash) 주목 효과를 넣어 줘. 블링크(blink)라고도 불러.
요소가 빠르게 사라졌다 나타나기를 두 번 반복하며 깜박인 뒤, 완전히 보이는 상태로 남게 해 줘.
끝없이 깜박이지 말고 한 번만 재생하고, 빠른 깜박임은 불편할 수 있으니 모션 줄이기를 켠 사용자에게는 생략해 줘.

요소의 불투명도가 고장 난 전등처럼 불규칙하게 깜박거립니다.

[적용할 곳]에 플리커(Flicker) 효과를 넣어 줘. flickering이라고도 불러.
요소가 대부분은 안정적으로 있다가, 고장 난 네온사인처럼 짧고 불규칙하게 끊기며 어두워지게 해 줘.
타이밍은 일정한 간격이 아니라 불규칙하게 하고, 최대 밝기로 빠르게 번쩍이는 건 피하고, 모션 줄이기를 켠 사용자에게는 멈춰 줘.

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

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

요소가 뛰는 심장처럼 두 번씩 박동하는 리듬으로 커졌다 작아집니다.

[적용할 곳]에 하트비트(Heartbeat) 효과를 넣어 줘. heart beat라고도 불러.
요소가 빠르게 두 번 부풀었다 풀리고, 다음 박동 전에 잠깐 쉬게 해 줘. 뛰는 심장처럼.
박동 사이의 쉼을 유지한 채 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

요소가 흔들리는 젤리처럼 좌우로 일그러지며, 흔들림 폭이 점점 줄어듭니다.

[적용할 곳]에 젤로(Jello) 주목 효과를 넣어 줘. 젤리(jelly)라고도 불러.
요소가 흔들리는 젤리처럼 좌우로 일그러지게 해 줘. 처음엔 크게, 금방 잦아들며 멈추게.
트리거되면 한 번만 재생하고, 요소가 차지하는 자리는 그대로 둬서 주변 콘텐츠가 밀리지 않게 해 줘.

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

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

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

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

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

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

요소가 한 축을 따라 빠르게 떨리듯 왔다 갔다 합니다.

[적용할 곳]에 셰이크(Shake) 효과를 넣어 줘. 에러 셰이크(error shake), invalid input shake라고도 불러.
요소가 좌우로 몇 번 빠르게 떨리다가 정확히 처음 자리에서 멈추게 해 줘. 빠르고 단호하게.
반복하지 말고 오류가 날 때마다 한 번씩 재생하고, 의미가 움직임에만 기대지 않도록 눈에 보이는 오류 메시지도 함께 보여 줘.

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

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

요소가 위쪽 가장자리를 축으로 진자처럼 좌우로 흔들리며, 흔들림 폭이 점점 줄어듭니다.

[적용할 곳]에 스윙(Swing) 주목 효과를 넣어 줘.
요소가 매달린 간판처럼 좌우로 흔들리게 해 줘. 처음엔 크게 흔들리다가 금방 잦아들게.
가운데가 아니라 위쪽 가장자리를 축으로 흔들고, 트리거되면 한 번만 재생해 줘.

요소가 커지면서 회전하듯 흔들린 뒤 원래 크기로 돌아와, 축하하는 느낌을 줍니다.

[적용할 곳]에 타다(Tada) 주목 효과를 넣어 줘.
요소가 살짝 작아졌다가 커지면서 빠르게 기울며 좌우로 흔들리고, 원래 크기로 돌아오게 해 줘. 작은 축하처럼.
성공 직후처럼 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.

요소가 휴대폰 진동처럼 여러 방향으로 아주 작고 빠르게 떨립니다.

[적용할 곳]에 바이브레이트(Vibrate) 주목 효과를 넣어 줘. 버즈(buzz), 바이브레이션(vibration)이라고도 불러.
요소가 휴대폰 진동처럼 여러 방향으로 아주 작고 빠르게 잠깐 떨리다가 멈추게 해 줘.
내용을 읽을 수 있도록 움직임은 아주 작게 하고, 반복하지 말고 알림마다 한 번씩 재생해 줘.

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

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

아래로 스크롤하면 헤더가 숨고, 위로 스크롤하면 다시 나타납니다.

[적용할 곳]에 스크롤 숨김 헤더(Hide on Scroll Header)를 넣어 줘. 헤드룸(headroom), 자동 숨김 내비바(auto-hide navbar)라고도 불러.
아래로 스크롤하면 헤더가 위로 미끄러져 사라지고, 조금이라도 위로 스크롤하면 다시 내려오게 해 줘. 빠르고 부드럽게, 거리 말고 방향에 반응하게.
페이지 맨 위에서는 항상 보이게 하고, 자잘한 스크롤 흔들림은 무시하고, 헤더 안의 요소에 키보드 포커스가 있는 동안에는 계속 보이게 해 줘.

세로 스크롤에 맞춰 고정된 패널 줄이 옆으로 움직입니다.

[적용할 곳]에 가로 스크롤 섹션(Horizontal Scroll Section)을 넣어 줘. horizontal scrolling, scroll-jacked horizontal gallery라고도 불러.
섹션이 화면 위에 닿으면 고정된 채로, 아래로 스크롤할 때 패널 줄이 옆으로 움직이고, 마지막 패널이 보이면 고정이 풀리게 해 줘.
옆 움직임은 스크롤 위치에 직접 연결해서 되돌려 스크롤하면 반대로 움직이게 하고, 작은 화면이거나 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 일반적인 스와이프 가능한 가로 줄로 보여 줘.

스크롤에 따라 레이어가 서로 다른 속도로 움직여 깊이감을 줍니다.

[적용할 곳]에 패럴랙스(Parallax) 스크롤 효과를 넣어 줘. 패럴랙스 스크롤링(parallax scrolling), 패럴랙스 레이어(parallax layers)라고도 불러.
페이지를 스크롤할 때 배경 레이어가 콘텐츠보다 느리게 움직이고, 멀리 있는 레이어일수록 덜 움직여서 은은한 깊이감을 주게 해 줘.
지연 없이 스크롤 위치에 맞춰 움직이고, 텍스트는 보통 속도 레이어에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 효과를 꺼 줘.

특정 스크롤 구간 동안 요소가 제자리에 고정되고, 그동안 다른 콘텐츠나 애니메이션이 진행됩니다.

[적용할 곳]에 피닝(Pinning) 스크롤 효과를 넣어 줘. 핀 고정 섹션(pinned section), 스티키 섹션(sticky section)이라고도 불러.
옆의 콘텐츠가 스크롤로 지나가는 동안 패널 하나는 제자리에 고정해 두고, 읽고 있는 단계에 맞춰 내용이 바뀌다가 섹션이 끝나면 고정이 풀리게 해 줘.
스크롤을 가로채기보다 네이티브 sticky 포지셔닝을 우선 쓰고, 작은 화면에서는 고정 패널 없이도 각 단계가 잘 읽히게 해 줘.

페이지나 글을 스크롤하는 만큼 막대나 링이 채워집니다.

[적용할 곳]에 스크롤 진행 표시줄(Scroll Progress Indicator)을 넣어 줘. 읽기 진행 바(reading progress bar)라고도 불러.
위쪽의 얇은 막대가 스크롤한 만큼 왼쪽에서 오른쪽으로 채워지고, 끝까지 내리면 전체 너비가 되게 해 줘.
이징 지연 없이 스크롤 위치에 바로 연결하고, 콘텐츠를 가리지 않게 해 줘.

스크롤이 슬라이드나 섹션 같은 정해진 지점에 딱 맞춰 멈춥니다.

[적용할 곳]에 스크롤 스냅(Scroll Snap)을 넣어 줘. 스크롤 스내핑(scroll snapping), 스냅 스크롤링(snap scrolling)이라고도 불러.
스크롤이 멈추면 어중간한 곳에 서지 않고 가장 가까운 섹션의 가장자리에 딱 맞춰 자리 잡게 해 줘.
휠·터치·키보드 스크롤이 모두 그대로 되도록 브라우저 기본 스냅을 쓰고, 화면보다 긴 콘텐츠도 끝까지 읽을 수 있게 해 줘.

애니메이션 진행이 스크롤 위치에 바로 묶여 있어, 앞으로 스크롤하면 재생되고 뒤로 스크롤하면 되감깁니다.

[적용할 곳]에 스크롤 연동 애니메이션(Scroll-Linked Animation)을 넣어 줘. 스크롤 드리븐 애니메이션(scroll-driven animation), 스크롤 스크럽(scroll scrub)이라고도 불러.
애니메이션이 스크롤 위치에 정확히 맞춰 움직여서, 아래로 내리면 앞으로 재생되고 위로 올리면 그 자리에서 되감기게 해 줘. 시간 기반 이징은 따로 넣지 마.
애니메이션 전체를 분명한 스크롤 구간에 맞추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.

요소가 뷰포트에 들어오거나 나갈 때 애니메이션이 한 번 재생됩니다.

[적용할 곳]에 스크롤 트리거 애니메이션(Scroll-Triggered Animation)을 넣어 줘. 스크롤 리빌(reveal on scroll), 애니메이트 온 스크롤(animate on scroll)이라고도 불러.
각 항목이 화면에 들어올 때 한 번만 서서히 나타나며 위로 올라와 자리 잡게 해 줘. 스크롤 위치를 따라가지 말고 자체의 빠르고 부드러운 속도로 재생해 줘.
스크립트가 로드되지 않아도 콘텐츠가 보이게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 보여 줘.

스크롤과 앵커 이동이 뚝뚝 끊기지 않고 이징으로 부드럽게 미끄러집니다.

[적용할 곳]에 스무스 스크롤(Smooth Scroll)을 넣어 줘. 스무스 스크롤링(smooth scrolling), 관성 스크롤(inertia scroll)이라고도 불러.
스크롤과 앵커 이동이 뚝뚝 끊기지 않고 부드럽게 미끄러지다 멈추게 해 줘. 무겁게 늘어지지 않고 가볍고 반응이 빠른 느낌으로.
키보드 스크롤, 스크롤바, 페이지 내 찾기 같은 기본 동작은 그대로 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 부드러운 효과를 꺼 줘.

스크롤하면 카드가 위쪽에 붙은 채 차례로 겹쳐 쌓이고, 앞선 카드는 보통 조금씩 작아집니다.

[적용할 곳]에 스태킹 카드(Stacking Cards)를 넣어 줘. 스티키 스태킹 카드(sticky stacking cards), 카드 스택 스크롤(card stack scroll)이라고도 불러.
스크롤하면 각 카드가 위쪽 근처에 붙고 다음 카드가 그 위로 올라와 덮으면서, 아래 카드들은 살짝 작아져 가지런한 더미가 쌓이게 해 줘.
앞선 카드마다 가장자리가 얇게 보이게 남기고, 마지막 카드가 섹션이 끝나기 전에 제자리까지 올 수 있게 여유 공간을 줘.

아래로 스크롤하면 고정 헤더의 높이나 크기가 줄어듭니다.

[적용할 곳]에 스티키 헤더 축소(Sticky Header Shrink)를 넣어 줘. 슈링킹 헤더(shrinking header), 슈링크 온 스크롤(shrink on scroll)이라고도 불러.
헤더는 위쪽에 붙어 있다가, 조금 내려가면 로고가 작아진 얇은 바로 부드럽게 줄어들고, 맨 위로 돌아오면 다시 커지게 해 줘.
헤더 크기가 바뀌는 동안 아래 콘텐츠가 튀지 않게 해 줘.

페이지를 세로로 스크롤하면 큰 텍스트 줄이 가로로 미끄러집니다.

[적용할 곳]에 스크롤 텍스트 마퀴(Text Marquee on Scroll)를 넣어 줘. scroll text marquee,스크롤 벨로시티 텍스트(scroll velocity text)라고도 불러.
페이지를 아래로 내리면 큰 텍스트 줄이 옆으로 미끄러지고, 줄마다 번갈아 반대 방향으로 움직이며, 위로 올리면 되돌아가게 해 줘.
움직임은 스크롤 위치에 연결하고, 긴 줄 때문에 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

스크롤에 따라 요소나 장면이 커지거나 작아집니다.

[적용할 곳]에 스크롤 줌(Zoom on Scroll) 효과를 넣어 줘. scroll zoom, 스케일 온 스크롤(scale on scroll)이라고도 불러.
섹션이 화면에 머무는 동안 요소가 작은 카드에서 스크롤에 맞춰 부드럽게 커져 화면 전체를 채우고, 위로 올리면 다시 작아지게 해 줘.
주변 레이아웃을 밀어내지 않게 크기를 바꾸고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 줌 없이 최종 크기로 보여 줘.

그라디언트로 채운 글자의 색이 끊임없이 바뀌거나 흘러갑니다.

[적용할 곳]에 그라디언트 텍스트 애니메이션(Animated Gradient Text) 효과를 넣어 줘. 오로라 텍스트(aurora text), 레인보우 텍스트 스윕(rainbow text sweep)이라고도 불러.
글자를 그라디언트로 채우고, 그 색이 글자 위를 느리고 부드럽게 흘러가며 끊김 없이 무한 반복되게 해 줘.
어느 순간에도 배경 위에서 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 색을 멈춰 줘.

글자가 고장 난 신호처럼 조각나 어긋나고 빨강·청록 색이 갈라지며 떨립니다.

[적용할 곳]에 글리치 텍스트(Glitch Text) 호버 효과를 넣어 줘. 텍스트 글리치(text glitch), RGB 스플릿 글리치(RGB split glitch)라고도 불러.
포인터가 글자 위에 있는 동안 빠르고 날카롭게 툭툭 떨리면서, 얇은 가로 조각이 옆으로 튀고 색이 다른 복사본 두 개가 고장 난 신호처럼 갈라졌다가, 포인터가 떠나면 제자리로 돌아오게 해 줘.
스크린 리더가 복사본을 읽지 않게 실제 텍스트는 문서에 한 번만 두고, 키보드 포커스에도 같은 효과를 보여 줘.

글자에 무지갯빛 홀로그램 포일 반사가 나타나 포인터나 시간에 따라 움직입니다.

[적용할 곳]에 홀로그래픽 텍스트(Holographic Text) 호버 효과를 넣어 줘. 홀로그래픽 포일 텍스트(holographic foil text)라고도 불러.
포인터가 글자 위에 있는 동안 포일 같은 색의 띠가 글자 위를 느리고 부드럽게 오가고, 포인터가 떠나면 원래의 평범한 모습으로 돌아오게 해 줘.
반짝임의 어느 순간에도 글자가 읽히게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

글자가 고정된 문구가 아니라 움직이는 그래픽 요소처럼 커지고, 움직이고, 회전합니다.

[적용할 곳]에 키네틱 타이포그래피(Kinetic Typography)를 넣어 줘. 키네틱 텍스트(kinetic text)라고도 불러.
큰 글자를 반복한 줄들이 줄마다 번갈아 반대 방향으로 느리고 일정하게 옆으로 흘러, 글자 자체가 움직이는 그래픽이 되게 해 줘.
각 줄이 튀는 곳 없이 끊김 없이 반복되게 하고, 스크린 리더는 텍스트를 한 번만 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

호버하면 글자가 흩어졌다 돌아오거나, 등장할 때 바깥으로 터져 나갑니다.

[적용할 곳]에 레터 스캐터(Letter Scatter) 호버 효과를 넣어 줘. 스캐터 개더 레터(scatter gather letters), 익스플로시브 레터 버스트(explosive letter burst)라고도 불러.
포인터가 글자 위로 오면 글자마다 제각각의 방향으로 살짝 회전하며 조금씩 날아가고, 포인터가 떠나면 부드럽게 다시 모여 단어가 되게 해 줘.
글자가 움직이는 동안 레이아웃에서 단어가 차지하는 자리는 고정하고, 스크린 리더는 한 단어로 읽게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

글자 뒤의 줄무늬 또는 어긋난 그림자가 한 방향으로 움직입니다.

[적용할 곳]에 라인 섀도 텍스트(Line Shadow Text) 효과를 넣어 줘. 텍스트 섀도 애니메이션(text shadow animation), 댄싱 섀도(dancing shadow)라고도 불러.
글자 뒤에서 얇은 사선 줄무늬로 된 어긋난 그림자가 느리고 끊임없이 미끄러지고, 글자 자체는 가만히 선명하게 있게 해 줘.
줄무늬 움직임은 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 그림자를 멈춰 줘.

글자 안이 출렁이며 차오르는 액체로 채워집니다.

[적용할 곳]에 리퀴드 필 텍스트(Liquid Fill Text) 효과를 넣어 줘. 워터 필 텍스트(water fill text)라고도 불러.
외곽선만 있는 글자 안에 액체가 차고, 물결치는 수면이 옆으로 흘러가면서 수위가 천천히 오르내리는 부드러운 반복이 되게 해 줘.
스크린 리더가 읽을 수 있게 단어는 실제 텍스트로 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 액체를 일정한 수위에 멈춰 줘.

텍스트가 잘린 경계선 뒤에서 미끄러져 올라와, 아무것도 없던 곳에서 나타나는 느낌을 줍니다.

[적용할 곳]에 마스크 리빌(Mask Reveal) 텍스트 등장 효과를 넣어 줘. 라인 마스크 리빌(line mask reveal), 텍스트 마스킹(text masking)이라고도 불러.
각 줄이 보이지 않는 경계선 뒤에서 미끄러져 올라와 아무것도 없던 곳에서 나타나듯, 한 줄씩 차례로 빠르고 부드럽게, 튕기는 느낌 없이 나오게 해 줘.
텍스트가 스크롤로 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 바로 보여 줘.

초록색 글자가 매트릭스의 코드 비처럼 세로줄을 따라 떨어집니다.

[적용할 곳]에 매트릭스 텍스트(Matrix Text) 효과를 넣어 줘. 디지털 레인 텍스트(digital rain text)라고도 불러.
글자 열이 저마다 조금씩 다른 속도로 꾸준히 떨어지고, 맨 앞 글자는 밝게 빛나며 그 뒤로 꼬리가 서서히 사라지게 해 줘.
스크린 리더에는 숨긴 장식으로 다루고, 가볍게 유지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

글자가 녹아내리듯 아래로 흘러내리며 늘어집니다.

[적용할 곳]에 멜팅 텍스트(Melting Text) 효과를 넣어 줘.
글자가 천천히 아래로 처지면서 그 밑으로 방울이 늘어져 녹아내리는 것처럼 보이다가, 녹은 모습 그대로 멈추게 해 줘.
텍스트가 화면에 들어올 때 한 번만 재생하고, 끝에도 단어를 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.

한 단어가 같은 자리에서 흐려지며 다음 단어로 녹아들듯 바뀝니다.

[적용할 곳]에 모핑 텍스트(Morphing Text) 효과를 넣어 줘. 텍스트 모프(text morph)라고도 불러.
한 단어가 같은 자리에서 흐려지며 끈적하고 부드럽게 섞여 다음 단어로 녹아들고, 다음 전환 전에 잠깐 멈춰 있게 해 줘.
단어가 끊김 없이 순환되게 하고, 스크린 리더는 단어를 일반 텍스트로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 순환을 멈춰 줘.

텍스트가 네온관처럼 빛나며 깜빡이거나 은은하게 맥동합니다.

[적용할 곳]에 네온 글로우 텍스트(Neon Glow Text) 효과를 넣어 줘. 네온사인 플리커(neon sign flicker), 글로잉 텍스트(glowing text)라고도 불러.
텍스트가 네온관처럼 부드럽고 일정한 빛으로 빛나다가, 가끔 진짜 간판처럼 잠깐 꺼지게 해 줘.
빠른 깜빡임은 일부 사용자에게 해로울 수 있으니 깜빡임은 빠르지 않게 가끔만 넣고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 일정하게 유지해 줘.

사용자가 섹션을 스크롤할 때 제목 글자가 차례로 섞이거나 움직입니다.

[적용할 곳]에 스크롤링 레터(Scrolling Letters)를 넣어 줘. 온스크롤 레터 애니메이션(on-scroll letter animations)이라고도 불러.
사용자가 섹션을 스크롤하면 제목 글자가 왼쪽부터 오른쪽으로 하나씩 다음 글자로 굴러가듯 바뀌고, 스크롤 위치에 바로 연동되게 해 줘.
위로 다시 스크롤하면 거꾸로 돌아가게 하고, 스크린 리더에는 현재 제목을 일반 텍스트로 전달해 줘.

밝은 하이라이트가 글자 위를 반복해서 훑고 지나갑니다.

[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

제목이 가로 조각으로 잘려, 페이지를 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀립니다.

[적용할 곳]에 슬라이스드 텍스트(Sliced Text) 효과를 넣어 줘. 온스크롤 슬라이스드 텍스트(on-scroll sliced text)라고도 불러.
큰 제목을 가로 조각으로 잘라, 처음에는 온전한 단어로 맞춰져 있다가 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀리게 해 줘.
밀림을 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 스크린 리더에는 제목을 하나의 읽을 수 있는 텍스트로 유지해 줘.

원을 따라 배치된 텍스트가 멈추지 않고 계속 회전합니다.

[적용할 곳]에 스피닝 텍스트(Spinning Text)를 넣어 줘. 서큘러 텍스트(circular text), 텍스트 온 서클(text on circle)이라고도 불러.
글자를 원 둘레에 고르게 배치하고, 원이 느리고 일정하게 돌며 반복이 다시 시작될 때 튀지 않게 해 줘.
스크린 리더에는 텍스트를 한 번만 일반 텍스트로 전달하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.

[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.

공항 출발 안내판처럼 글자가 차르르 넘어가다 목표 글자에서 멈춥니다.

[적용할 곳]에 스플릿 플랩 텍스트(Split-Flap Text) 효과를 넣어 줘. 텍스트 플리핑 보드(text flipping board), 플립 보드(flip board)라고도 불러.
각 글자 칸이 알파벳을 빠르게 넘기다 목표 글자에서 멈추고, 칸들이 왼쪽부터 오른쪽으로 차례로 자리 잡게 해 줘.
텍스트가 나타나거나 바뀔 때마다 한 번씩 실행하고, 스크린 리더에는 최종 텍스트만 읽어 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 넘기지 말고 최종 텍스트를 바로 보여 줘.

SVG 디스플레이스먼트 필터로 글자 가장자리가 손으로 그린 듯 꿈틀거립니다.

[적용할 곳]에 스퀴글리 텍스트(Squiggly Text) 효과를 넣어 줘. 워블리 텍스트(wobbly text), 터뷸런스 텍스트(turbulence text)라고도 불러.
글자 가장자리가 1초에 여러 번 손으로 다시 그린 것처럼 살짝 꿈틀거리게 해 줘. 부드러운 물결이 아니라 은은하게 자글거리는 느낌으로.
글자는 읽을 수 있게 유지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

텍스트는 고정된 채, 스크롤 진행에 따라 줄이 서서히 나타났다 사라집니다.

[적용할 곳]에 스티키 텍스트 페이드(Sticky Text Fade) 효과를 넣어 줘. 스티키 스크롤 텍스트 오퍼시티 페이드(sticky scroll text opacity fade)라고도 불러.
섹션을 스크롤하는 동안 텍스트 블록은 제자리에 고정되고, 줄이 스크롤 진행에 따라 한 줄씩 서서히 나타났다 사라지게 해 줘.
페이드를 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 투명도와 상관없이 모든 줄을 스크린 리더가 읽을 수 있게 해 줘.

글자 윤곽이 선으로 먼저 그려진 뒤 채우기가 나타납니다.

[적용할 곳]에 스트로크 텍스트 드로우(Stroke Text Draw) 효과를 넣어 줘. 드로우 인 텍스트(draw in text), 애니메이티드 스트로크 텍스트(animated stroke text)라고도 불러.
글자 윤곽이 부드럽게 저절로 그려지고, 윤곽이 다 그려지면 채우기가 서서히 나타나게 해 줘.
로드될 때 한 번만 재생하고, 단어는 실제 텍스트로 접근할 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 채워진 텍스트를 바로 보여 줘.

글자나 단어가 축을 중심으로 3D 회전하며 뒷면의 다음 텍스트를 보여 줍니다.

[적용할 곳]에 텍스트 3D 플립(Text 3D Flip) 호버 효과를 넣어 줘. 3D 플립 텍스트 리빌(3D flip text reveal)이라고도 불러.
포인터가 텍스트 위에 오면 각 글자가 가로축을 중심으로 3D로 굴러 넘어가며 뒷면의 새 글자를 보여 주고, 한 글자씩 빠르고 부드럽게 훑듯이 이어지다가 포인터가 떠나면 다시 돌아오게 해 줘.
넘어가는 동안 텍스트 상자 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.

스크롤이나 포인터 움직임에 따라 텍스트가 유기적으로 일그러지고 일렁입니다.

[적용할 곳]에 텍스트 디스토션(Text Distortion) 효과를 넣어 줘. 오가닉 텍스트 디스토션(organic text distortion)이라고도 불러.
텍스트 한 줄이 옆으로 끝없이 흐르면서 일렁이는 물 너머로 보는 것처럼 유기적으로 일그러지고 물결치게 하고, 그 흐름은 사용자의 스크롤로 움직이게 해 줘.
일그러짐은 글자를 읽을 수 있을 만큼 가볍게 하고, 느린 기기에서도 부드럽게 돌아가게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 꺼 줘.

페이지가 로드될 때 단어가 차례로 서서히 나타나며, 흔히 흐림이 걷히면서 글이 생성되는 듯한 느낌을 줍니다.

[적용할 곳]에 텍스트 생성(Text Generate) 효과를 넣어 줘.
단어가 하나씩 차례로 나타나면서 각 단어의 부드러운 흐림이 걷혀, 글이 생성되는 것처럼 보이게 해 줘. 일정하고 차분하게.
로드될 때 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.

형광펜 같은 색 띠가 문구 위로 그어지며 강조해 줍니다.

[적용할 곳]에 텍스트 하이라이터(Text Highlighter) 효과를 넣어 줘. 하이라이트 마커(highlight marker), 마커 밑줄(marker underline)이라고도 불러.
형광펜 같은 색 띠가 핵심 문구 뒤를 왼쪽에서 오른쪽으로 부드럽게 지나가서, 누군가 펜으로 칠하는 것처럼 보이게 해 줘.
문구가 스크롤로 화면에 들어올 때 한 번만 재생하고, 띠 위에서도 글자가 잘 읽히게 하고, 문구가 두 줄로 줄바꿈되어도 띠가 제대로 따라가게 해 줘.

외곽선만 있는 단어가 포인터를 따라가거나 가로질러 지나가는 그라디언트로 채워지거나 빛납니다.

[적용할 곳]에 텍스트 호버 효과(Text Hover Effect)를 넣어 줘. 호버 시 텍스트 채우기(text fill on hover), 그라디언트 외곽선 텍스트 호버(gradient outline text hover)라고도 불러.
단어는 처음에 외곽선만 보이다가, 포인터가 올라가 있는 동안 꽉 찬 채우기가 왼쪽에서 오른쪽으로 부드럽게 들어오고, 포인터가 떠나면 다시 빠져나가게 해 줘.
채워지기 전 외곽선 단어도 잘 읽히게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.

텍스트가 곡선 경로를 따라 놓이고, 스크롤할 때 그 경로를 따라 이동합니다.

[적용할 곳]에 텍스트 패스 스크롤(Text Path Scroll) 효과를 넣어 줘. 텍스트 패스 곡선 스크롤 애니메이션(text path curve scroll animation)이라고도 불러.
텍스트가 곡선 위에 놓이고, 사용자가 스크롤하면 그 곡선을 따라 미끄러지게 해 줘. 아래로 스크롤하면 앞으로, 위로 스크롤하면 뒤로 가게.
움직임은 지연 없이 스크롤 위치에 바로 연결하고, 스크린 리더에서는 일반 텍스트로 읽히게 해 줘.

단어가 여러 겹의 복사본으로 쌓이고, 스크롤에 따라 어긋나며 움직입니다.

[적용할 곳]에 텍스트 반복(Text Repetition) 효과를 넣어 줘. 반복 텍스트 스크롤(repeated text scroll)이라고도 불러.
단어를 더 흐린 외곽선 복사본 여러 겹으로 복제해서, 스크롤하면 단어 뒤에서 펼쳐지고 위로 스크롤하면 다시 겹쳐지게 해 줘.
펼쳐지는 정도는 스크롤 위치에 바로 연결하고, 추가 복사본은 스크린 리더에서 숨겨 단어가 한 번만 읽히게 해 줘.

기존 텍스트가 애니메이션과 함께 빠져나가고 새 텍스트로 바뀝니다.

[적용할 곳]에 텍스트 교체(Text Replacement) 효과를 넣어 줘. 텍스트 스왑(text swap)이라고도 불러.
텍스트가 바뀔 때 기존 글자는 위로 미끄러져 빠지고 새 글자는 아래에서 들어오게, 한 글자씩 빠르고 부드러운 물결처럼 이어지게 해 줘.
바뀌는 동안 텍스트 박스 크기가 튀지 않게 하고, 스크린 리더에는 새 텍스트만 읽어 주게 해 줘.

문단의 단어가 스크롤에 따라 흐린 상태에서 완전히 선명한 상태로 바뀝니다.

[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.

카드 위로 포인터를 움직이면 마스크 경계나 스포트라이트 아래에 숨은 텍스트가 드러납니다.

[적용할 곳]에 텍스트 리빌 카드(Text Reveal Card) 효과를 넣어 줘. 스포트라이트 텍스트 리빌(spotlight text reveal)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.

텍스트가 계속 바뀌는 무작위 문자로 대체되었다가 점차 최종 단어로 맞춰집니다.

[적용할 곳]에 텍스트 스크램블(Text Scramble) 호버 효과를 넣어 줘. 텍스트 디코드(text decode), 암호화 텍스트(encrypted text)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.

텍스트가 마우스 위치를 따라 3D 원근감 있게 기울어집니다.

[적용할 곳]에 텍스트 틸트(Text Tilt) 효과를 넣어 줘. 원근 텍스트 틸트(perspective text tilt)라고도 불러.
텍스트가 포인터 움직임을 부드럽게 따라가며 3D로 포인터 쪽으로 살짝 기울고, 포인터가 떠나면 부드럽게 평평하게 돌아오게 해 줘.
기울기는 은은하게 해서 글이 잘 읽히게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 평평하게 둬 줘.

글자가 타이핑하듯 하나씩 나타나고, 보통 그 뒤에 깜빡이는 커서가 따라옵니다.

[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.

호버하면 링크 아래에 한쪽 끝이나 가운데에서 밑줄이 자라납니다.

[적용할 곳]에 언더라인 드로우(Underline Draw) 호버 효과를 넣어 줘. 애니메이션 밑줄(animated underline), 호버 밑줄 애니메이션(hover underline animation)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.

가변 폰트의 축을 이용해 글자가 부드럽게 굵어지거나 가늘어집니다(너비나 기울기가 바뀌기도 합니다).

[적용할 곳]에 가변 폰트 웨이트 애니메이션(Variable Font Weight Animation) 호버 효과를 넣어 줘. 폰트 웨이트 시프트(font weight shift)라고도 불러.
포인터가 텍스트 위에 있는 동안 글자가 왼쪽에서 오른쪽으로 부드러운 물결처럼 차례로 굵어지고, 포인터가 떠나면 다시 가늘어지게 해 줘.
굵기가 튀지 않고 부드럽게 바뀌도록 가변 폰트를 쓰고, 제목이 넓어지면서 주변 콘텐츠를 밀어내지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.

큰 글자가 창처럼 되어 그 안에서 재생 중인 영상이 보입니다.

[적용할 곳]에 비디오 텍스트(Video Text) 효과를 넣어 줘. 텍스트 비디오 마스크(text video mask)라고도 불러.
크고 굵은 글자가 재생 중인 영상을 보여 주는 창이 되어, 움직이는 화면이 글자 모양 안에서만 보이게 해 줘.
영상은 음소거하고 컨트롤 없이 반복 재생하고, 스크린 리더를 위해 단어를 실제 텍스트로 제공하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지 화면을 보여 줘.

글자가 차례로 위아래로 흔들리며 단어 전체에 물결이 흐르는 듯한 느낌을 줍니다.

[적용할 곳]에 웨이비 텍스트(Wavy Text) 효과를 넣어 줘. 텍스트 웨이브(text wave)라고도 불러.
글자가 차례로 위아래로 흔들려서 잔잔하고 부드러운 물결이 단어 속을 계속 흐르게 해 줘.
끊김 없이 반복하고, 스크린 리더에서는 한 단어로 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.

문장 속 한 단어가 슬라이드, 플립, 페이드로 목록의 다음 단어와 바뀝니다.

[적용할 곳]에 워드 로테이트(Word Rotate) 효과를 넣어 줘. 회전 단어(rotating words), 플립 단어(flip words)라고도 불러.
줄 안의 한 단어가 위로 미끄러져 빠지고 목록의 다음 단어가 아래에서 들어오게 하고, 다음 교체 전에 각 단어에서 잠시 멈추게 해 줘.
단어 너비가 달라도 줄의 나머지가 튀지 않게 하고, 스크린 리더가 교체될 때마다 읽지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 교체를 멈춰 줘.

유기적인 블롭이 윤곽을 끊임없이 바꿉니다.

[적용할 곳]에 블롭 모프(Blob Morph) 반복 애니메이션을 넣어 줘. 모핑 블롭(morphing blob), 애니메이티드 블롭(animated blob)이라고도 불러.
유기적인 블롭이 천천히 돌면서 윤곽을 계속 바꾸게 해 줘. 모서리 없이 매끄럽고 부드럽게.
모양이 튀지 않게 이음매 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

블러와 대비 필터로 가까운 도형끼리 액체 방울처럼 서로 녹아 붙습니다.

[적용할 곳]에 메타볼 효과(Gooey Effect)를 넣어 줘. 구 이펙트(goo effect), 메타볼(metaballs)이라고도 불러.
포인터를 올리면 작은 방울들이 본체에서 액체처럼 늘어나다 떨어져 나가고, 포인터가 벗어나면 흘러 돌아와 부드럽게 합쳐지게 해 줘.
블러·대비 필터는 페이지 전체가 아니라 작은 도형 묶음에만 걸고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.

햄버거 메뉴 같은 아이콘이 막대의 회전과 이동으로 다른 아이콘(X)으로 바뀝니다.

[적용할 곳]에 아이콘 모프(Icon Morph)를 넣어 줘. 햄버거 투 엑스(hamburger to X), 메뉴 아이콘 모프(menu icon morph)라고도 불러.
누를 때마다 위아래 막대가 먼저 가운데로 모인 다음 회전해 X가 되고 가운데 막대는 사라지며, 다시 누르면 반대로 돌아가게 해 줘. 빠르고 경쾌하게.
접근성 레이블과 펼침 상태가 함께 바뀌는 진짜 토글 버튼으로 만들고, 주변이 밀리지 않게 아이콘 크기는 고정해 줘.

대시 오프셋을 애니메이션해 SVG 선이 경로를 따라 그려지는 것처럼 보여 줍니다.

[적용할 곳]에 라인 드로잉(Line Drawing) 애니메이션을 넣어 줘. 패스 드로잉(path drawing), 셀프 드로잉 SVG(self-drawing SVG)라고도 불러.
각 선이 경로를 따라 처음부터 끝까지 부드럽게 저절로 그려지는 것처럼 보이고, 체크 표시 같은 두 번째 선은 첫 번째 선 바로 뒤에 이어지게 해 줘.
반복하지 말고 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 다 그려진 선을 보여 줘.

요소가 직접 정한 곡선 경로를 따라 이동하며, 경로에 맞춰 방향을 돌릴 수도 있습니다.

[적용할 곳]에 모션 패스(Motion Path) 애니메이션을 넣어 줘. 애니메이트 얼롱 패스(animate along path)라고도 불러.
작은 요소가 직접 정한 곡선 경로를 따라 느리고 일정한 속도로 이동하면서, 나아가는 방향을 바라보도록 돌게 해 줘.
반복이 튀지 않게 닫힌 경로를 쓰고, 경로는 고정 크기가 아니라 컨테이너 크기에 맞춰 늘고 줄게 해 줘.

작은 원이나 아이콘이 원형 궤도를 따라 중심 주위를 돕니다.

[적용할 곳]에 오비팅 서클(Orbiting Circles)을 넣어 줘. 오빗 애니메이션(orbit animation), 오비팅 아이콘(orbiting icons)이라고도 불러.
작은 원들이 가운데 요소 주위를 원형 고리를 따라 느리고 일정하게 돌고, 바깥 고리는 반대 방향으로 더 느리게 돌게 해 줘.
반복은 끊김 없이, 도는 항목은 항상 똑바로 서 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

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

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

SVG 필터가 움직이는 노이즈로 텍스트나 도형을 일그러뜨립니다.

[적용할 곳]에 SVG 디스플레이스먼트 디스토션(SVG Displacement Distortion) 호버 효과를 넣어 줘. 디스플레이스먼트 맵 효과(displacement map effect)라고도 불러.
포인터를 올린 동안 텍스트나 도형이 흐르는 물 너머로 보이듯 일렁이고 흔들리며 부드럽게 나타나고, 포인터가 벗어나면 다시 선명해지게 해 줘.
가만히 있을 때 부담이 없도록 왜곡 필터는 효과가 켜진 동안에만 걸고, 키보드 포커스에도 같은 효과를 보여 줘.

마스크 도형이 쓸고 지나가거나 포인터를 따라가며 아래 콘텐츠를 드러냅니다.

[적용할 곳]에 SVG 마스크 리빌(SVG Mask Reveal) 호버 효과를 넣어 줘. 클립 패스 리빌(clip-path reveal), 스포트라이트 마스크(spotlight mask)라고도 불러.
포인터를 올린 동안 원형 마스크가 가운데서 커지며 아래 콘텐츠를 드러내고, 포인터가 벗어나면 다시 닫히게 해 줘. 부드럽고 꽤 빠르게.
아무것도 밀리지 않게 두 레이어를 정확히 같은 크기로 두고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.

지도나 지구본 위의 지점 사이로 선과 점이 움직입니다.

[적용할 곳]에 맵 아크 애니메이션(Animated Map Arcs)을 넣어 줘. 글로브 아크(globe arcs)라고도 불러.
점으로 된 지도 위 지점 사이에 곡선이 하나씩 차례로 그려진 뒤 목적지 쪽으로 거둬지고, 목적지에서는 부드러운 고리가 맥박치듯 퍼지게 해 줘. 차분하고 일정하게.
호들이 한꺼번에 움직이지 않게 시차를 두고, 반복은 끊김 없이 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

막대가 높이 0에서 데이터 값까지 솟아오릅니다.

[적용할 곳]에 바 차트 그로우(Bar Chart Grow) 애니메이션을 넣어 줘. 애니메이티드 바 차트(animated bar chart), 바 차트 엔트런스(bar chart entrance)라고도 불러.
막대가 기준선에서 값까지 빠른 시차를 두고 하나씩 차례로 올라오고, 자리 잡을 때 부드럽게 감속하게 해 줘.
차트가 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 차트를 바로 보여 줘.

값이 바뀜에 따라 가로 막대의 순위가 시간에 따라 뒤바뀝니다.

[적용할 곳]에 바 차트 레이스(Bar Chart Race)를 넣어 줘. 레이싱 바 차트(racing bar chart)라고도 불러.
시간에 따라 값이 바뀌면 가로 막대가 늘고 줄며, 순위가 바뀔 때마다 서로 부드럽게 미끄러져 자리를 바꾸고, 막대마다 레이블이 따라다니게 해 줘.
자리바꿈이 튀지 않고 미끄러지도록 마크업 순서를 바꾸지 말고 transform으로 막대를 옮기고, 사용자가 멈출 수 있는 방법을 줘.

데이터가 바뀌거나 데이터셋을 전환하면 차트 요소가 이전 값에서 새 값으로 부드럽게 이어집니다.

[적용할 곳]에 차트 데이터 트랜지션(Chart Data Transition)을 넣어 줘. 차트 업데이트 애니메이션(chart update animation)이라고도 불러.
데이터가 바뀌면 0부터 다시 그리지 말고, 모든 막대가 이전 값에서 새 값으로 동시에 부드럽고 여유 있게 옮겨 가게 해 줘.
빠르게 두 번째 변경이 와도 튀지 않게 매번 화면에 보이는 현재 값에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 새 값을 바로 적용해 줘.

링이나 원형 차트가 시계 방향으로 비율만큼 채워집니다.

[적용할 곳]에 도넛 차트 필(Donut Chart Fill) 애니메이션을 넣어 줘. 파이 차트 스윕(pie chart sweep), 애니메이티드 도넛 차트(animated donut chart)라고도 불러.
맨 위에서 시작해 각 구간이 차례로 시계 방향으로 채워지며 링이 각자의 비율을 보여 주고, 끝날 때 부드럽게 감속하게 해 줘.
차트가 화면에 들어올 때 한 번만 재생하고, 실제 값은 스크린 리더가 읽을 수 있게 텍스트로 남겨 줘.

숫자가 화면에 보이면 시작 값에서 목표 값까지 셉니다.

[적용할 곳]에 넘버 티커(Number Ticker)를 넣어 줘. 카운트 업(count up), 애니메이티드 카운터(animated counter)라고도 불러.
숫자가 화면에 들어오면 0부터 목표 값까지 세되, 처음엔 빠르다가 도착할 때 부드럽게 느려지게 해 줘.
주변이 흔들리지 않게 고정폭 숫자를 쓰고, 한 번만 세고, 스크린 리더와 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 최종 값을 바로 보여 줘.

숫자가 바뀌면 각 자리가 세로로 굴러 새 값이 됩니다.

[적용할 곳]에 오도미터(Odometer) 숫자 애니메이션을 넣어 줘. 롤링 넘버(rolling numbers), 슬롯머신 숫자(slot-machine digits)라고도 불러.
값이 바뀌면 각 자리가 항상 앞쪽 방향으로 세로로 굴러 새 숫자가 되고, 자리마다 살짝 시차를 두고 끝에서 작게 자리 잡게 해 줘.
숫자가 밀리지 않게 모든 자리의 폭을 같게 하고, 스크린 리더에는 최종 값만 읽히게 해 줘.

색 배경이 한쪽 끝에서 쓸려 들어오며 탄력 있게 살짝 넘쳤다가 자리 잡습니다.

[적용할 곳]에 배경 바운스 스윕(Background Bounce Sweep) 호버 효과를 넣어 줘.
새 배경색이 한쪽 끝에서 쓸려 들어와 반대쪽 끝을 탄력 있게 살짝 넘었다가 자리 잡고, 글자색은 잘 읽히도록 바뀌게 해 줘. 포인터가 벗어나면 부드럽게 다시 빠져나가게 해 줘.
글자는 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 배경색과 글자색이 새 색으로 부드럽게 바뀝니다.

[적용할 곳]에 배경 페이드(Background Fade) 호버 효과를 넣어 줘. 컬러 페이드(color fade)라고도 불러.
포인터가 요소 위에 있는 동안 배경색과 글자색이 새 색으로 부드럽게 바뀌고, 벗어나면 원래대로 돌아오게 해 줘. 차분하게, 움직임 없이.
두 상태 모두 글자와 배경의 대비를 충분히 유지하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

마우스를 올려 둔 동안 요소가 떠오른 뒤 위아래로 계속 둥실거립니다.

[적용할 곳]에 밥(Bob) 호버 효과를 넣어 줘. 행(hang)이라고도 불러.
요소가 살짝 떠오른 뒤, 포인터가 올라가 있는 동안 위아래로 부드럽게 계속 둥실거리고, 벗어나면 제자리로 내려오게 해 줘. 느리고 부드럽게.
둥실거림은 호버 중에만 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

마우스를 올리면 테두리 색이 서서히 나타나거나 바뀝니다.

[적용할 곳]에 보더 페이드(Border Fade) 호버 효과를 넣어 줘.
포인터가 요소 위에 있는 동안 테두리가 차분한 색에서 강조색으로 부드럽게 바뀌게 해 줘. 은은하게, 움직임이나 크기 변화 없이.
아무것도 밀리지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 동심원 테두리 고리가 요소에서 바깥으로 퍼지거나 안쪽으로 모입니다.

[적용할 곳]에 보더 리플(Border Ripple) 호버 효과를 넣어 줘.
포인터가 들어오면 테두리 고리 두어 개가 차례로 요소에서 바깥으로 퍼지며 사라지게 해 줘. 물결처럼 빠르고 가볍게.
반복하지 말고 호버할 때마다 한 번만 재생하고, 고리 때문에 주변 레이아웃이 밀리지 않게 해 줘.

호버가 시작되거나 끝날 때 요소가 탄력 있게 살짝 넘치며 커지거나 작아집니다.

[적용할 곳]에 바운스 스케일(Bounce Scale) 호버 효과를 넣어 줘. 바운스 인/아웃(bounce in / out)이라고도 불러.
요소가 탄력 있게 살짝 커지면서 최종 크기를 잠깐 눈에 띄게 넘었다가 자리 잡고, 포인터가 벗어나면 같은 방식으로 튕기며 돌아오게 해 줘.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

강조 배경이 그리드 안의 카드 사이를 미끄러지듯 옮겨 다니며 마우스를 올린 카드를 따라갑니다.

[적용할 곳]에 카드 호버 효과(Card Hover Effect)를 넣어 줘. 슬라이딩 하이라이트 카드 그리드(sliding highlight card grid)라고도 불러.
마우스를 올린 카드 뒤에 부드러운 강조 배경이 나타나고, 포인터가 다른 카드로 옮겨 가면 그쪽으로 매끄럽게 미끄러져 가며, 포인터가 그리드를 벗어나면 서서히 사라지게 해 줘.
키보드 포커스로도 강조 배경이 똑같이 움직이게 하고, 카드 자체는 밀리지 않게 해 줘.

부드러운 원형 빛이 포인터를 따라 카드 표면을 움직이며 아래 배경을 드러냅니다.

[적용할 곳]에 카드 스포트라이트(Card Spotlight) 효과를 넣어 줘. 스포트라이트 호버(spotlight hover), 포인터 글로우(pointer glow), 마우스 추적 글로우(mouse-following glow), 방사형 그라디언트 호버(radial gradient hover)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.

마우스를 올리면 요소의 한 모서리가 책장을 넘기듯 말려 올라갑니다.

[적용할 곳]에 컬(Curl) 호버 효과를 넣어 줘. 페이지 컬(page curl)이라고도 불러.
요소의 한 모서리가 책장을 넘기듯 부드럽게 말려 올라가 접힌 뒷면이 보이고, 포인터가 벗어나면 다시 평평해지게 해 줘.
중요한 내용을 가리지 않게 접힌 부분은 작게 두고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 빠져나갑니다.

[적용할 곳]에 디렉션 어웨어 호버(Direction Aware Hover) 효과를 넣어 줘. 방향 인식 오버레이(direction-aware overlay)라고도 불러.
포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 미끄러져 나가게 해 줘. 빠르고 부드럽게.
들어올 때와 나갈 때의 포인터 위치로 방향을 판단하고, 터치나 키보드 포커스에서는 정해 둔 한 방향을 써 줘.

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

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

마우스를 올리면 요소가 떠오르듯 몇 픽셀 위로 올라갑니다.

[적용할 곳]에 플로트(Float) 호버 효과를 넣어 줘. 리프트(lift), 레이즈(raise)라고도 불러.
포인터가 올라가 있는 동안 요소가 살짝 떠올라 있다가, 벗어나면 제자리로 내려오게 해 줘. 부드럽고 은은하게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올린 카드만 선명하게 남고 나머지 카드는 흐려지고 어두워집니다.

[적용할 곳]에 포커스 카드(Focus Cards) 효과를 넣어 줘. 블러 시블링스 온 호버(blur siblings on hover), 호버 포커스 블러(hover focus blur), 카드 호버 효과(card hover effect)라고도 불러.
포인터가 한 카드 위에 있는 동안 그 카드는 선명하게 두고 나머지 카드는 흐려지고 어두워지며 살짝 작아지게 해 줘. 모두 부드럽게 전환되고, 포인터가 벗어나면 되돌아가게 해 줘.
키보드 포커스에도 같은 강조를 적용하고, 아무 카드도 호버하지 않을 때는 모든 카드를 선명하고 잘 읽히게 둬 줘.

마우스를 올리면 요소 둘레에 색 빛 번짐이 나타납니다.

[적용할 곳]에 글로우(Glow) 호버 효과를 넣어 줘. 네온 글로우(neon glow)라고도 불러.
포인터가 올라가 있는 동안 요소 둘레에 부드러운 색 빛 번짐이 서서히 나타나고, 벗어나면 사라지게 해 줘. 은은하게, 움직임 없이.
빛 번짐이 레이아웃에 영향을 주지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

마우스를 올리면 채워진 배경이 비워지고 테두리만 남은 버튼이 됩니다.

[적용할 곳]에 할로우(Hollow) 호버 효과를 넣어 줘. 고스트 필(ghost fill)이라고도 불러.
채워진 배경이 사라지면서 테두리만 남고, 빈 배경에서도 읽히도록 라벨 색이 바뀌게 해 줘. 부드럽고 빠르게.
요소 크기가 변하지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

그라디언트 테두리가 요소 둘레를 따라 움직이고, 포인터를 올리면 퍼져 나갑니다.

[적용할 곳]에 호버 보더 그라디언트(Hover Border Gradient) 효과를 넣어 줘.
짧은 그라디언트 하이라이트가 테두리 한쪽에 머물러 있다가, 포인터가 올라가 있는 동안 테두리를 따라 일정하게 돌고 테두리 전체가 은은하게 빛나며 밝아지게 해 줘.
호버 중에만 테두리를 움직이고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

마우스를 올리면 요소 아래에 부드러운 그림자가 생기거나 짙어져 떠오른 느낌을 줍니다.

[적용할 곳]에 호버 섀도(Hover Shadow) 효과를 넣어 줘. 드롭 섀도 온 호버(drop shadow on hover), 엘리베이션 온 호버(elevation on hover)라고도 불러.
포인터가 올라가 있는 동안 요소 아래의 부드러운 그림자가 짙어지고 퍼져서 떠 보이게 하고, 벗어나면 다시 옅어지게 해 줘. 요소 자체는 제자리에 두고.
라이트·다크 테마 모두에서 어울리도록 그림자는 은은하게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

반투명 오버레이가 요소에 색을 덧입혀 포인터가 올라가 있음을 보여 줍니다.

[적용할 곳]에 호버 스테이트 레이어(Hover State Layer)를 넣어 줘. 호버 스테이트(hover state), 스테이트 레이어(state layer), 호버 오버레이(hover overlay)라고도 불러.
포인터가 올라가 있는 동안 콘텐츠 색의 옅은 반투명 오버레이가 요소 위에 빠르게 나타나고, 벗어나면 사라지게 해 줘.
대비가 유지되도록 옅게 두고, 포커스와 눌림 상태에도 같은 레이어 방식을 써 줘.

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

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

아이콘이 버튼 밖으로 떠올라 사라지고, 새 아이콘이 둥실 떠오르며 들어옵니다.

[적용할 곳]에 아이콘 플로트 어웨이(Icon Float Away) 호버 효과를 넣어 줘.
지금 아이콘은 위로 떠오르며 사라지고, 새 아이콘이 아래에서 떠올라 그 자리에 들어오게 부드럽게 바꿔 줘. 포인터가 벗어나면 반대로 되돌리고.
바뀌는 동안 버튼 크기는 고정하고, 키보드 포커스에도 같은 효과를 보여 줘.

버튼에 마우스를 올리면 안의 아이콘이 한 바퀴 돕니다.

[적용할 곳]에 아이콘 스핀(Icon Spin) 호버 효과를 넣어 줘.
포인터가 들어오면 요소 안의 아이콘이 부드럽게 한 바퀴 돌고, 벗어나면 반대로 돌아오게 해 줘.
버튼 전체가 아니라 아이콘만 돌리고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

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

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

마우스를 올리면 텍스트 위에 선이 왼쪽·가운데·오른쪽에서 뻗어 나옵니다.

[적용할 곳]에 오버라인 그로우(Overline Grow) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 텍스트 위의 선이 가운데에서 양옆으로 뻗어 나가고, 벗어나면 다시 가운데로 줄어들게 해 줘. 빠르고 부드럽게.
텍스트가 밀리지 않게 선 자리를 미리 확보하고, 키보드 포커스에도 같은 효과를 보여 줘.

요소가 빠르게 커졌다가 톡 튕기듯 제자리로 돌아옵니다.

[적용할 곳]에 팝(Pop) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 부풀었다가 원래 크기로 돌아오게, 작게 톡 튕기는 느낌으로 해 줘.
커진 상태로 멈추거나 반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.

요소가 안쪽으로 눌렸다가 돌아와, 실제 버튼을 누른 것 같은 느낌을 줍니다.

[적용할 곳]에 푸시(Push) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 작아졌다가 탄력 있게 원래 크기로 돌아오게, 실제 버튼을 눌러 넣은 것처럼 해 줘.
반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.

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

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

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

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

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

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

포인터를 올리면 요소의 모서리가 부드럽게 둥글어집니다.

[적용할 곳]에 라운드 코너(Round Corners) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소의 각진 모서리가 부드럽게 둥글어지고, 벗어나면 다시 각지게 해 줘. 부드럽고 빠르게.
요소 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

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

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

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

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

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

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

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

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

포인터를 올리면 요소 가장자리 안쪽에 안쪽 테두리 선이 나타납니다.

[적용할 곳]에 트림(Trim) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소 가장자리 바로 안쪽에 가는 선이 서서히 나타나고, 벗어나면 서서히 사라지게 해 줘. 은은하게, 움직임 없이.
선은 요소 안쪽에 두어 크기가 바뀌지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

선이 아래나 위 가장자리에서 미끄러져 들어와 요소에 밑줄이나 윗줄을 긋습니다.

[적용할 곳]에 언더라인 리빌(Underline Reveal) 호버 효과를 넣어 줘. 오버라인 리빌(overline reveal), 리빌(reveal)이라고도 불러.
포인터가 요소 위에 있는 동안 전체 너비의 선이 아래 가장자리 바로 밑에서 위로 미끄러져 제자리에 오고, 벗어나면 다시 아래로 미끄러져 사라지게 해 줘. 빠르고 부드럽게.
선을 가장자리에서 잘라 서서히 나타나거나 늘어나는 대신 미끄러져 나오게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

상품 이미지가 작아지며 포물선을 그리고 장바구니 아이콘으로 날아갑니다.

[적용할 곳]에 장바구니 담기 애니메이션(Add to Cart Fly)을 넣어 줘. 플라이 투 카트(fly to cart), 장바구니 추가 애니메이션(add-to-cart animation)이라고도 불러.
담기 버튼을 누르면 상품 이미지의 작은 복사본이 작아지면서 부드럽고 빠른 포물선을 그리며 장바구니 아이콘으로 날아가고, 장바구니는 개수가 바뀔 때 살짝 튀게 해 줘.
누를 때마다 한 번만 재생하고 원래 상품 카드는 움직이지 않게 해 줘. 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 날아가는 동작은 빼고 장바구니 갱신만 해 줘.

체크하면 상자 안에 체크 표시가 한 획씩 그려집니다.

[적용할 곳]에 체크박스 체크 드로우(Checkbox Check Draw) 애니메이션을 넣어 줘. 애니메이티드 체크박스(animated checkbox), 체크마크 드로우(checkmark draw)라고도 불러.
체크하면 상자가 색으로 채워지고 체크 표시가 빠르고 부드러운 한 획으로 그려지게 해 줘. 체크를 풀면 같은 방식으로 지워지게.
체크 상태를 가진 진짜 체크박스로 유지하고, 키보드로도 동작하며 포커스 링이 보이게 해 줘.

알록달록한 종이 조각이 터져 나와 흩날리며 성공을 축하합니다.

[적용할 곳]에 컨페티(Confetti) 축하 효과를 넣어 줘. 컨페티 버스트(confetti burst)라고도 불러.
알록달록한 작은 종이 조각이 버튼에서 빠르게 터져 나온 뒤, 뒤집히며 흩날려 떨어지다 사라지게 해 줘. 짧고 경쾌하게.
반복하지 말고 성공할 때마다 한 번만 터뜨리고, 페이지 클릭을 막지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.

복사 아이콘이 체크 표시로 바뀌고, 라벨이 잠시 「복사됨」으로 바뀝니다.

[적용할 곳]에 클립보드 복사 피드백(Copy-to-Clipboard Feedback) 애니메이션을 넣어 줘. 복사됨 상태(copied state), 복사 아이콘에서 체크 표시로(copy icon to checkmark)라고도 불러.
복사 버튼을 누르면 복사 아이콘이 빠르게 작아지며 사라지고 체크 표시가 그려지면서 라벨이 「복사됨」으로 바뀌고, 잠시 뒤 모두 부드럽게 원래대로 돌아오게 해 줘.
바뀌는 동안 버튼 크기를 그대로 두어 아무것도 밀리지 않게 하고, 복사된 상태를 스크린 리더에 알려 줘.

드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.

[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.

입력란에 포커스가 가거나 값이 들어가면, 플레이스홀더 라벨이 위로 올라가며 작아집니다.

[적용할 곳]에 플로팅 라벨(Floating Label)을 넣어 줘. 플로트 라벨(float label), 애니메이티드 플레이스홀더(animated placeholder)라고도 불러.
입력란에 포커스가 가거나 값이 있으면, 안에 있던 라벨이 부드럽고 빠르게 위로 미끄러지며 작아져 입력란 위쪽 가장자리에 걸치고, 입력란이 비어 있고 포커스도 없을 때만 다시 내려오게 해 줘.
입력란과 연결된 진짜 라벨로 유지하고, 입력란 높이가 바뀌지 않게 해서 폼이 밀리지 않게 해 줘.

하트 아이콘을 클릭하면 색이 채워지며 작은 입자가 터지거나 두근거립니다.

[적용할 곳]에 좋아요 / 하트 버스트(Like / Heart Burst) 애니메이션을 넣어 줘. 하트 애니메이션(heart animation), 즐겨찾기 토글(favorite toggle)이라고도 불러.
좋아요를 누르면 하트가 색으로 채워지며 통통 튀듯 커지고, 링과 작은 점들이 바깥으로 터졌다가 사라지게 해 줘. 전체적으로 빠르고 경쾌하게, 좋아요를 취소하면 하트만 조용히 비워지게.
눌림 상태를 가진 진짜 토글 버튼으로 만들고, 버스트는 켤 때만 재생해 줘.

항목을 잠시 누르고 있으면 추가 동작이나 진행 채움이 실행됩니다.

[적용할 곳]에 길게 누르기(Long Press) 인터랙션을 넣어 줘. 프레스 앤 홀드(press and hold), 터치 앤 홀드(touch and hold)라고도 불러.
누르고 있는 동안 항목이 살짝 눌려 들어가고 진행 채움이 일정한 속도로 가로질러 차오르게 해 줘. 다 차면 톡 튀어 돌아오며 메뉴를 열고, 중간에 손을 떼면 취소되고 채움이 초기화되게.
키보드와 스크린 리더 사용자도 같은 동작에 닿을 수 있는 다른 방법을 주고, 길게 누를 때 텍스트가 선택되거나 브라우저 기본 컨텍스트 메뉴가 뜨지 않게 해 줘.

새 알림이 오면 숫자 배지가 톡 튀어나오거나 통통 튀거나 두근거립니다.

[적용할 곳]에 알림 배지 바운스(Notification Badge Bounce) 애니메이션을 넣어 줘. 배지 팝(badge pop), 핑(ping)이라고도 불러.
새 알림이 오면 숫자 배지가 없던 자리에서 톡 튀어나와 빠르고 탄력 있게 두어 번 튀다가 자리 잡고, 그동안 부드러운 링이 한 번 퍼져 나가게 해 줘.
반복하지 말고 새 알림마다 한 번만 재생하고, 바뀐 숫자를 스크린 리더가 읽어 주게 해 줘.

비밀번호를 보이거나 숨길 때 눈 아이콘이 뜬 눈과 사선이 그어진 눈으로 바뀝니다.

[적용할 곳]에 비밀번호 보기 토글(Password Reveal Toggle)을 넣어 줘. 비밀번호 보이기/숨기기(show/hide password), 눈 아이콘 토글(eye icon toggle)이라고도 불러.
눈을 누르면 사선이 빠르게 지워지면서 가려진 점들이 실제 글자로 크로스페이드되고, 다시 누르면 사선이 다시 그어지며 글자가 가려지게 해 줘. 부드럽고 빠르게, 튕김 없이.
글자가 튀지 않게 입력란 너비를 고정하고, 토글은 비밀번호가 보이는지 레이블로 알려 주는 진짜 버튼으로 만들어 줘.

텍스트가 스크롤로 화면에 들어오면 포인터 화살표가 단어 둘레에 강조 상자를 그립니다.

[적용할 곳]에 포인터 하이라이트(Pointer Highlight) 효과를 넣어 줘.
텍스트가 스크롤로 화면에 들어오면 핵심 단어 둘레에 상자가 왼쪽에서 오른쪽으로 그려지고, 작은 포인터 화살표가 그 모서리를 따라 움직이게 해 줘. 부드럽고 일정하게, 누가 손으로 단어에 표시하는 것처럼.
처음 화면에 들어올 때 한 번만 텍스트를 밀어내지 않고 그리고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 상자를 바로 보여 줘.

누르는 동안 요소가 살짝 작아지고, 손을 떼면 탄력 있게 돌아옵니다.

[적용할 곳]에 프레스(Press (Button Tap Scale)) 효과를 넣어 줘. 탭 피드백(tap feedback), 프레스 상태(press state)라고도 불러.
누르는 동안 요소가 살짝 작아지고 약간 어두워졌다가, 손을 떼면 작게 튕기며 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
키보드로 누를 때와 터치할 때도 똑같이 반응하게 하고, 주변 레이아웃이 밀리지 않게 해 줘.

목록을 아래로 당기면 스피너가 나타나고, 손을 떼면 콘텐츠를 다시 불러옵니다.

[적용할 곳]에 당겨서 새로고침(Pull to Refresh) 인터랙션을 넣어 줘. 스와이프 투 리프레시(swipe to refresh)라고도 불러.
목록을 맨 위에서 아래로 당기면 약간의 저항감을 주며 손가락을 따라오고, 당기는 만큼 도는 스피너가 드러나게 해 줘. 손을 떼면 콘텐츠를 다시 불러오는 동안 스피너가 계속 돌다가, 끝나면 목록이 부드럽게 다시 올라가게.
목록이 이미 맨 위까지 스크롤된 상태에서만 시작하고, 키보드와 스크린 리더 사용자를 위해 일반 새로고침 버튼도 함께 둬.

클릭하거나 탭한 바로 그 지점에서 둥근 물결이 퍼지며 사라집니다.

[적용할 곳]에 리플(Ripple) 효과를 넣어 줘. 머티리얼 리플(material ripple), 잉크 리플(ink ripple)이라고도 불러.
클릭하거나 탭할 때마다 누른 바로 그 지점에서 부드러운 원형 물결이 요소를 덮을 때까지 퍼지며 점점 옅어지게 해 줘. 빠르고 가볍게.
물결은 요소 모양대로 잘라 내고, 빠르게 연달아 누르면 각각 새 물결이 시작되게 하고, 키보드로 누를 때는 가운데에서 시작해 줘.

원과 체크 표시가 스스로 그려지며 작업이 성공했음을 알립니다.

[적용할 곳]에 석세스 체크마크(Success Checkmark) 애니메이션을 넣어 줘. 애니메이션 성공 체크(animated success tick)라고도 불러.
원이 부드러운 한 획으로 그려진 다음 그 안에 체크 표시가 그려지고, 표시 전체가 작고 부드럽게 톡 튀게 해 줘. 차분하고 확신 있게.
작업이 성공했을 때 한 번만 재생하고, 스크린 리더가 읽어 줄 수 있는 텍스트 메시지를 함께 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 표시를 바로 보여 줘.

목록 행을 옆으로 밀면 삭제나 보관 같은 동작 버튼이 드러납니다.

[적용할 곳]에 스와이프 삭제(Swipe to Delete) 인터랙션을 넣어 줘. 스와이프 액션(swipe actions), 스와이프 투 리빌(swipe to reveal)이라고도 불러.
행을 옆으로 끌면 손가락을 그대로 따라 움직이며 뒤에 있는 보관·삭제 같은 동작 버튼이 드러나고, 버튼이 다 보이면 멈추게 해 줘. 손을 떼면 튕김 없이 부드럽게 제자리로 미끄러지게.
가로로 밀 때도 세로 스크롤이 되게 하고, 스와이프하지 않아도 키보드와 스크린 리더로 같은 동작을 할 수 있게 해 줘.

둥근 손잡이가 트랙을 따라 미끄러지고, 꺼짐과 켜짐에 따라 트랙 색이 바뀝니다.

[적용할 곳]에 토글 스위치(Toggle Switch) 애니메이션을 넣어 줘. 스위치(switch)라고도 불러.
켜고 끌 때 둥근 손잡이가 트랙 반대쪽 끝까지 부드럽게 미끄러지고, 그와 함께 트랙 색이 바뀌게 해 줘. 빠르고 또렷하게, 튕김 없이.
키보드로도 작동하는 진짜 접근성 있는 스위치(checked 상태를 가진 role="switch")로 만들어 줘.

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

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

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

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

도형이나 레이블이 스프링처럼 또는 부드럽게 늦춰진 채 포인터를 따라다닙니다.

[적용할 곳]에 커서 팔로워(Cursor Follower)를 넣어 줘. 팔로잉 포인터(following pointer), 스무스 커서(smooth cursor)라고도 불러.
작고 둥근 마커가 부드럽게 늦춰진 채 포인터를 따라가다가, 포인터가 멈춘 자리에 미끄러지듯 딱 멈추게 해 줘. 튕김 없이.
실제 포인터는 계속 보이게 두고, 마커가 절대 클릭을 막지 않게 하고, 터치 기기에서는 빼 줘.

텍스트 목록 항목에 마우스를 올리면 미리보기 이미지가 포인터를 따라다닙니다.

[적용할 곳]에 커서 이미지 호버(Cursor Image Hover) 효과를 넣어 줘. 호버 이미지 팔로우(hover image follow), 호버 시 이미지 미리보기(image preview on hover)라고도 불러.
포인터가 텍스트 목록 항목 위에 있는 동안 그 항목의 작은 미리보기 이미지가 포인터 옆에 떠서 살짝 부드럽게 늦춰진 채 따라다니고, 포인터가 다른 항목으로 옮기면 다음 이미지로 미끄러지듯 바뀌게 해 줘.
미리보기가 목록 클릭을 절대 막지 않게 하고, 터치와 키보드에서는 미리보기 없이도 목록을 온전히 쓸 수 있게 해 줘.

포인터 주변의 빛의 원이 콘텐츠를 드러내고, 나머지는 어둡게 남습니다.

[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.

포인터가 움직이면 뒤로 사라져 가는 도형들이 줄지어 남습니다.

[적용할 곳]에 커서 트레일(Cursor Trail) 효과를 넣어 줘. 마우스 트레일(mouse trail)이라고도 불러.
포인터가 움직이면 작은 점들이 짧게 줄지어 뒤에 남고, 각 점이 빠르게 줄어들며 사라지게 해 줘. 꼬리는 짧게, 지나간 길을 부드럽게 따라가는 느낌으로.
포인터가 움직일 때만 그리고, 클릭을 절대 막지 않게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빼 줘.

기본 화살표 대신 꾸민 점이나 링이 나타나고, 상호작용 요소 위에서 모양이 바뀝니다.

[적용할 곳]에 커스텀 커서(Custom Cursor)를 넣어 줘. 애니메이티드 커서(animated cursor), 커서 대체(cursor replacement)라고도 불러.
기본 화살표 대신 포인터를 정확히 따라가는 작은 점과 살짝 뒤처져 따라오는 링을 보여 주고, 링크와 버튼 위에서는 링이 부드럽게 커지게 해 줘.
터치 기기와 텍스트 입력란에서는 기본 커서를 그대로 두고, 커스텀 커서가 클릭을 절대 막지 않게 해 줘.

포인터가 가까이 오면 요소가 그쪽으로 끌려가고, 멀어지면 제자리로 튕기듯 돌아옵니다.

[적용할 곳]에 마그네틱 버튼(Magnetic Button) 효과를 넣어 줘. 마그네틱 타깃(magnetic target), 마그네틱 호버(magnetic hover)라고도 불러.
포인터가 가까이 오면 버튼이 그쪽으로 조금 끌려가고 라벨은 조금 더 움직이게 해 줘. 포인터가 떠나면 살짝 튕기며 제자리로 돌아오게.
주변 레이아웃이 밀리지 않게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 끌림을 꺼 줘.

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

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

헤더를 누를 때마다 콘텐츠 패널이 부드럽게 전체 높이까지 펼쳐지거나 0까지 접힙니다.

[적용할 곳]에 아코디언 펼치기 / 접기(Accordion Expand-Collapse) 효과를 넣어 줘. 콜랩스(collapse), 디스클로저(disclosure)라고도 불러.
헤더를 누르면 패널이 내용의 전체 높이까지 부드럽게 펼쳐지고, 다시 누르면 완전히 접히게 해 줘. 헤더의 화살표도 함께 돌아가고, 빠르고 부드럽게, 튕김 없이.
고정된 추정값이 아니라 내용의 실제 높이까지 애니메이션하고, 헤더는 펼침 상태를 알려 주는 진짜 버튼으로 만들고, 키보드로도 쓸 수 있게 해 줘.

오버레이 뒤로 반투명한 어두운 막이 서서히 나타나 페이지를 어둡게 가립니다.

[적용할 곳]에 백드롭 스크림 페이드(Backdrop Scrim Fade)를 넣어 줘. 오버레이 페이드(overlay fade), 스크림(scrim)이라고도 불러.
오버레이가 열리면 뒤쪽 페이지 위로 반투명한 어두운 막이 부드럽게 나타나되 오버레이보다 조금 느리게 나타나고, 닫힐 때 다시 사라지게 해 줘.
라이트·다크 테마 모두에서 스크림은 어둡게 유지하고, 보이는 동안에는 뒤쪽 페이지가 스크롤되거나 클릭되지 않게 해 줘.

패널이 아래 가장자리에서 밀려 올라오며, 끌어서 정해진 높이에 맞출 수 있는 경우가 많습니다.

[적용할 곳]에 바텀 시트 슬라이드 업(Bottom Sheet Slide-Up)을 넣어 줘. 바텀 드로어(bottom drawer), 시트(sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 아래 가장자리에서 밀려 올라오고, 튕김 없이 부드럽게 감속하며 자리를 잡게 해 줘.
시트가 열릴 때마다 한 번 재생하고, 닫을 때는 다시 아래로 내려가게 하고, 열려 있는 동안 키보드 포커스가 시트 안에 머물게 해 줘.

슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.

[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.

슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.

[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.

카드가 전체 상세 화면으로 커지며, 보이는 컨테이너 하나가 모양을 바꾸면서 새 내용을 드러냅니다.

[적용할 곳]에 컨테이너 트랜스폼(Container Transform) 전환을 넣어 줘. 카드에서 상세로 펼치기(card expand to detail), 확장 카드(expandable card)라고도 불러.
카드를 열면 같은 컨테이너가 전체 상세 화면까지 부드럽게 커지고, 기존 내용은 빠르게 사라지고 거의 다 커졌을 때 새 내용이 나타나게 해 줘. 닫을 때는 거꾸로 재생해.
서로 다른 두 상자를 크로스페이드하지 말고 하나로 이어진 컨테이너로 보여 주고, 열리면 포커스를 상세 화면으로 옮겨 줘.

항목을 끌면 나머지 항목이 비켜나듯 미끄러지며 새 순서로 자리 잡습니다.

[적용할 곳]에 드래그 순서 변경 리스트(Drag-to-Reorder List)를 넣어 줘. 정렬 가능한 리스트(sortable list)라고도 불러.
끄는 항목은 포인터를 바로 따라오며 살짝 떠오르고, 나머지 항목은 부드럽게 미끄러지며 비켜나게 해 줘. 놓으면 가장 가까운 자리에 빠르게 들어가게.
마우스뿐 아니라 터치도 지원하고, 키보드로 항목을 옮기는 방법도 넣어서 새 위치를 스크린 리더에 알려 줘.

사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.

[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.

레이아웃이 바뀌면 요소들이 새 위치와 크기로 부드럽게 미끄러져 갑니다.

[적용할 곳]에 FLIP 레이아웃 애니메이션(FLIP Layout Animation)을 넣어 줘. 레이아웃 애니메이션(layout animation), First-Last-Invert-Play라고도 불러.
레이아웃이 바뀌면 각 요소가 툭 튀지 않고 이전 위치에서 새 위치로 미끄러지듯 이동하게 해 줘. 처음엔 빠르게, 끝에서는 부드럽게 자리 잡도록.
매 프레임 레이아웃이 다시 계산되지 않게 transform만으로 애니메이션하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 새 레이아웃으로 바꿔 줘.

항목이 추가되면 서서히 미끄러져 들어오고, 삭제되면 애니메이션으로 빠지며 이웃 항목이 빈틈을 메웁니다.

[적용할 곳]에 리스트 아이템 등장 / 퇴장(List Item Enter/Exit) 애니메이션을 넣어 줘. 애니메이티드 리스트(animated list)라고도 불러.
새 항목은 먼저 자기 자리를 벌린 다음 서서히 미끄러져 들어오고, 삭제되는 항목은 먼저 사라진 다음 접혀서 이웃 항목이 부드럽게 빈틈을 메우게 해 줘.
삭제되는 항목은 퇴장이 끝날 때까지 자리에 남겨서, 항목을 추가하거나 지울 때 목록이 튀지 않게 해 줘.

콘텐츠 한 줄이 끊김 없이 옆으로 계속 흘러갑니다.

[적용할 곳]에 마퀴(Marquee)를 넣어 줘. 가로로 끝없이 흐르는 띠로, 티커(ticker)라고도 불러.
내용이 오른쪽에서 왼쪽으로 느리고 일정한 속도로 흐르고, 이음매가 튀지 않게 끊김 없이 반복되게 해 줘.
마우스를 올리면 멈추고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직이지 않게 해 줘.

필터나 정렬을 적용하면 그리드 타일이 재배치되거나, 사라지거나, 새 자리로 미끄러져 갑니다.

[적용할 곳]에 메이슨리 / 그리드 셔플(Masonry / Grid Shuffle) 효과를 넣어 줘. 필터형 그리드 애니메이션(filterable grid animation)이라고도 불러.
필터를 적용하면 더 이상 맞지 않는 타일은 제자리에서 작아지며 사라지고, 남은 타일은 새 자리로 부드럽게 미끄러져 가게 해 줘. 필터를 해제하면 거꾸로 재생해.
그리드 높이가 바뀌는 동안 주변 페이지가 튀지 않게 하고, 필터 컨트롤은 어떤 필터가 선택됐는지 알려 주는 진짜 버튼으로 만들어 줘.

어두워진 페이지 위로 대화상자가 가운데에서 살짝 커지며 서서히 나타납니다.

[적용할 곳]에 모달 스케일 페이드 인(Modal Scale-Fade In) 애니메이션을 넣어 줘. 대화상자 열기 애니메이션(dialog open animation), 줌 페이드 대화상자(zoom-fade dialog)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 대화상자가 가운데에서 살짝 커지며 서서히 나타나게 해 줘. 빠르고 은은하게, 튕김 없이.
대화상자가 열릴 때마다 한 번 재생하고, 포커스를 대화상자로 옮겨 그 안에 머물게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드만 써 줘.

떠 있는 메뉴가 트리거가 있는 지점에서 커지며 서서히 나타납니다.

[적용할 곳]에 팝오버 / 드롭다운 오픈(Popover / Dropdown Open) 애니메이션을 넣어 줘. 메뉴 팝(menu pop), 드롭다운 스케일 페이드(dropdown scale-fade)라고도 불러.
메뉴가 트리거 옆 모서리에서 살짝 커지면서 서서히 나타나게 해 줘. 빠르고 깔끔하게 열리고, 닫힐 때는 조금 더 빠르게 사라지게.
트리거에 붙어 있게 하고, Escape 키나 바깥 클릭으로 닫히게 하고, 열린 상태를 트리거에서 스크린 리더에 알려 줘.

요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.

[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.

밑줄이나 알약 모양 배경이 이전 탭에서 새로 선택한 탭으로 미끄러지듯 이동합니다.

[적용할 곳]에 탭 인디케이터 슬라이드(Tab Indicator Slide)를 넣어 줘. 슬라이딩 언더라인(sliding underline), 액티브 탭 인디케이터(active tab indicator)라고도 불러.
새 탭을 선택하면 밑줄이 이전 탭에서 새 탭으로 빠르게, 부드럽게 감속하며 미끄러지고, 탭 너비가 다르면 새 탭 너비에 맞게 늘어나게 해 줘.
화살표 키로 이동할 수 있는 올바른 탭 시맨틱을 지키고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 미끄러지지 않고 바로 옮겨지게 해 줘.

짧은 메시지가 화면 가장자리에서 미끄러지거나 서서히 나타나 잠시 머문 뒤 사라지고, 쌓인 토스트는 자리를 내주며 옮겨 갑니다.

[적용할 곳]에 토스트 슬라이드 인(Toast Slide-In)을 넣어 줘. 스낵바(snackbar), 토스트 알림(toast notification)이라고도 불러.
각 메시지가 화면 가장자리에서 위로 미끄러지며 서서히 나타나고 부드럽게 감속하게 해 줘. 새 토스트가 오면 이미 떠 있는 것들이 부드럽게 옮겨 가며 자리를 내주게.
포커스를 뺏지 않고 스크린 리더에 메시지를 알리고, 읽을 수 있을 만큼 충분히 띄워 두고, 마우스를 올리거나 포커스가 가면 자동 닫힘을 멈춰 줘.

잠시 마우스를 올려 두면 작은 라벨이 요소 옆에 살짝 밀려 들어오며 서서히 나타납니다.

[적용할 곳]에 툴팁 페이드(Tooltip Fade)를 넣어 줘. 툴팁 리빌(tooltip reveal)이라고도 불러.
잠시 마우스를 올려 두면 라벨이 요소 옆으로 살짝 밀려 들어오며 서서히 나타나고, 포인터가 떠나면 지연 없이 바로 사라지게 해 줘.
키보드 포커스에도 보이게 하고, Escape 키로 닫히게 하고, 스크린 리더가 읽을 수 있게 요소와 연결해 줘.

클릭한 지점에서 퍼져 나가는 원 안으로 새 화면이 드러납니다.

[적용할 곳]에 서큘러 리빌(Circular Reveal) 전환을 넣어 줘. 클립 패스 원 확장(clip-path circle expand), 테마 전환 리빌(theme toggle reveal)이라고도 불러.
누른 컨트롤에서 원이 바깥으로 커지며 그 안에 새 화면이 드러나 전체 영역을 덮게 해 줘. 부드럽고 일정하게, 시작과 끝은 완만하게.
원은 컨트롤을 누른 바로 그 자리에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 원 없이 바로 바뀌게 해 줘.

이전 페이지가 서서히 사라지는 동안 새 페이지가 같은 자리에 서서히 나타납니다.

[적용할 곳]에 크로스페이드 페이지 트랜지션(Crossfade Page Transition)을 넣어 줘. 크로스 디졸브(cross-dissolve), 페이드 트랜지션(fade transition)이라고도 불러.
페이지를 이동하면 이전 페이지가 서서히 사라지는 동시에 새 페이지가 같은 자리에 서서히 나타나게 해 줘. 부드럽고 꽤 빠르게.
페이드 중에 아무것도 밀리지 않게 두 페이지를 같은 위치에 두고, 전환 뒤에는 새 페이지의 주 제목으로 포커스를 옮겨 줘.

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

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

나가는 콘텐츠가 완전히 사라진 뒤, 들어오는 콘텐츠가 살짝 커지며 서서히 나타납니다.

[적용할 곳]에 페이드 스루(Fade Through) 페이지 전환을 넣어 줘. 페이드 스루 트랜지션(fade-through transition), 아웃 인 라우트 트랜지션(out-in route transition)이라고도 불러.
먼저 나가는 콘텐츠가 빠르게 완전히 사라지고, 그다음 들어오는 콘텐츠가 살짝 커지면서 제자리에 서서히 나타나게 해 줘.
둘이 절대 겹치지 않게 하고, 커지는 동안 들어오는 콘텐츠의 레이아웃이 밀리지 않게 해 줘.

로고나 카운터가 있는 전체 화면 인트로 레이어가 미끄러지거나 서서히 사라지며 사이트를 드러냅니다.

[적용할 곳]에 프리로더 커튼 리프트(Preloader Curtain Lift)를 넣어 줘. 스플래시 화면(splash screen), 인트로 로더(intro loader)라고도 불러.
로딩 바가 차는 동안 전체 화면 인트로 레이어를 띄워 두었다가, 위로 부드럽게 밀려 올라가며 사라지고 아래의 사이트가 살포시 자리 잡으며 드러나게 해 줘.
첫 로딩 때만 재생하고, 실제 로딩 시간보다 오래 페이지를 붙잡지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 건너뛰어 줘.

나가는 콘텐츠와 들어오는 콘텐츠가 X, Y, Z 축 중 하나를 따라 함께 움직이며 페이드되어 공간적 관계를 보여 줍니다.

[적용할 곳]에 셰어드 액시스(Shared Axis) 페이지 전환을 넣어 줘. shared axis X/Y/Z라고도 불러.
앞으로 갈 때는 이전 콘텐츠가 한쪽으로 조금 밀려나며 빠르게 사라지고, 새 콘텐츠가 반대쪽에서 밀려 들어오며 바로 뒤이어 나타나게 해 줘. 뒤로 갈 때는 방향을 반대로.
방향만 느껴질 정도로 이동 거리를 짧게 하고, 축은 탐색 방식에 맞춰 줘. 같은 계층은 가로, 단계는 세로, 깊이 들어갈 때는 앞뒤 방향으로.

썸네일 같은 짝이 되는 요소가 다음 페이지로 넘어가며 위치와 크기가 자연스럽게 바뀝니다.

[적용할 곳]에 셰어드 엘리먼트 트랜지션(Shared Element Transition)을 넣어 줘. 히어로 트랜지션(hero transition), view-transition-name morph라고도 불러.
다음 페이지로 넘어갈 때 썸네일 같은 짝이 되는 요소가 새 페이지의 자기 자리로 부드럽게 이동하며 커지고, 나머지 콘텐츠는 크로스페이드되게 해 줘. 돌아올 때는 다시 작아지게.
두 페이지의 짝이 되는 요소에 같은 식별자를 줘서 제대로 짝지어지게 하고, 브라우저가 변형을 지원하지 않으면 단순한 크로스페이드로 대신해 줘.

새 페이지가 한쪽에서 밀려 들어오고 이전 페이지는 밀려 나가며, 방향은 탐색 깊이를 따릅니다.

[적용할 곳]에 슬라이드 페이지 트랜지션(Slide Page Transition)을 넣어 줘. 푸시 / 팝(push / pop), 방향성 슬라이드(directional slide)라고도 불러.
앞으로 갈 때는 새 페이지가 옆에서 밀고 들어오고 이전 페이지는 반대쪽으로 빠져나가게, 뒤로 갈 때는 둘 다 반대 방향으로 움직이게 해 줘. 부드럽게, 시작과 끝은 완만하게.
브라우저 뒤로 가기 버튼까지 포함해 방향을 탐색 깊이에 맞추고, 슬라이드하는 동안 페이지가 가로로 스크롤되지 않게 해 줘.

이전 페이지가 커지거나 작아지며 사라지는 동안 새 페이지가 크기를 바꾸며 제자리에 자리 잡습니다.

[적용할 곳]에 줌 페이지 트랜지션(Zoom Page Transition)을 넣어 줘. 스케일 트랜지션(scale transition), 줌 인 / 아웃(zoom in / out)이라고도 불러.
안으로 들어갈 때는 이전 페이지가 살짝 커지며 사라지고 새 페이지가 조금 작은 크기에서 커지며 자리 잡게 하고, 돌아올 때는 반대로 줌 아웃되게 해 줘. 부드럽고 빠르게.
내용이 내내 읽힐 수 있게 크기 변화는 은은하게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

세로 막대들이 서로 엇갈리게 늘었다 줄었다 하며 오디오 이퀄라이저처럼 움직입니다.

[적용할 곳]에 바 로더(Bar Loader (Equalizer)) 로딩 애니메이션을 넣어 줘. bars loader, 오디오 바(audio bars)라고도 불러.
세로 막대 몇 개가 오디오 이퀄라이저처럼 서로 엇갈리게 늘었다 줄었다 하게 해 줘. 경쾌하지만 고른 박자로.
반복이 끊김 없이 이어지게 하고, 스크린 리더용 상태 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

이미지의 작고 흐린 버전이 먼저 자리를 채우고, 원본 이미지가 로드되면 선명해집니다.

[적용할 곳]에 블러 업 플레이스홀더(Blur-Up Placeholder) 이미지 로딩 효과를 넣어 줘. LQIP, 블러 플레이스홀더(blur placeholder)라고도 불러.
이미지의 아주 작고 많이 흐린 버전이 바로 이미지 자리를 채우고, 원본 이미지가 로드되면 부드럽게 꽤 빠르게 선명해지게 해 줘.
이미지의 정확한 크기를 미리 확보해서 로드될 때 아무것도 밀리지 않게 하고, 흐린 가장자리가 틀 밖으로 번지지 않게 잘라 줘.

한 줄로 놓인 점들이 차례로 튀어 오르거나, 흐려지거나, 커졌다 작아집니다.

[적용할 곳]에 바운싱 닷(Bouncing Dots)을 넣어 줘. 닷 로더(dots loader), 쓰리 닷 로더(three-dot loader)라고도 불러.
점들이 가볍고 통통 튀는 리듬으로 하나씩 차례로 뛰어올랐다 내려앉고, 잠깐 쉰 뒤 다시 반복되게 해 줘.
루프는 끊김 없이 이어지게 하고, 스크린 리더용 상태 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

작업이 진행되는 동안 버튼의 라벨이 작은 스피너로 바뀌거나 스피너가 덧붙습니다.

[적용할 곳]에 버튼 로딩 스테이트(Button Loading State)를 넣어 줘. 스피너 버튼(spinner button), 로딩 버튼(loading button)이라고도 불러.
누르면 버튼이 살짝 눌리고, 라벨이 서서히 사라지면서 작업이 도는 동안 그 자리에 작은 스피너가 보이다가, 끝나면 라벨이 돌아오게 해 줘.
로딩 중에도 버튼 너비는 그대로 두고, 여러 번 눌리지 않게 막고, 처리 중 상태를 스크린 리더에 알려 줘.

고리나 호가 계속 돌면서 무언가를 불러오는 중임을 보여 줍니다.

[적용할 곳]에 서큘러 스피너(Circular Spinner)를 넣어 줘. 스피너(spinner), 스로버(throbber)라고도 불러.
호가 흐린 고리를 따라 일정하게 돌면서 길어졌다 짧아졌다 하고, 부드럽게 끊김 없이 이어지게 해 줘.
회전은 끊김 없이 이어지게 하고, 스크린 리더용 로딩 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.

작업이 진행된 만큼 막대가 왼쪽에서 오른쪽으로 채워집니다.

[적용할 곳]에 프로그레스 바(Determinate Progress Bar)를 넣어 줘. 프로그레스 바 필(progress bar fill), 프로그레스 인디케이터(progress indicator)라고도 불러.
막대가 실제 진행에 맞춰 왼쪽에서 오른쪽으로 채워지고, 값이 바뀔 때마다 부드럽게 이어지며, 옆에 퍼센트를 보여 줘.
현재값·최솟값·최댓값을 갖춘 올바른 프로그레스 바 시맨틱을 써서 스크린 리더가 읽을 수 있게 하고, 채워진 부분이 절대 뒤로 줄어들지 않게 해 줘.

걸리는 시간을 알 수 없을 때 막대 조각이 트랙을 따라 계속 지나갑니다.

[적용할 곳]에 무한 프로그레스 바(Indeterminate Linear Progress)를 넣어 줘. 인디터미닛 프로그레스 바(indeterminate progress bar)라고도 불러.
작업이 얼마나 걸릴지 모르는 동안 짧은 조각이 트랙의 한쪽 끝에서 다른 쪽 끝으로 빠르고 부드럽게 계속 지나가게 해 줘.
조각이 트랙 안으로 완전히 들어왔다가 완전히 빠져나가게 해서 반복 이음매가 보이지 않게 하고, 스크린 리더에는 처리 중인 프로그레스 바로 표시해 줘.

긴 작업이 진행될수록 단계 목록이 하나씩 강조되거나 체크됩니다.

[적용할 곳]에 멀티 스텝 로더(Multi-Step Loader)를 넣어 줘. 스텝 로더(step loader), 체크리스트 로더(checklist loader)라고도 불러.
단계가 위에서 아래로 하나씩 켜지고, 끝날 때마다 작은 체크 표시가 톡 튀어나오게 해 줘. 차분하고 읽기 편한 속도로.
단계는 고정 타이머가 아니라 실제 작업 진행에 맞춰 넘어가게 하고, 완료된 단계를 스크린 리더에 알려 줘.

호가 고리를 따라 늘어나며 완료된 비율을 보여 줍니다.

[적용할 곳]에 프로그레스 링(Progress Ring)을 넣어 줘. 서큘러 프로그레스(circular progress), 레이디얼 프로그레스(radial progress)라고도 불러.
맨 위에서 시작한 호가 고리를 따라 시계 방향으로 늘어나며 완료 비율을 보여 주고, 멈출 때는 부드럽게 감속하면서 가운데 숫자도 함께 올라가게 해 줘.
호와 숫자가 서로 맞게 움직이게 하고, 값은 올바른 프로그레스 바 시맨틱으로 스크린 리더에 전달해 줘.

회색 자리 표시 블록이 은은하게 밝아졌다 어두워지며 로딩 중임을 알려 줍니다.

[적용할 곳]에 펄스 플레이스홀더(Pulse Placeholder)를 넣어 줘. 스켈레톤 펄스(skeleton pulse)라고도 불러.
곧 나올 콘텐츠 모양의 회색 블록들이 다 함께 천천히 밝아졌다 돌아오게 해 줘. 부드럽고 일정한 리듬으로.
자리 표시 블록은 실제 레이아웃에 맞춰서 콘텐츠가 들어올 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 가만히 두어 줘.

회색 자리 표시 도형 위로 밝은 빛줄기가 지나갑니다.

[적용할 곳]에 스켈레톤 시머(Skeleton Shimmer)를 넣어 줘. 스켈레톤 웨이브(skeleton wave), 시머 효과(shimmer effect)라고도 불러.
부드러운 빛의 띠가 회색 자리 표시 도형 위를 왼쪽에서 오른쪽으로 지나가고, 다음 번 전에 잠깐 쉬게 해 줘. 매끄럽고 느긋하게.
도형은 실제 레이아웃에 맞춰서 콘텐츠가 로드될 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지된 자리 표시만 보여 줘.

페이지 이동 중 상단의 얇은 막대가 조금씩 나아가다가 로딩이 끝나면 끝까지 채워집니다.

[적용할 곳]에 탑 로딩 바(Top Loading Bar)를 넣어 줘. 페이지 프로그레스 바(page progress bar)라고도 불러.
상단 가장자리의 얇은 막대가 페이지를 불러오는 동안 처음엔 빠르게 튀어 나갔다가 점점 느려지고, 로딩이 끝나면 끝까지 달려간 뒤 사라지게 해 줘.
로딩이 실제로 끝나기 전에는 절대 끝에 닿지 않게 하고, 페이지 콘텐츠를 가리거나 밀어내지 않게 해 줘.

말풍선 안의 점 세 개가 차례로 깜빡이거나 떠올라, 상대나 AI가 입력 중임을 보여 줍니다.

[적용할 곳]에 타이핑 인디케이터(Typing Indicator)를 넣어 줘. 타이핑 닷(typing dots)이라고도 불러.
상대가 입력하는 동안 작은 채팅 말풍선 안의 점들이 하나씩 차례로 떠오르며 밝아지게 해 줘. 부드럽고 잔잔한 리듬으로.
루프는 끊김 없이 이어지게 하고, 메시지가 도착하면 바로 말풍선을 없애고, 스크린 리더에는 점 대신 짧은 상태 문구를 전해 줘.

두 요소를 잇는 선을 따라 빛나는 펄스가 이동합니다.

[적용할 곳]에 빔 애니메이션(Animated Beam) 효과를 넣어 줘. 커넥팅 빔(connecting beam)이라고도 불러.
두 요소를 잇는 선을 따라 짧게 빛나는 펄스가 한쪽 끝에서 다른 쪽 끝으로 일정하게 이동하고 다시 시작하게 해 줘. 부드럽고 차분하게.
연결선 자체는 항상 보이게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 펄스를 멈춰 줘.

그라디언트 배경의 색이 천천히 바뀌거나 흐르거나 회전합니다.

[적용할 곳]에 그라디언트 애니메이션(Animated Gradient) 배경을 넣어 줘. 무빙 그라디언트(moving gradient), gradient animation이라고도 불러.
그라디언트 색이 영역을 가로질러 천천히, 부드럽게 끊김 없이 흘러가고, 루프가 다시 시작될 때 튀는 부분이 보이지 않게 해 줘.
위에 올라간 글자가 어느 색 위에서도 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

선이나 사각형으로 된 격자에서 칸들이 나타났다 사라지거나 깜빡입니다.

[적용할 곳]에 그리드 패턴 애니메이션(Animated Grid Pattern) 배경을 넣어 줘. 플리커링 그리드(flickering grid), 그리드 배경(grid background)이라고도 불러.
흐린 선으로 된 격자는 그대로 두고, 여기저기 흩어진 몇 칸만 서로 다른 때에 천천히 나타났다 사라지게 해 줘. 조용하고 은은하게, 한꺼번에 켜지지 않게.
콘텐츠 뒤에 두고 클릭을 가로채지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 깜빡임을 멈춰 줘.

흐릿하고 부드러운 색 띠가 오로라처럼 콘텐츠 뒤에서 일렁입니다.

[적용할 곳]에 오로라 배경(Aurora Background)을 넣어 줘. 노던 라이츠 그라디언트(northern lights gradient)라고도 불러.
흐릿하고 부드러운 색 띠들이 콘텐츠 뒤에서 천천히 떠다니고 흔들리며, 서로 겹치고 섞여 북극광처럼 보이게 해 줘. 아주 느리고 몽환적으로.
위에 있는 글자는 잘 읽히게 하고, 부드럽게 돌아가도록 매 프레임마다 띠에 블러를 다시 걸지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

가늘게 빛나는 선이 경로를 따라 이동하고, 때로는 표면에 부딪혀 터집니다.

[적용할 곳]에 배경 빔(Background Beams) 효과를 넣어 줘. 라이트 빔(light beams), 배경 라인(background lines)이라고도 불러.
흐린 곡선 경로들을 배경에 깔고, 그 위로 짧게 빛나는 줄기가 하나씩 차분하고 일정한 속도로 지나가게 해 줘.
빔들은 시차를 둬서 절대 한꺼번에 움직이지 않게 하고, 콘텐츠 뒤에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

비스듬한 타일 격자가 포인터가 지나갈 때마다 색으로 밝아집니다.

[적용할 곳]에 배경 박스(Background Boxes) 효과를 넣어 줘. 타일 호버 배경(tile hover background)이라고도 불러.
영역을 비스듬한 타일 격자로 채우고, 포인터가 지나간 타일은 바로 밝아졌다가 천천히 돌아가서 짧은 자취가 남게 해 줘.
타일은 콘텐츠 뒤에 두어 클릭을 막지 않게 하고, 터치 기기에서는 탭한 타일이 밝아지게 해 줘.

밝은 하이라이트가 카드 테두리를 따라 돌아갑니다.

[적용할 곳]에 보더 빔(Border Beam) 효과를 넣어 줘. 샤인 보더(shine border), 무빙 보더(moving border)라고도 불러.
짧고 밝은 하이라이트가 카드 테두리를 따라 일정하고 느긋한 속도로 돌고, 튀는 부분 없이 반복되게 해 줘.
효과 때문에 카드 내용이나 크기가 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빔을 멈춰 줘.

점 격자가 물결치듯 맥동하거나 빛납니다.

[적용할 곳]에 닷 패턴 글로우(Dot Pattern Glow) 배경을 넣어 줘. 점 글로우 배경(dotted glow background), 닷 그리드(dot grid)라고도 불러.
촘촘한 점 격자는 가만히 두고, 부드러운 빛의 띠가 그 위를 천천히 훑으며 지나가는 점을 밝히게 해 줘. 차분하고 은은하게.
위에 올린 콘텐츠가 잘 읽히도록 점은 흐리게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 멈춰 줘.

빛나는 램프 선이 넓어지며 아래 제목 위로 원뿔형 빛을 드리웁니다.

[적용할 곳]에 램프 효과(Lamp Effect)를 넣어 줘. 램프 글로우(lamp glow)라고도 불러.
섹션이 화면에 들어오면 가늘게 빛나는 선이 가운데서 양옆으로 넓어지며 아래 제목에 부드러운 원뿔형 빛을 드리우고, 제목은 떠오르며 서서히 나타나게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 받은 제목을 바로 보여 줘.

부드러운 빛줄기가 배경 위에서 흔들립니다.

[적용할 곳]에 라이트 레이(Light Rays) 배경을 넣어 줘. 갓 레이(god rays), 라이트 샤프트(light shafts)라고도 불러.
부드럽고 반투명한 빛줄기 여러 개가 위에서 부채꼴로 퍼지고, 조금씩 밝아졌다 어두워지며 좌우로 은은하게 흔들리게 해 줘. 느리고 분위기 있게.
빛줄기는 콘텐츠 뒤에 두고 가독성을 해치지 않을 만큼 흐리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

여러 색 점이 부드럽게 섞이며 떠다녀 유기적인 여러 색의 배경을 만듭니다.

[적용할 곳]에 메시 그라디언트(Mesh Gradient) 배경을 넣어 줘. 애니메이티드 메시 그라디언트(animated mesh gradient)라고도 불러.
부드러운 색 덩어리 여러 개가 서로 섞이며 영역 안을 천천히 떠다녀서, 배경이 유기적으로 계속 바뀌게 해 줘. 아주 느리고 부드럽게.
어떤 색이 섞여도 위의 콘텐츠가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

빛나는 꼬리를 단 사선 줄기가 카드나 섹션을 가로질러 떨어집니다.

[적용할 곳]에 유성(Meteors) 효과를 넣어 줘. 유성우(meteor shower), 별똥별(shooting stars)이라고도 불러.
사라지는 꼬리를 단 작은 줄기 몇 개가 무작위 순간에 영역을 사선으로 빠르게 가로지르고 곧 사라지게 해 줘.
포인트로만 남도록 개수는 적게 하고, 영역 가장자리에서 잘리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

미세한 점무늬 질감이 페이지를 덮고, 때로는 필름 그레인처럼 깜빡입니다.

[적용할 곳]에 노이즈 / 그레인 텍스처(Noise / Grain Texture) 오버레이를 넣어 줘. 필름 그레인(film grain), 노이즈 배경(noise background)이라고도 불러.
미세하고 옅은 점무늬 질감을 표면 위에 얹고, 필름 그레인처럼 작게 툭툭 깜빡이게 해 줘. 은은하게, 콘텐츠가 탁해 보일 만큼 강하지 않게.
클릭은 오버레이를 통과하게 하고, 질감은 매 프레임이 아니라 한 번만 만들고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춘 상태로 둬.

작은 점 여러 개가 배경을 떠다니며 서로 이어지거나 포인터에 반응합니다.

[적용할 곳]에 파티클(Particles) 배경을 넣어 줘. 플로팅 파티클(floating particles), 파티클 필드(particle field)라고도 불러.
크기가 제각각인 작은 점들이 저마다의 속도로 부드럽게 이리저리 떠돌며 천천히 흘러가게 해 줘. 차분하고 가볍게.
느린 기기에서도 가볍도록 점 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.