프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.비슷한 모션
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (텍스트 생성)
다른 이름 Text Generate Effect
페이지가 로드될 때 단어가 차례로 서서히 나타나며, 흔히 흐림이 걷히면서 글이 생성되는 듯한 느낌을 줍니다.
쓰는 곳
AI 느낌의 소개 문구
[적용할 곳]에 텍스트 생성(Text Generate) 효과를 넣어 줘.
단어가 하나씩 차례로 나타나면서 각 단어의 부드러운 흐림이 걷혀, 글이 생성되는 것처럼 보이게 해 줘. 일정하고 차분하게.
로드될 때 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
마우스를 올려 보세요
Text Scramble (텍스트 스크램블)
다른 이름 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
텍스트가 계속 바뀌는 무작위 문자로 대체되었다가 점차 최종 단어로 맞춰집니다.
쓰는 곳
테크 느낌의 히어로 제목, 링크 호버
[적용할 곳]에 텍스트 스크램블(Text Scramble) 호버 효과를 넣어 줘. 텍스트 디코드(text decode), 암호화 텍스트(encrypted text)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.Typing Indicator (타이핑 인디케이터)
다른 이름 Typing dots, Chat is typing
말풍선 안의 점 세 개가 차례로 깜빡이거나 떠올라, 상대나 AI가 입력 중임을 보여 줍니다.
쓰는 곳
채팅, AI 어시스턴트
[적용할 곳]에 타이핑 인디케이터(Typing Indicator)를 넣어 줘. 타이핑 닷(typing dots)이라고도 불러.
상대가 입력하는 동안 작은 채팅 말풍선 안의 점들이 하나씩 차례로 떠오르며 밝아지게 해 줘. 부드럽고 잔잔한 리듬으로.
루프는 끊김 없이 이어지게 하고, 메시지가 도착하면 바로 말풍선을 없애고, 스크린 리더에는 점 대신 짧은 상태 문구를 전해 줘.aBcD
포인터를 움직여 보세요
Adaptive Caret (어댑티브 캐럿)
다른 이름 Cursor: Adaptive caret size
텍스트 캐럿이 옆에 있는 글자 크기에 맞춰 커지거나 작아집니다.
쓰는 곳
에디터, 타이핑 효과
[적용할 곳]에 어댑티브 캐럿(Adaptive Caret) 효과를 넣어 줘. 어댑티브 캐럿 크기(adaptive caret size)라고도 불러.
텍스트 캐럿이 포인터에 가장 가까운 글자 앞으로 옮겨 가서 그 글자 높이에 맞게 빠르게 늘어나거나 줄어들게 해 줘. 부드럽고 경쾌하게 크기가 바뀌고, 튕김 없이.
텍스트 자체는 밀리지 않게 하고, 캐럿이 포인터를 따라가듯 키보드 이동도 똑같이 따라가게 해 줘.Text의 다른 모션
ABC DEF
마우스를 올려 보세요
Underline Draw (언더라인 드로우)
다른 이름 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
호버하면 링크 아래에 한쪽 끝이나 가운데에서 밑줄이 자라납니다.
쓰는 곳
내비게이션 링크, 본문 링크
[적용할 곳]에 언더라인 드로우(Underline Draw) 호버 효과를 넣어 줘. 애니메이션 밑줄(animated underline), 호버 밑줄 애니메이션(hover underline animation)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABCDEF
마우스를 올려 보세요
Variable Font Weight Animation (가변 폰트 웨이트 애니메이션)
다른 이름 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
가변 폰트의 축을 이용해 글자가 부드럽게 굵어지거나 가늘어집니다(너비나 기울기가 바뀌기도 합니다).
쓰는 곳
인터랙티브 제목
[적용할 곳]에 가변 폰트 웨이트 애니메이션(Variable Font Weight Animation) 호버 효과를 넣어 줘. 폰트 웨이트 시프트(font weight shift)라고도 불러.
포인터가 텍스트 위에 있는 동안 글자가 왼쪽에서 오른쪽으로 부드러운 물결처럼 차례로 굵어지고, 포인터가 떠나면 다시 가늘어지게 해 줘.
굵기가 튀지 않고 부드럽게 바뀌도록 가변 폰트를 쓰고, 제목이 넓어지면서 주변 콘텐츠를 밀어내지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.Video Text (비디오 텍스트)
다른 이름 Text Video Mask
큰 글자가 창처럼 되어 그 안에서 재생 중인 영상이 보입니다.
쓰는 곳
히어로 제목
[적용할 곳]에 비디오 텍스트(Video Text) 효과를 넣어 줘. 텍스트 비디오 마스크(text video mask)라고도 불러.
크고 굵은 글자가 재생 중인 영상을 보여 주는 창이 되어, 움직이는 화면이 글자 모양 안에서만 보이게 해 줘.
영상은 음소거하고 컨트롤 없이 반복 재생하고, 스크린 리더를 위해 단어를 실제 텍스트로 제공하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지 화면을 보여 줘.