프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 텍스트 틸트(Text Tilt) 효과를 넣어 줘. 원근 텍스트 틸트(perspective text tilt)라고도 불러.
텍스트가 포인터 움직임을 부드럽게 따라가며 3D로 포인터 쪽으로 살짝 기울고, 포인터가 떠나면 부드럽게 평평하게 돌아오게 해 줘.
기울기는 은은하게 해서 글이 잘 읽히게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 평평하게 둬 줘.비슷한 모션
A
포인터를 움직여 보세요
3D Tilt (3D 틸트)
다른 이름 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
카드가 포인터 쪽으로 원근감 있게 기울고, 겹겹이 놓인 내용이 표면에서 떠오릅니다.
쓰는 곳
제품 카드, 요금제 카드
[적용할 곳]에 3D 틸트(3D Tilt) 효과를 넣어 줘. 퍼스펙티브 틸트(perspective tilt), 틸트 카드(tilt card)라고도 불러.
포인터가 움직이면 카드가 그쪽으로 원근감 있게 기울고, 안쪽 레이어들이 서로 다른 깊이로 표면에서 떠오르게 해 줘. 포인터가 벗어나면 부드럽게 평평하게 돌아오게. 부드럽고 은은하게.
글자가 잘 읽히도록 기울기는 살짝만 주고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 카드를 평평하게 둬.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)를 켜 두었으면 움직임을 멈춰 줘.Text의 다른 모션
ABC DEFG
Typewriter (타자기 효과)
다른 이름 Typing Animation, Typewriter Effect, Typing Text
글자가 타이핑하듯 하나씩 나타나고, 보통 그 뒤에 깜빡이는 커서가 따라옵니다.
쓰는 곳
히어로 헤드라인, 태그라인
[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.ABC DEF
마우스를 올려 보세요
Underline Draw (언더라인 드로우)
다른 이름 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
호버하면 링크 아래에 한쪽 끝이나 가운데에서 밑줄이 자라납니다.
쓰는 곳
내비게이션 링크, 본문 링크
[적용할 곳]에 언더라인 드로우(Underline Draw) 호버 효과를 넣어 줘. 애니메이션 밑줄(animated underline), 호버 밑줄 애니메이션(hover underline animation)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.ABCDEF
마우스를 올려 보세요
Variable Font Weight Animation (가변 폰트 웨이트 애니메이션)
다른 이름 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
가변 폰트의 축을 이용해 글자가 부드럽게 굵어지거나 가늘어집니다(너비나 기울기가 바뀌기도 합니다).
쓰는 곳
인터랙티브 제목
[적용할 곳]에 가변 폰트 웨이트 애니메이션(Variable Font Weight Animation) 호버 효과를 넣어 줘. 폰트 웨이트 시프트(font weight shift)라고도 불러.
포인터가 텍스트 위에 있는 동안 글자가 왼쪽에서 오른쪽으로 부드러운 물결처럼 차례로 굵어지고, 포인터가 떠나면 다시 가늘어지게 해 줘.
굵기가 튀지 않고 부드럽게 바뀌도록 가변 폰트를 쓰고, 제목이 넓어지면서 주변 콘텐츠를 밀어내지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.