프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 텍스트 스크램블(Text Scramble) 호버 효과를 넣어 줘. 텍스트 디코드(text decode), 암호화 텍스트(encrypted text)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.비슷한 모션
ABC DEFG
Typewriter (타자기 효과)
다른 이름 Typing Animation, Typewriter Effect, Typing Text
글자가 타이핑하듯 하나씩 나타나고, 보통 그 뒤에 깜빡이는 커서가 따라옵니다.
쓰는 곳
히어로 헤드라인, 태그라인
[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (텍스트 생성)
다른 이름 Text Generate Effect
페이지가 로드될 때 단어가 차례로 서서히 나타나며, 흔히 흐림이 걷히면서 글이 생성되는 듯한 느낌을 줍니다.
쓰는 곳
AI 느낌의 소개 문구
[적용할 곳]에 텍스트 생성(Text Generate) 효과를 넣어 줘.
단어가 하나씩 차례로 나타나면서 각 단어의 부드러운 흐림이 걷혀, 글이 생성되는 것처럼 보이게 해 줘. 일정하고 차분하게.
로드될 때 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (스플릿 플랩 텍스트)
다른 이름 Text Flipping Board, Flip Board, Vestaboard display
공항 출발 안내판처럼 글자가 차르르 넘어가다 목표 글자에서 멈춥니다.
쓰는 곳
상태 보드, 레트로 디스플레이
[적용할 곳]에 스플릿 플랩 텍스트(Split-Flap Text) 효과를 넣어 줘. 텍스트 플리핑 보드(text flipping board), 플립 보드(flip board)라고도 불러.
각 글자 칸이 알파벳을 빠르게 넘기다 목표 글자에서 멈추고, 칸들이 왼쪽부터 오른쪽으로 차례로 자리 잡게 해 줘.
텍스트가 나타나거나 바뀔 때마다 한 번씩 실행하고, 스크린 리더에는 최종 텍스트만 읽어 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 넘기지 말고 최종 텍스트를 바로 보여 줘.ABCDEF
마우스를 올려 보세요
Glitch Text (글리치 텍스트)
다른 이름 Text Glitch, RGB Split Glitch
글자가 고장 난 신호처럼 조각나 어긋나고 빨강·청록 색이 갈라지며 떨립니다.
쓰는 곳
사이버펑크·게임 분위기의 제목
[적용할 곳]에 글리치 텍스트(Glitch Text) 호버 효과를 넣어 줘. 텍스트 글리치(text glitch), RGB 스플릿 글리치(RGB split glitch)라고도 불러.
포인터가 글자 위에 있는 동안 빠르고 날카롭게 툭툭 떨리면서, 얇은 가로 조각이 옆으로 튀고 색이 다른 복사본 두 개가 고장 난 신호처럼 갈라졌다가, 포인터가 떠나면 제자리로 돌아오게 해 줘.
스크린 리더가 복사본을 읽지 않게 실제 텍스트는 문서에 한 번만 두고, 키보드 포커스에도 같은 효과를 보여 줘.Text의 다른 모션
ABCDEF
포인터를 움직여 보세요
Text Tilt (텍스트 틸트)
다른 이름 Perspective Text Tilt
텍스트가 마우스 위치를 따라 3D 원근감 있게 기울어집니다.
쓰는 곳
히어로 제목
[적용할 곳]에 텍스트 틸트(Text Tilt) 효과를 넣어 줘. 원근 텍스트 틸트(perspective text tilt)라고도 불러.
텍스트가 포인터 움직임을 부드럽게 따라가며 3D로 포인터 쪽으로 살짝 기울고, 포인터가 떠나면 부드럽게 평평하게 돌아오게 해 줘.
기울기는 은은하게 해서 글이 잘 읽히게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 평평하게 둬 줘.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)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.