프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스피닝 텍스트(Spinning Text)를 넣어 줘. 서큘러 텍스트(circular text), 텍스트 온 서클(text on circle)이라고도 불러.
글자를 원 둘레에 고르게 배치하고, 원이 느리고 일정하게 돌며 반복이 다시 시작될 때 튀지 않게 해 줘.
스크린 리더에는 텍스트를 한 번만 일반 텍스트로 전달하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.비슷한 모션
Spin (스핀)
다른 이름 Rotate Loop, Spinner
요소가 일정한 속도로 계속 회전합니다.
쓰는 곳
로딩 스피너
[적용할 곳]에 스핀(Spin) 효과를 넣어 줘. 스피너(spinner), 로테이트 루프(rotate loop)라고도 불러.
요소가 일정하고 고른 속도로 계속 돌게 하고, 회전 사이에 이징은 넣지 마.
루프는 끊김 없이 이어지게 하고, 스피너에 접근성 있는 로딩 레이블을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.A
Orbiting Circles (오비팅 서클)
다른 이름 Orbit Animation, Orbit, Orbiting icons
작은 원이나 아이콘이 원형 궤도를 따라 중심 주위를 돕니다.
쓰는 곳
연동 서비스 다이어그램
[적용할 곳]에 오비팅 서클(Orbiting Circles)을 넣어 줘. 오빗 애니메이션(orbit animation), 오비팅 아이콘(orbiting icons)이라고도 불러.
작은 원들이 가운데 요소 주위를 원형 고리를 따라 느리고 일정하게 돌고, 바깥 고리는 반대 방향으로 더 느리게 돌게 해 줘.
반복은 끊김 없이, 도는 항목은 항상 똑바로 서 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.안에서 스크롤해 보세요
Text Path Scroll (텍스트 패스 스크롤)
다른 이름 Text Path Curve Scroll Animation
텍스트가 곡선 경로를 따라 놓이고, 스크롤할 때 그 경로를 따라 이동합니다.
쓰는 곳
스토리텔링 섹션
[적용할 곳]에 텍스트 패스 스크롤(Text Path Scroll) 효과를 넣어 줘. 텍스트 패스 곡선 스크롤 애니메이션(text path curve scroll animation)이라고도 불러.
텍스트가 곡선 위에 놓이고, 사용자가 스크롤하면 그 곡선을 따라 미끄러지게 해 줘. 아래로 스크롤하면 앞으로, 위로 스크롤하면 뒤로 가게.
움직임은 지연 없이 스크롤 위치에 바로 연결하고, 스크린 리더에서는 일반 텍스트로 읽히게 해 줘.Text의 다른 모션
ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (스플릿 플랩 텍스트)
다른 이름 Text Flipping Board, Flip Board, Vestaboard display
공항 출발 안내판처럼 글자가 차르르 넘어가다 목표 글자에서 멈춥니다.
쓰는 곳
상태 보드, 레트로 디스플레이
[적용할 곳]에 스플릿 플랩 텍스트(Split-Flap Text) 효과를 넣어 줘. 텍스트 플리핑 보드(text flipping board), 플립 보드(flip board)라고도 불러.
각 글자 칸이 알파벳을 빠르게 넘기다 목표 글자에서 멈추고, 칸들이 왼쪽부터 오른쪽으로 차례로 자리 잡게 해 줘.
텍스트가 나타나거나 바뀔 때마다 한 번씩 실행하고, 스크린 리더에는 최종 텍스트만 읽어 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 넘기지 말고 최종 텍스트를 바로 보여 줘.ABCDEF
Squiggly Text (스퀴글리 텍스트)
다른 이름 Wobbly Text, Turbulence Text
SVG 디스플레이스먼트 필터로 글자 가장자리가 손으로 그린 듯 꿈틀거립니다.
쓰는 곳
스케치풍이나 발랄한 제목
[적용할 곳]에 스퀴글리 텍스트(Squiggly Text) 효과를 넣어 줘. 워블리 텍스트(wobbly text), 터뷸런스 텍스트(turbulence text)라고도 불러.
글자 가장자리가 1초에 여러 번 손으로 다시 그린 것처럼 살짝 꿈틀거리게 해 줘. 부드러운 물결이 아니라 은은하게 자글거리는 느낌으로.
글자는 읽을 수 있게 유지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.