프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.비슷한 모션
Stagger (스태거)
다른 이름 Staggered Animation, Cascade
그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.
쓰는 곳
리스트, 그리드, 내비게이션 메뉴, 검색 결과
[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (텍스트 생성)
다른 이름 Text Generate Effect
페이지가 로드될 때 단어가 차례로 서서히 나타나며, 흔히 흐림이 걷히면서 글이 생성되는 듯한 느낌을 줍니다.
쓰는 곳
AI 느낌의 소개 문구
[적용할 곳]에 텍스트 생성(Text Generate) 효과를 넣어 줘.
단어가 하나씩 차례로 나타나면서 각 단어의 부드러운 흐림이 걷혀, 글이 생성되는 것처럼 보이게 해 줘. 일정하고 차분하게.
로드될 때 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.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)를 켜 두었으면 움직임 없이 바로 보여 줘.ABCDEF
Wavy Text (웨이비 텍스트)
다른 이름 Text Wave
글자가 차례로 위아래로 흔들리며 단어 전체에 물결이 흐르는 듯한 느낌을 줍니다.
쓰는 곳
경쾌한 제목, 로딩 표시
[적용할 곳]에 웨이비 텍스트(Wavy Text) 효과를 넣어 줘. 텍스트 웨이브(text wave)라고도 불러.
글자가 차례로 위아래로 흔들려서 잔잔하고 부드러운 물결이 단어 속을 계속 흐르게 해 줘.
끊김 없이 반복하고, 스크린 리더에서는 한 단어로 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.Text의 다른 모션
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
Squiggly Text (스퀴글리 텍스트)
다른 이름 Wobbly Text, Turbulence Text
SVG 디스플레이스먼트 필터로 글자 가장자리가 손으로 그린 듯 꿈틀거립니다.
쓰는 곳
스케치풍이나 발랄한 제목
[적용할 곳]에 스퀴글리 텍스트(Squiggly Text) 효과를 넣어 줘. 워블리 텍스트(wobbly text), 터뷸런스 텍스트(turbulence text)라고도 불러.
글자 가장자리가 1초에 여러 번 손으로 다시 그린 것처럼 살짝 꿈틀거리게 해 줘. 부드러운 물결이 아니라 은은하게 자글거리는 느낌으로.
글자는 읽을 수 있게 유지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.ABC DEFGHI JKLMNO PQR
안에서 스크롤해 보세요
Sticky Text Fade (스티키 텍스트 페이드)
다른 이름 Sticky Scroll Text Opacity Fade
텍스트는 고정된 채, 스크롤 진행에 따라 줄이 서서히 나타났다 사라집니다.
쓰는 곳
스크롤리텔링
[적용할 곳]에 스티키 텍스트 페이드(Sticky Text Fade) 효과를 넣어 줘. 스티키 스크롤 텍스트 오퍼시티 페이드(sticky scroll text opacity fade)라고도 불러.
섹션을 스크롤하는 동안 텍스트 블록은 제자리에 고정되고, 줄이 스크롤 진행에 따라 한 줄씩 서서히 나타났다 사라지게 해 줘.
페이드를 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 투명도와 상관없이 모든 줄을 스크린 리더가 읽을 수 있게 해 줘.