Text Generate (텍스트 생성)

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

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

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

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

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

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

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

[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(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)이라고도 불러.
텍스트가 곡선 위에 놓이고, 사용자가 스크롤하면 그 곡선을 따라 미끄러지게 해 줘. 아래로 스크롤하면 앞으로, 위로 스크롤하면 뒤로 가게.
움직임은 지연 없이 스크롤 위치에 바로 연결하고, 스크린 리더에서는 일반 텍스트로 읽히게 해 줘.