SVG Displacement Distortion (SVG 디스플레이스먼트 디스토션)

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

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

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

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

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

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

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

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

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

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

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

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