프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 글리치 텍스트(Glitch Text) 호버 효과를 넣어 줘. 텍스트 글리치(text glitch), RGB 스플릿 글리치(RGB split glitch)라고도 불러.
포인터가 글자 위에 있는 동안 빠르고 날카롭게 툭툭 떨리면서, 얇은 가로 조각이 옆으로 튀고 색이 다른 복사본 두 개가 고장 난 신호처럼 갈라졌다가, 포인터가 떠나면 제자리로 돌아오게 해 줘.
스크린 리더가 복사본을 읽지 않게 실제 텍스트는 문서에 한 번만 두고, 키보드 포커스에도 같은 효과를 보여 줘.비슷한 모션
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
마우스를 올려 보세요
Text Scramble (텍스트 스크램블)
다른 이름 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
텍스트가 계속 바뀌는 무작위 문자로 대체되었다가 점차 최종 단어로 맞춰집니다.
쓰는 곳
테크 느낌의 히어로 제목, 링크 호버
[적용할 곳]에 텍스트 스크램블(Text Scramble) 호버 효과를 넣어 줘. 텍스트 디코드(text decode), 암호화 텍스트(encrypted text)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABC
Flicker (플리커)
다른 이름 Flickering
요소의 불투명도가 고장 난 전등처럼 불규칙하게 깜박거립니다.
쓰는 곳
네온과 글리치 효과
[적용할 곳]에 플리커(Flicker) 효과를 넣어 줘. flickering이라고도 불러.
요소가 대부분은 안정적으로 있다가, 고장 난 네온사인처럼 짧고 불규칙하게 끊기며 어두워지게 해 줘.
타이밍은 일정한 간격이 아니라 불규칙하게 하고, 최대 밝기로 빠르게 번쩍이는 건 피하고, 모션 줄이기를 켠 사용자에게는 멈춰 줘.ABCABCABC
안에서 스크롤해 보세요
Sliced Text (슬라이스드 텍스트)
다른 이름 On-Scroll Sliced Text
제목이 가로 조각으로 잘려, 페이지를 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀립니다.
쓰는 곳
에디토리얼 히어로
[적용할 곳]에 슬라이스드 텍스트(Sliced Text) 효과를 넣어 줘. 온스크롤 슬라이스드 텍스트(on-scroll sliced text)라고도 불러.
큰 제목을 가로 조각으로 잘라, 처음에는 온전한 단어로 맞춰져 있다가 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀리게 해 줘.
밀림을 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 스크린 리더에는 제목을 하나의 읽을 수 있는 텍스트로 유지해 줘.Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text (매트릭스 텍스트)
다른 이름 Digital Rain Text
초록색 글자가 매트릭스의 코드 비처럼 세로줄을 따라 떨어집니다.
쓰는 곳
해커 콘셉트
[적용할 곳]에 매트릭스 텍스트(Matrix Text) 효과를 넣어 줘. 디지털 레인 텍스트(digital rain text)라고도 불러.
글자 열이 저마다 조금씩 다른 속도로 꾸준히 떨어지고, 맨 앞 글자는 밝게 빛나며 그 뒤로 꼬리가 서서히 사라지게 해 줘.
스크린 리더에는 숨긴 장식으로 다루고, 가볍게 유지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Text의 다른 모션
ABCDEF
마우스를 올려 보세요
Holographic Text (홀로그래픽 텍스트)
다른 이름 Holographic Foil Text
글자에 무지갯빛 홀로그램 포일 반사가 나타나 포인터나 시간에 따라 움직입니다.
쓰는 곳
프리미엄 카드
[적용할 곳]에 홀로그래픽 텍스트(Holographic Text) 호버 효과를 넣어 줘. 홀로그래픽 포일 텍스트(holographic foil text)라고도 불러.
포인터가 글자 위에 있는 동안 포일 같은 색의 띠가 글자 위를 느리고 부드럽게 오가고, 포인터가 떠나면 원래의 평범한 모습으로 돌아오게 해 줘.
반짝임의 어느 순간에도 글자가 읽히게 하고, 키보드 포커스에도 같은 효과를 보여 줘.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)를 켜 두었으면 움직임을 멈춰 줘.ABCDEF
마우스를 올려 보세요
Letter Scatter (레터 스캐터)
다른 이름 Explosive Letter Burst, Scatter Gather Letters
호버하면 글자가 흩어졌다 돌아오거나, 등장할 때 바깥으로 터져 나갑니다.
쓰는 곳
재미있는 링크
[적용할 곳]에 레터 스캐터(Letter Scatter) 호버 효과를 넣어 줘. 스캐터 개더 레터(scatter gather letters), 익스플로시브 레터 버스트(explosive letter burst)라고도 불러.
포인터가 글자 위로 오면 글자마다 제각각의 방향으로 살짝 회전하며 조금씩 날아가고, 포인터가 떠나면 부드럽게 다시 모여 단어가 되게 해 줘.
글자가 움직이는 동안 레이아웃에서 단어가 차지하는 자리는 고정하고, 스크린 리더는 한 단어로 읽게 하고, 키보드 포커스에도 같은 효과를 보여 줘.