프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.비슷한 모션
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (텍스트 생성)
다른 이름 Text Generate Effect
페이지가 로드될 때 단어가 차례로 서서히 나타나며, 흔히 흐림이 걷히면서 글이 생성되는 듯한 느낌을 줍니다.
쓰는 곳
AI 느낌의 소개 문구
[적용할 곳]에 텍스트 생성(Text Generate) 효과를 넣어 줘.
단어가 하나씩 차례로 나타나면서 각 단어의 부드러운 흐림이 걷혀, 글이 생성되는 것처럼 보이게 해 줘. 일정하고 차분하게.
로드될 때 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.ABC DEFGHI JKLMNO PQR
안에서 스크롤해 보세요
Sticky Text Fade (스티키 텍스트 페이드)
다른 이름 Sticky Scroll Text Opacity Fade
텍스트는 고정된 채, 스크롤 진행에 따라 줄이 서서히 나타났다 사라집니다.
쓰는 곳
스크롤리텔링
[적용할 곳]에 스티키 텍스트 페이드(Sticky Text Fade) 효과를 넣어 줘. 스티키 스크롤 텍스트 오퍼시티 페이드(sticky scroll text opacity fade)라고도 불러.
섹션을 스크롤하는 동안 텍스트 블록은 제자리에 고정되고, 줄이 스크롤 진행에 따라 한 줄씩 서서히 나타났다 사라지게 해 줘.
페이드를 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 투명도와 상관없이 모든 줄을 스크린 리더가 읽을 수 있게 해 줘.A
안에서 스크롤해 보세요
Scroll-Linked Animation (스크롤 연동 애니메이션)
다른 이름 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
애니메이션 진행이 스크롤 위치에 바로 묶여 있어, 앞으로 스크롤하면 재생되고 뒤로 스크롤하면 되감깁니다.
쓰는 곳
스토리텔링 페이지, 진행 효과
[적용할 곳]에 스크롤 연동 애니메이션(Scroll-Linked Animation)을 넣어 줘. 스크롤 드리븐 애니메이션(scroll-driven animation), 스크롤 스크럽(scroll scrub)이라고도 불러.
애니메이션이 스크롤 위치에 정확히 맞춰 움직여서, 아래로 내리면 앞으로 재생되고 위로 올리면 그 자리에서 되감기게 해 줘. 시간 기반 이징은 따로 넣지 마.
애니메이션 전체를 분명한 스크롤 구간에 맞추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
안에서 스크롤해 보세요
Scrolling Letters (스크롤링 레터)
다른 이름 On-Scroll Letter Animations
사용자가 섹션을 스크롤할 때 제목 글자가 차례로 섞이거나 움직입니다.
쓰는 곳
섹션 표시
[적용할 곳]에 스크롤링 레터(Scrolling Letters)를 넣어 줘. 온스크롤 레터 애니메이션(on-scroll letter animations)이라고도 불러.
사용자가 섹션을 스크롤하면 제목 글자가 왼쪽부터 오른쪽으로 하나씩 다음 글자로 굴러가듯 바뀌고, 스크롤 위치에 바로 연동되게 해 줘.
위로 다시 스크롤하면 거꾸로 돌아가게 하고, 스크린 리더에는 현재 제목을 일반 텍스트로 전달해 줘.Text의 다른 모션
ABCDEFGHIJKL
포인터를 움직여 보세요
Text Reveal Card (텍스트 리빌 카드)
다른 이름 Spotlight Text Reveal
카드 위로 포인터를 움직이면 마스크 경계나 스포트라이트 아래에 숨은 텍스트가 드러납니다.
쓰는 곳
기능 소개 카드
[적용할 곳]에 텍스트 리빌 카드(Text Reveal Card) 효과를 넣어 줘. 스포트라이트 텍스트 리빌(spotlight text reveal)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.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)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABCDEF
포인터를 움직여 보세요
Text Tilt (텍스트 틸트)
다른 이름 Perspective Text Tilt
텍스트가 마우스 위치를 따라 3D 원근감 있게 기울어집니다.
쓰는 곳
히어로 제목
[적용할 곳]에 텍스트 틸트(Text Tilt) 효과를 넣어 줘. 원근 텍스트 틸트(perspective text tilt)라고도 불러.
텍스트가 포인터 움직임을 부드럽게 따라가며 3D로 포인터 쪽으로 살짝 기울고, 포인터가 떠나면 부드럽게 평평하게 돌아오게 해 줘.
기울기는 은은하게 해서 글이 잘 읽히게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 평평하게 둬 줘.