프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 텍스트 리빌 카드(Text Reveal Card) 효과를 넣어 줘. 스포트라이트 텍스트 리빌(spotlight text reveal)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.비슷한 모션
A
마우스를 올려 보세요
SVG Mask Reveal (SVG 마스크 리빌)
다른 이름 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
마스크 도형이 쓸고 지나가거나 포인터를 따라가며 아래 콘텐츠를 드러냅니다.
쓰는 곳
이미지·콘텐츠 드러내기
[적용할 곳]에 SVG 마스크 리빌(SVG Mask Reveal) 호버 효과를 넣어 줘. 클립 패스 리빌(clip-path reveal), 스포트라이트 마스크(spotlight mask)라고도 불러.
포인터를 올린 동안 원형 마스크가 가운데서 커지며 아래 콘텐츠를 드러내고, 포인터가 벗어나면 다시 닫히게 해 줘. 부드럽고 꽤 빠르게.
아무것도 밀리지 않게 두 레이어를 정확히 같은 크기로 두고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
포인터를 움직여 보세요
Cursor Spotlight (커서 스포트라이트)
다른 이름 Flashlight cursor, Spotlight effect
포인터 주변의 빛의 원이 콘텐츠를 드러내고, 나머지는 어둡게 남습니다.
쓰는 곳
히어로 섹션, 드러내기 효과
[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.A
B
끌어 보세요
Before-After Slider (비포 애프터 슬라이더)
다른 이름 Image comparison slider, Compare slider
드래그할 수 있는 구분선을 사이에 두고 한쪽에는 한 이미지, 다른 쪽에는 다른 이미지가 보입니다.
쓰는 곳
사진 보정, 제품 비교
[적용할 곳]에 비포 애프터 슬라이더(Before-After Slider)를 넣어 줘. 이미지 비교 슬라이더(image comparison slider), 컴페어 슬라이더(compare slider)라고도 불러.
두 이미지를 겹쳐 두고, 세로 구분선을 드래그하면 한쪽은 더 많이, 다른 쪽은 덜 보이게 해 줘. 구분선은 지연 없이 포인터를 바로 따라오게.
구분선은 가운데에서 시작하고, 터치와 방향키로도 움직일 수 있게 해 줘.ABCDABCD
마우스를 올려 보세요
Text Hover Effect (텍스트 호버 효과)
다른 이름 Gradient Outline Text Hover, Text Fill on Hover
외곽선만 있는 단어가 포인터를 따라가거나 가로질러 지나가는 그라디언트로 채워지거나 빛납니다.
쓰는 곳
큰 디스플레이 단어, 푸터
[적용할 곳]에 텍스트 호버 효과(Text Hover Effect)를 넣어 줘. 호버 시 텍스트 채우기(text fill on hover), 그라디언트 외곽선 텍스트 호버(gradient outline text hover)라고도 불러.
단어는 처음에 외곽선만 보이다가, 포인터가 올라가 있는 동안 꽉 찬 채우기가 왼쪽에서 오른쪽으로 부드럽게 들어오고, 포인터가 떠나면 다시 빠져나가게 해 줘.
채워지기 전 외곽선 단어도 잘 읽히게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.Text의 다른 모션
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)라고도 불러.
포인터가 텍스트 위에 올라가면 각 글자가 무작위 문자로 빠르게 깜빡이다가 왼쪽부터 오른쪽으로 차례로 원래 글자에 자리 잡게 해 줘.
섞이는 동안 텍스트 너비가 튀지 않게 하고, 스크린 리더는 실제 텍스트를 읽게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABCDEF
포인터를 움직여 보세요
Text Tilt (텍스트 틸트)
다른 이름 Perspective Text Tilt
텍스트가 마우스 위치를 따라 3D 원근감 있게 기울어집니다.
쓰는 곳
히어로 제목
[적용할 곳]에 텍스트 틸트(Text Tilt) 효과를 넣어 줘. 원근 텍스트 틸트(perspective text tilt)라고도 불러.
텍스트가 포인터 움직임을 부드럽게 따라가며 3D로 포인터 쪽으로 살짝 기울고, 포인터가 떠나면 부드럽게 평평하게 돌아오게 해 줘.
기울기는 은은하게 해서 글이 잘 읽히게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 평평하게 둬 줘.ABC DEFG
Typewriter (타자기 효과)
다른 이름 Typing Animation, Typewriter Effect, Typing Text
글자가 타이핑하듯 하나씩 나타나고, 보통 그 뒤에 깜빡이는 커서가 따라옵니다.
쓰는 곳
히어로 헤드라인, 태그라인
[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.