프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 워드 로테이트(Word Rotate) 효과를 넣어 줘. 회전 단어(rotating words), 플립 단어(flip words)라고도 불러.
줄 안의 한 단어가 위로 미끄러져 빠지고 목록의 다음 단어가 아래에서 들어오게 하고, 다음 교체 전에 각 단어에서 잠시 멈추게 해 줘.
단어 너비가 달라도 줄의 나머지가 튀지 않게 하고, 스크린 리더가 교체될 때마다 읽지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 교체를 멈춰 줘.비슷한 모션
AWBXCYDZ
Text Replacement (텍스트 교체)
다른 이름 Text Swap
기존 텍스트가 애니메이션과 함께 빠져나가고 새 텍스트로 바뀝니다.
쓰는 곳
바뀌는 레이블
[적용할 곳]에 텍스트 교체(Text Replacement) 효과를 넣어 줘. 텍스트 스왑(text swap)이라고도 불러.
텍스트가 바뀔 때 기존 글자는 위로 미끄러져 빠지고 새 글자는 아래에서 들어오게, 한 글자씩 빠르고 부드러운 물결처럼 이어지게 해 줘.
바뀌는 동안 텍스트 박스 크기가 튀지 않게 하고, 스크린 리더에는 새 텍스트만 읽어 주게 해 줘.ABCDEFGHI
Morphing Text (모핑 텍스트)
다른 이름 Text Morph
한 단어가 같은 자리에서 흐려지며 다음 단어로 녹아들듯 바뀝니다.
쓰는 곳
히어로 태그라인
[적용할 곳]에 모핑 텍스트(Morphing Text) 효과를 넣어 줘. 텍스트 모프(text morph)라고도 불러.
한 단어가 같은 자리에서 흐려지며 끈적하고 부드럽게 섞여 다음 단어로 녹아들고, 다음 전환 전에 잠깐 멈춰 있게 해 줘.
단어가 끊김 없이 순환되게 하고, 스크린 리더는 단어를 일반 텍스트로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 순환을 멈춰 줘.AGBHCIDJEKFL
마우스를 올려 보세요
Text 3D Flip (텍스트 3D 플립)
다른 이름 3D Flip Text Reveal
글자나 단어가 축을 중심으로 3D 회전하며 뒷면의 다음 텍스트를 보여 줍니다.
쓰는 곳
호버 링크, 제목
[적용할 곳]에 텍스트 3D 플립(Text 3D Flip) 호버 효과를 넣어 줘. 3D 플립 텍스트 리빌(3D flip text reveal)이라고도 불러.
포인터가 텍스트 위에 오면 각 글자가 가로축을 중심으로 3D로 굴러 넘어가며 뒷면의 새 글자를 보여 주고, 한 글자씩 빠르고 부드럽게 훑듯이 이어지다가 포인터가 떠나면 다시 돌아오게 해 줘.
넘어가는 동안 텍스트 상자 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (오도미터)
다른 이름 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
숫자가 바뀌면 각 자리가 세로로 굴러 새 값이 됩니다.
쓰는 곳
실시간 카운터, 가격 표시
[적용할 곳]에 오도미터(Odometer) 숫자 애니메이션을 넣어 줘. 롤링 넘버(rolling numbers), 슬롯머신 숫자(slot-machine digits)라고도 불러.
값이 바뀌면 각 자리가 항상 앞쪽 방향으로 세로로 굴러 새 숫자가 되고, 자리마다 살짝 시차를 두고 끝에서 작게 자리 잡게 해 줘.
숫자가 밀리지 않게 모든 자리의 폭을 같게 하고, 스크린 리더에는 최종 값만 읽히게 해 줘.Text의 다른 모션
ABCDEF
Animated Gradient Text (그라디언트 텍스트 애니메이션)
다른 이름 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
그라디언트로 채운 글자의 색이 끊임없이 바뀌거나 흘러갑니다.
쓰는 곳
브랜드 헤드라인
[적용할 곳]에 그라디언트 텍스트 애니메이션(Animated Gradient Text) 효과를 넣어 줘. 오로라 텍스트(aurora text), 레인보우 텍스트 스윕(rainbow text sweep)이라고도 불러.
글자를 그라디언트로 채우고, 그 색이 글자 위를 느리고 부드럽게 흘러가며 끊김 없이 무한 반복되게 해 줘.
어느 순간에도 배경 위에서 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 색을 멈춰 줘.ABCDEF
마우스를 올려 보세요
Glitch Text (글리치 텍스트)
다른 이름 Text Glitch, RGB Split Glitch
글자가 고장 난 신호처럼 조각나 어긋나고 빨강·청록 색이 갈라지며 떨립니다.
쓰는 곳
사이버펑크·게임 분위기의 제목
[적용할 곳]에 글리치 텍스트(Glitch Text) 호버 효과를 넣어 줘. 텍스트 글리치(text glitch), RGB 스플릿 글리치(RGB split glitch)라고도 불러.
포인터가 글자 위에 있는 동안 빠르고 날카롭게 툭툭 떨리면서, 얇은 가로 조각이 옆으로 튀고 색이 다른 복사본 두 개가 고장 난 신호처럼 갈라졌다가, 포인터가 떠나면 제자리로 돌아오게 해 줘.
스크린 리더가 복사본을 읽지 않게 실제 텍스트는 문서에 한 번만 두고, 키보드 포커스에도 같은 효과를 보여 줘.ABCDEF
마우스를 올려 보세요
Holographic Text (홀로그래픽 텍스트)
다른 이름 Holographic Foil Text
글자에 무지갯빛 홀로그램 포일 반사가 나타나 포인터나 시간에 따라 움직입니다.
쓰는 곳
프리미엄 카드
[적용할 곳]에 홀로그래픽 텍스트(Holographic Text) 호버 효과를 넣어 줘. 홀로그래픽 포일 텍스트(holographic foil text)라고도 불러.
포인터가 글자 위에 있는 동안 포일 같은 색의 띠가 글자 위를 느리고 부드럽게 오가고, 포인터가 떠나면 원래의 평범한 모습으로 돌아오게 해 줘.
반짝임의 어느 순간에도 글자가 읽히게 하고, 키보드 포커스에도 같은 효과를 보여 줘.