Squiggly Text (스퀴글리 텍스트)

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

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

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

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

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

[적용할 곳]에 멜팅 텍스트(Melting Text) 효과를 넣어 줘.
글자가 천천히 아래로 처지면서 그 밑으로 방울이 늘어져 녹아내리는 것처럼 보이다가, 녹은 모습 그대로 멈추게 해 줘.
텍스트가 화면에 들어올 때 한 번만 재생하고, 끝에도 단어를 읽을 수 있게 하고, 사용자가 모션 줄이기(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로 굴러 넘어가며 뒷면의 새 글자를 보여 주고, 한 글자씩 빠르고 부드럽게 훑듯이 이어지다가 포인터가 떠나면 다시 돌아오게 해 줘.
넘어가는 동안 텍스트 상자 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.