Shape Morph (셰이프 모프)

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

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

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

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

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

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

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

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

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

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

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

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