프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 마스크 리빌(Mask Reveal) 텍스트 등장 효과를 넣어 줘. 라인 마스크 리빌(line mask reveal), 텍스트 마스킹(text masking)이라고도 불러.
각 줄이 보이지 않는 경계선 뒤에서 미끄러져 올라와 아무것도 없던 곳에서 나타나듯, 한 줄씩 차례로 빠르고 부드럽게, 튕기는 느낌 없이 나오게 해 줘.
텍스트가 스크롤로 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 바로 보여 줘.비슷한 모션
ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.A
Clip Reveal (클립 리빌)
다른 이름 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path나 마스크가 가장자리나 한 점에서 넓어지며 이미지나 텍스트를 차츰 드러냅니다.
쓰는 곳
이미지, 헤드라인 등장
[적용할 곳]에 클립 리빌(Clip Reveal) 등장 효과를 넣어 줘. 마스크 리빌(mask reveal), 와이프 리빌(wipe reveal), 이미지 리빌(image reveal)이라고도 불러.
잘라 내는 경계선이 왼쪽에서 오른쪽으로 쓸고 지나가며, 내용은 가만히 있는 채로 차츰 드러나게 해 줘. 매끄럽게, 시작과 끝은 부드럽게.
아무것도 밀리지 않게 처음부터 요소 자리를 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전부 드러난 상태로 보여 줘.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)를 켜 두었으면 교체를 멈춰 줘.AWBXCYDZ
Text Replacement (텍스트 교체)
다른 이름 Text Swap
기존 텍스트가 애니메이션과 함께 빠져나가고 새 텍스트로 바뀝니다.
쓰는 곳
바뀌는 레이블
[적용할 곳]에 텍스트 교체(Text Replacement) 효과를 넣어 줘. 텍스트 스왑(text swap)이라고도 불러.
텍스트가 바뀔 때 기존 글자는 위로 미끄러져 빠지고 새 글자는 아래에서 들어오게, 한 글자씩 빠르고 부드러운 물결처럼 이어지게 해 줘.
바뀌는 동안 텍스트 박스 크기가 튀지 않게 하고, 스크린 리더에는 새 텍스트만 읽어 주게 해 줘.Text의 다른 모션
Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text (매트릭스 텍스트)
다른 이름 Digital Rain Text
초록색 글자가 매트릭스의 코드 비처럼 세로줄을 따라 떨어집니다.
쓰는 곳
해커 콘셉트
[적용할 곳]에 매트릭스 텍스트(Matrix Text) 효과를 넣어 줘. 디지털 레인 텍스트(digital rain text)라고도 불러.
글자 열이 저마다 조금씩 다른 속도로 꾸준히 떨어지고, 맨 앞 글자는 밝게 빛나며 그 뒤로 꼬리가 서서히 사라지게 해 줘.
스크린 리더에는 숨긴 장식으로 다루고, 가볍게 유지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.ABCDEF
글자가 녹아내리듯 아래로 흘러내리며 늘어집니다.
쓰는 곳
호러나 이색 타이틀
[적용할 곳]에 멜팅 텍스트(Melting Text) 효과를 넣어 줘.
글자가 천천히 아래로 처지면서 그 밑으로 방울이 늘어져 녹아내리는 것처럼 보이다가, 녹은 모습 그대로 멈추게 해 줘.
텍스트가 화면에 들어올 때 한 번만 재생하고, 끝에도 단어를 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.ABCDEFGHI
Morphing Text (모핑 텍스트)
다른 이름 Text Morph
한 단어가 같은 자리에서 흐려지며 다음 단어로 녹아들듯 바뀝니다.
쓰는 곳
히어로 태그라인
[적용할 곳]에 모핑 텍스트(Morphing Text) 효과를 넣어 줘. 텍스트 모프(text morph)라고도 불러.
한 단어가 같은 자리에서 흐려지며 끈적하고 부드럽게 섞여 다음 단어로 녹아들고, 다음 전환 전에 잠깐 멈춰 있게 해 줘.
단어가 끊김 없이 순환되게 하고, 스크린 리더는 단어를 일반 텍스트로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 순환을 멈춰 줘.