Underline Draw (언더라인 드로우)

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

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

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

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

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

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

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

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

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

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

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

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

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

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