프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 텍스트 반복(Text Repetition) 효과를 넣어 줘. 반복 텍스트 스크롤(repeated text scroll)이라고도 불러.
단어를 더 흐린 외곽선 복사본 여러 겹으로 복제해서, 스크롤하면 단어 뒤에서 펼쳐지고 위로 스크롤하면 다시 겹쳐지게 해 줘.
펼쳐지는 정도는 스크롤 위치에 바로 연결하고, 추가 복사본은 스크린 리더에서 숨겨 단어가 한 번만 읽히게 해 줘.비슷한 모션
ABCDEFABCDEF
Line Shadow Text (라인 섀도 텍스트)
다른 이름 Text Shadow Animation, Dancing Shadow
글자 뒤의 줄무늬 또는 어긋난 그림자가 한 방향으로 움직입니다.
쓰는 곳
굵직한 디스플레이 제목
[적용할 곳]에 라인 섀도 텍스트(Line Shadow Text) 효과를 넣어 줘. 텍스트 섀도 애니메이션(text shadow animation), 댄싱 섀도(dancing shadow)라고도 불러.
글자 뒤에서 얇은 사선 줄무늬로 된 어긋난 그림자가 느리고 끊임없이 미끄러지고, 글자 자체는 가만히 선명하게 있게 해 줘.
줄무늬 움직임은 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 그림자를 멈춰 줘.A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
안에서 스크롤해 보세요
Text Marquee on Scroll (스크롤 텍스트 마퀴)
다른 이름 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
페이지를 세로로 스크롤하면 큰 텍스트 줄이 가로로 미끄러집니다.
쓰는 곳
브랜드 문구, 히어로 섹션
[적용할 곳]에 스크롤 텍스트 마퀴(Text Marquee on Scroll)를 넣어 줘. scroll text marquee,스크롤 벨로시티 텍스트(scroll velocity text)라고도 불러.
페이지를 아래로 내리면 큰 텍스트 줄이 옆으로 미끄러지고, 줄마다 번갈아 반대 방향으로 움직이며, 위로 올리면 되돌아가게 해 줘.
움직임은 스크롤 위치에 연결하고, 긴 줄 때문에 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (키네틱 타이포그래피)
다른 이름 Kinetic Text
글자가 고정된 문구가 아니라 움직이는 그래픽 요소처럼 커지고, 움직이고, 회전합니다.
쓰는 곳
브랜드 히어로 섹션
[적용할 곳]에 키네틱 타이포그래피(Kinetic Typography)를 넣어 줘. 키네틱 텍스트(kinetic text)라고도 불러.
큰 글자를 반복한 줄들이 줄마다 번갈아 반대 방향으로 느리고 일정하게 옆으로 흘러, 글자 자체가 움직이는 그래픽이 되게 해 줘.
각 줄이 튀는 곳 없이 끊김 없이 반복되게 하고, 스크린 리더는 텍스트를 한 번만 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Text의 다른 모션
AWBXCYDZ
Text Replacement (텍스트 교체)
다른 이름 Text Swap
기존 텍스트가 애니메이션과 함께 빠져나가고 새 텍스트로 바뀝니다.
쓰는 곳
바뀌는 레이블
[적용할 곳]에 텍스트 교체(Text Replacement) 효과를 넣어 줘. 텍스트 스왑(text swap)이라고도 불러.
텍스트가 바뀔 때 기존 글자는 위로 미끄러져 빠지고 새 글자는 아래에서 들어오게, 한 글자씩 빠르고 부드러운 물결처럼 이어지게 해 줘.
바뀌는 동안 텍스트 박스 크기가 튀지 않게 하고, 스크린 리더에는 새 텍스트만 읽어 주게 해 줘.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)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.