프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 텍스트 교체(Text Replacement) 효과를 넣어 줘. 텍스트 스왑(text swap)이라고도 불러.
텍스트가 바뀔 때 기존 글자는 위로 미끄러져 빠지고 새 글자는 아래에서 들어오게, 한 글자씩 빠르고 부드러운 물결처럼 이어지게 해 줘.
바뀌는 동안 텍스트 박스 크기가 튀지 않게 하고, 스크린 리더에는 새 텍스트만 읽어 주게 해 줘.비슷한 모션
ABDEFGHIJKLDEFMN
Word Rotate (워드 로테이트)
다른 이름 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
문장 속 한 단어가 슬라이드, 플립, 페이드로 목록의 다음 단어와 바뀝니다.
쓰는 곳
히어로 태그라인
[적용할 곳]에 워드 로테이트(Word Rotate) 효과를 넣어 줘. 회전 단어(rotating words), 플립 단어(flip words)라고도 불러.
줄 안의 한 단어가 위로 미끄러져 빠지고 목록의 다음 단어가 아래에서 들어오게 하고, 다음 교체 전에 각 단어에서 잠시 멈추게 해 줘.
단어 너비가 달라도 줄의 나머지가 튀지 않게 하고, 스크린 리더가 교체될 때마다 읽지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 교체를 멈춰 줘.ABCDEFGHI
Morphing Text (모핑 텍스트)
다른 이름 Text Morph
한 단어가 같은 자리에서 흐려지며 다음 단어로 녹아들듯 바뀝니다.
쓰는 곳
히어로 태그라인
[적용할 곳]에 모핑 텍스트(Morphing Text) 효과를 넣어 줘. 텍스트 모프(text morph)라고도 불러.
한 단어가 같은 자리에서 흐려지며 끈적하고 부드럽게 섞여 다음 단어로 녹아들고, 다음 전환 전에 잠깐 멈춰 있게 해 줘.
단어가 끊김 없이 순환되게 하고, 스크린 리더는 단어를 일반 텍스트로 읽게 하고, 사용자가 모션 줄이기(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)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABCD EFGHI JKLM
Mask Reveal (마스크 리빌)
다른 이름 Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
텍스트가 잘린 경계선 뒤에서 미끄러져 올라와, 아무것도 없던 곳에서 나타나는 느낌을 줍니다.
쓰는 곳
에디토리얼 헤드라인
[적용할 곳]에 마스크 리빌(Mask Reveal) 텍스트 등장 효과를 넣어 줘. 라인 마스크 리빌(line mask reveal), 텍스트 마스킹(text masking)이라고도 불러.
각 줄이 보이지 않는 경계선 뒤에서 미끄러져 올라와 아무것도 없던 곳에서 나타나듯, 한 줄씩 차례로 빠르고 부드럽게, 튕기는 느낌 없이 나오게 해 줘.
텍스트가 스크롤로 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 바로 보여 줘.Text의 다른 모션
ABCDEFGHIJKLMNOPQRSTUVWXYZ
안에서 스크롤해 보세요
Text Reveal (텍스트 리빌)
다른 이름 Scroll Text Reveal, Word-by-word Reveal
문단의 단어가 스크롤에 따라 흐린 상태에서 완전히 선명한 상태로 바뀝니다.
쓰는 곳
선언문이나 소개 문단
[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.ABCDEFGHIJKL
포인터를 움직여 보세요
Text Reveal Card (텍스트 리빌 카드)
다른 이름 Spotlight Text Reveal
카드 위로 포인터를 움직이면 마스크 경계나 스포트라이트 아래에 숨은 텍스트가 드러납니다.
쓰는 곳
기능 소개 카드
[적용할 곳]에 텍스트 리빌 카드(Text Reveal Card) 효과를 넣어 줘. 스포트라이트 텍스트 리빌(spotlight text reveal)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.