프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스크롤링 레터(Scrolling Letters)를 넣어 줘. 온스크롤 레터 애니메이션(on-scroll letter animations)이라고도 불러.
사용자가 섹션을 스크롤하면 제목 글자가 왼쪽부터 오른쪽으로 하나씩 다음 글자로 굴러가듯 바뀌고, 스크롤 위치에 바로 연동되게 해 줘.
위로 다시 스크롤하면 거꾸로 돌아가게 하고, 스크린 리더에는 현재 제목을 일반 텍스트로 전달해 줘.비슷한 모션
ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.ABCDEFGHIJKLMNOPQRSTUVWXYZ
안에서 스크롤해 보세요
Text Reveal (텍스트 리빌)
다른 이름 Scroll Text Reveal, Word-by-word Reveal
문단의 단어가 스크롤에 따라 흐린 상태에서 완전히 선명한 상태로 바뀝니다.
쓰는 곳
선언문이나 소개 문단
[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.ABCABCABC
안에서 스크롤해 보세요
Sliced Text (슬라이스드 텍스트)
다른 이름 On-Scroll Sliced Text
제목이 가로 조각으로 잘려, 페이지를 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀립니다.
쓰는 곳
에디토리얼 히어로
[적용할 곳]에 슬라이스드 텍스트(Sliced Text) 효과를 넣어 줘. 온스크롤 슬라이스드 텍스트(on-scroll sliced text)라고도 불러.
큰 제목을 가로 조각으로 잘라, 처음에는 온전한 단어로 맞춰져 있다가 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀리게 해 줘.
밀림을 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 스크린 리더에는 제목을 하나의 읽을 수 있는 텍스트로 유지해 줘.Text의 다른 모션
ABC DEFGH
Shimmer Text (시머 텍스트)
다른 이름 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
밝은 하이라이트가 글자 위를 반복해서 훑고 지나갑니다.
쓰는 곳
배지, 공지 필
[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.ABCDEFGHIJKLMNOP
Spinning Text (스피닝 텍스트)
다른 이름 Circular Text, Text on Circle
원을 따라 배치된 텍스트가 멈추지 않고 계속 회전합니다.
쓰는 곳
회전 배지, 스탬프
[적용할 곳]에 스피닝 텍스트(Spinning Text)를 넣어 줘. 서큘러 텍스트(circular text), 텍스트 온 서클(text on circle)이라고도 불러.
글자를 원 둘레에 고르게 배치하고, 원이 느리고 일정하게 돌며 반복이 다시 시작될 때 튀지 않게 해 줘.
스크린 리더에는 텍스트를 한 번만 일반 텍스트로 전달하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.