프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 레터 스캐터(Letter Scatter) 호버 효과를 넣어 줘. 스캐터 개더 레터(scatter gather letters), 익스플로시브 레터 버스트(explosive letter burst)라고도 불러.
포인터가 글자 위로 오면 글자마다 제각각의 방향으로 살짝 회전하며 조금씩 날아가고, 포인터가 떠나면 부드럽게 다시 모여 단어가 되게 해 줘.
글자가 움직이는 동안 레이아웃에서 단어가 차지하는 자리는 고정하고, 스크린 리더는 한 단어로 읽게 하고, 키보드 포커스에도 같은 효과를 보여 줘.비슷한 모션
ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.A
클릭해 보세요
Confetti (컨페티)
다른 이름 Confetti burst, Celebration
알록달록한 종이 조각이 터져 나와 흩날리며 성공을 축하합니다.
쓰는 곳
구매 완료, 목표 달성
[적용할 곳]에 컨페티(Confetti) 축하 효과를 넣어 줘. 컨페티 버스트(confetti burst)라고도 불러.
알록달록한 작은 종이 조각이 버튼에서 빠르게 터져 나온 뒤, 뒤집히며 흩날려 떨어지다 사라지게 해 줘. 짧고 경쾌하게.
반복하지 말고 성공할 때마다 한 번만 터뜨리고, 페이지 클릭을 막지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.ABCD
Tracking In (트래킹 인)
다른 이름 Text Tracking In, Letter-spacing In
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 나타나면서 보통 자간으로 좁혀집니다.
쓰는 곳
헤드라인 텍스트 등장
[적용할 곳]에 트래킹 인(Tracking In) 텍스트 애니메이션을 넣어 줘. text tracking in, letter-spacing in이라고도 불러.
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 완전히 보이게 되면서 보통 자간으로 좁혀지게 해 줘. 부드럽게, 끝에서 느려지게.
자간이 바뀌는 동안 텍스트를 가운데 정렬된 한 줄로 유지해 주변 레이아웃이 밀리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 보통 자간으로 보여 줘.Text의 다른 모션
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)를 켜 두었으면 액체를 일정한 수위에 멈춰 줘.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)를 켜 두었으면 움직임 없이 바로 보여 줘.