프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 모핑 텍스트(Morphing Text) 효과를 넣어 줘. 텍스트 모프(text morph)라고도 불러.
한 단어가 같은 자리에서 흐려지며 끈적하고 부드럽게 섞여 다음 단어로 녹아들고, 다음 전환 전에 잠깐 멈춰 있게 해 줘.
단어가 끊김 없이 순환되게 하고, 스크린 리더는 단어를 일반 텍스트로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 순환을 멈춰 줘.비슷한 모션
ABDEFGHIJKLDEFMN
Word Rotate (워드 로테이트)
다른 이름 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
문장 속 한 단어가 슬라이드, 플립, 페이드로 목록의 다음 단어와 바뀝니다.
쓰는 곳
히어로 태그라인
[적용할 곳]에 워드 로테이트(Word Rotate) 효과를 넣어 줘. 회전 단어(rotating words), 플립 단어(flip words)라고도 불러.
줄 안의 한 단어가 위로 미끄러져 빠지고 목록의 다음 단어가 아래에서 들어오게 하고, 다음 교체 전에 각 단어에서 잠시 멈추게 해 줘.
단어 너비가 달라도 줄의 나머지가 튀지 않게 하고, 스크린 리더가 교체될 때마다 읽지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 교체를 멈춰 줘.AWBXCYDZ
Text Replacement (텍스트 교체)
다른 이름 Text Swap
기존 텍스트가 애니메이션과 함께 빠져나가고 새 텍스트로 바뀝니다.
쓰는 곳
바뀌는 레이블
[적용할 곳]에 텍스트 교체(Text Replacement) 효과를 넣어 줘. 텍스트 스왑(text swap)이라고도 불러.
텍스트가 바뀔 때 기존 글자는 위로 미끄러져 빠지고 새 글자는 아래에서 들어오게, 한 글자씩 빠르고 부드러운 물결처럼 이어지게 해 줘.
바뀌는 동안 텍스트 박스 크기가 튀지 않게 하고, 스크린 리더에는 새 텍스트만 읽어 주게 해 줘.ABCD
Blur In (블러 인)
다른 이름 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
요소가 크게 흐려진 상태에서 점점 또렷해지며, 보통 미끄러지거나 서서히 나타나는 움직임과 함께합니다.
쓰는 곳
헤드라인, 히어로 텍스트 등장
[적용할 곳]에 블러 인(Blur In) 등장 애니메이션을 넣어 줘. 텍스트 포커스 인(text focus in), 포커스 인(focus in), 블러 텍스트 리빌(blur text reveal)이라고도 불러.
내용이 크게 흐리고 투명한 상태에서 시작해 제자리에서 점점 또렷해지게 해 줘. 부드럽고 약간 느리게, 위치는 움직이지 않게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 처음부터 또렷하게 보여 줘.마우스를 올려 보세요
Gooey Effect (메타볼 효과)
다른 이름 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
블러와 대비 필터로 가까운 도형끼리 액체 방울처럼 서로 녹아 붙습니다.
쓰는 곳
메뉴, 커서, 페이지네이션
[적용할 곳]에 메타볼 효과(Gooey Effect)를 넣어 줘. 구 이펙트(goo effect), 메타볼(metaballs)이라고도 불러.
포인터를 올리면 작은 방울들이 본체에서 액체처럼 늘어나다 떨어져 나가고, 포인터가 벗어나면 흘러 돌아와 부드럽게 합쳐지게 해 줘.
블러·대비 필터는 페이지 전체가 아니라 작은 도형 묶음에만 걸고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.Text의 다른 모션
ABCDEF
Neon Glow Text (네온 글로우 텍스트)
다른 이름 Neon Sign Flicker, Glowing Text
텍스트가 네온관처럼 빛나며 깜빡이거나 은은하게 맥동합니다.
쓰는 곳
나이트라이프, 게임 콘셉트
[적용할 곳]에 네온 글로우 텍스트(Neon Glow Text) 효과를 넣어 줘. 네온사인 플리커(neon sign flicker), 글로잉 텍스트(glowing text)라고도 불러.
텍스트가 네온관처럼 부드럽고 일정한 빛으로 빛나다가, 가끔 진짜 간판처럼 잠깐 꺼지게 해 줘.
빠른 깜빡임은 일부 사용자에게 해로울 수 있으니 깜빡임은 빠르지 않게 가끔만 넣고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 일정하게 유지해 줘.A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
안에서 스크롤해 보세요
Scrolling Letters (스크롤링 레터)
다른 이름 On-Scroll Letter Animations
사용자가 섹션을 스크롤할 때 제목 글자가 차례로 섞이거나 움직입니다.
쓰는 곳
섹션 표시
[적용할 곳]에 스크롤링 레터(Scrolling Letters)를 넣어 줘. 온스크롤 레터 애니메이션(on-scroll letter animations)이라고도 불러.
사용자가 섹션을 스크롤하면 제목 글자가 왼쪽부터 오른쪽으로 하나씩 다음 글자로 굴러가듯 바뀌고, 스크롤 위치에 바로 연동되게 해 줘.
위로 다시 스크롤하면 거꾸로 돌아가게 하고, 스크린 리더에는 현재 제목을 일반 텍스트로 전달해 줘.ABC DEFGH
Shimmer Text (시머 텍스트)
다른 이름 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
밝은 하이라이트가 글자 위를 반복해서 훑고 지나갑니다.
쓰는 곳
배지, 공지 필
[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.