프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 키네틱 타이포그래피(Kinetic Typography)를 넣어 줘. 키네틱 텍스트(kinetic text)라고도 불러.
큰 글자를 반복한 줄들이 줄마다 번갈아 반대 방향으로 느리고 일정하게 옆으로 흘러, 글자 자체가 움직이는 그래픽이 되게 해 줘.
각 줄이 튀는 곳 없이 끊김 없이 반복되게 하고, 스크린 리더는 텍스트를 한 번만 읽게 하고, 사용자가 모션 줄이기(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)를 켜 두었으면 움직임 없이 보여 줘.ABCDEF
Wavy Text (웨이비 텍스트)
다른 이름 Text Wave
글자가 차례로 위아래로 흔들리며 단어 전체에 물결이 흐르는 듯한 느낌을 줍니다.
쓰는 곳
경쾌한 제목, 로딩 표시
[적용할 곳]에 웨이비 텍스트(Wavy Text) 효과를 넣어 줘. 텍스트 웨이브(text wave)라고도 불러.
글자가 차례로 위아래로 흔들려서 잔잔하고 부드러운 물결이 단어 속을 계속 흐르게 해 줘.
끊김 없이 반복하고, 스크린 리더에서는 한 단어로 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.ABCABCABCABCABC
안에서 스크롤해 보세요
Text Repetition (텍스트 반복)
다른 이름 Repeated Text Scroll
단어가 여러 겹의 복사본으로 쌓이고, 스크롤에 따라 어긋나며 움직입니다.
쓰는 곳
포트폴리오 제목
[적용할 곳]에 텍스트 반복(Text Repetition) 효과를 넣어 줘. 반복 텍스트 스크롤(repeated text scroll)이라고도 불러.
단어를 더 흐린 외곽선 복사본 여러 겹으로 복제해서, 스크롤하면 단어 뒤에서 펼쳐지고 위로 스크롤하면 다시 겹쳐지게 해 줘.
펼쳐지는 정도는 스크롤 위치에 바로 연결하고, 추가 복사본은 스크린 리더에서 숨겨 단어가 한 번만 읽히게 해 줘.ABCDEF
포인터를 움직여 보세요
Text Tilt (텍스트 틸트)
다른 이름 Perspective Text Tilt
텍스트가 마우스 위치를 따라 3D 원근감 있게 기울어집니다.
쓰는 곳
히어로 제목
[적용할 곳]에 텍스트 틸트(Text Tilt) 효과를 넣어 줘. 원근 텍스트 틸트(perspective text tilt)라고도 불러.
텍스트가 포인터 움직임을 부드럽게 따라가며 3D로 포인터 쪽으로 살짝 기울고, 포인터가 떠나면 부드럽게 평평하게 돌아오게 해 줘.
기울기는 은은하게 해서 글이 잘 읽히게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 평평하게 둬 줘.Text의 다른 모션
ABCDEF
마우스를 올려 보세요
Letter Scatter (레터 스캐터)
다른 이름 Explosive Letter Burst, Scatter Gather Letters
호버하면 글자가 흩어졌다 돌아오거나, 등장할 때 바깥으로 터져 나갑니다.
쓰는 곳
재미있는 링크
[적용할 곳]에 레터 스캐터(Letter Scatter) 호버 효과를 넣어 줘. 스캐터 개더 레터(scatter gather letters), 익스플로시브 레터 버스트(explosive letter burst)라고도 불러.
포인터가 글자 위로 오면 글자마다 제각각의 방향으로 살짝 회전하며 조금씩 날아가고, 포인터가 떠나면 부드럽게 다시 모여 단어가 되게 해 줘.
글자가 움직이는 동안 레이아웃에서 단어가 차지하는 자리는 고정하고, 스크린 리더는 한 단어로 읽게 하고, 키보드 포커스에도 같은 효과를 보여 줘.ABCDEFABCDEF
Line Shadow Text (라인 섀도 텍스트)
다른 이름 Text Shadow Animation, Dancing Shadow
글자 뒤의 줄무늬 또는 어긋난 그림자가 한 방향으로 움직입니다.
쓰는 곳
굵직한 디스플레이 제목
[적용할 곳]에 라인 섀도 텍스트(Line Shadow Text) 효과를 넣어 줘. 텍스트 섀도 애니메이션(text shadow animation), 댄싱 섀도(dancing shadow)라고도 불러.
글자 뒤에서 얇은 사선 줄무늬로 된 어긋난 그림자가 느리고 끊임없이 미끄러지고, 글자 자체는 가만히 선명하게 있게 해 줘.
줄무늬 움직임은 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 그림자를 멈춰 줘.Liquid Fill Text (리퀴드 필 텍스트)
다른 이름 Water Fill Text
글자 안이 출렁이며 차오르는 액체로 채워집니다.
쓰는 곳
로딩 표시, 재미있는 제목
[적용할 곳]에 리퀴드 필 텍스트(Liquid Fill Text) 효과를 넣어 줘. 워터 필 텍스트(water fill text)라고도 불러.
외곽선만 있는 글자 안에 액체가 차고, 물결치는 수면이 옆으로 흘러가면서 수위가 천천히 오르내리는 부드러운 반복이 되게 해 줘.
스크린 리더가 읽을 수 있게 단어는 실제 텍스트로 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 액체를 일정한 수위에 멈춰 줘.