Tracking In (트래킹 인)
다른 이름 Text Tracking In, Letter-spacing In
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 나타나면서 보통 자간으로 좁혀집니다.
쓰는 곳
헤드라인 텍스트 등장
변형
- expand
- contract
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 트래킹 인(Tracking In) 텍스트 애니메이션을 넣어 줘. text tracking in, letter-spacing in이라고도 불러.
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 완전히 보이게 되면서 보통 자간으로 좁혀지게 해 줘. 부드럽게, 끝에서 느려지게.
자간이 바뀌는 동안 텍스트를 가운데 정렬된 한 줄로 유지해 주변 레이아웃이 밀리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 보통 자간으로 보여 줘.비슷한 모션
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)를 켜 두었으면 처음부터 또렷하게 보여 줘.ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.ABCDEF
마우스를 올려 보세요
Letter Scatter (레터 스캐터)
다른 이름 Explosive Letter Burst, Scatter Gather Letters
호버하면 글자가 흩어졌다 돌아오거나, 등장할 때 바깥으로 터져 나갑니다.
쓰는 곳
재미있는 링크
[적용할 곳]에 레터 스캐터(Letter Scatter) 호버 효과를 넣어 줘. 스캐터 개더 레터(scatter gather letters), 익스플로시브 레터 버스트(explosive letter burst)라고도 불러.
포인터가 글자 위로 오면 글자마다 제각각의 방향으로 살짝 회전하며 조금씩 날아가고, 포인터가 떠나면 부드럽게 다시 모여 단어가 되게 해 줘.
글자가 움직이는 동안 레이아웃에서 단어가 차지하는 자리는 고정하고, 스크린 리더는 한 단어로 읽게 하고, 키보드 포커스에도 같은 효과를 보여 줘.ABCDEF
마우스를 올려 보세요
Variable Font Weight Animation (가변 폰트 웨이트 애니메이션)
다른 이름 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
가변 폰트의 축을 이용해 글자가 부드럽게 굵어지거나 가늘어집니다(너비나 기울기가 바뀌기도 합니다).
쓰는 곳
인터랙티브 제목
[적용할 곳]에 가변 폰트 웨이트 애니메이션(Variable Font Weight Animation) 호버 효과를 넣어 줘. 폰트 웨이트 시프트(font weight shift)라고도 불러.
포인터가 텍스트 위에 있는 동안 글자가 왼쪽에서 오른쪽으로 부드러운 물결처럼 차례로 굵어지고, 포인터가 떠나면 다시 가늘어지게 해 줘.
굵기가 튀지 않고 부드럽게 바뀌도록 가변 폰트를 쓰고, 제목이 넓어지면서 주변 콘텐츠를 밀어내지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.Entrance & Exit의 다른 모션
A
Zoom In (줌 인)
다른 이름 Scale In, Zoom In Up, Zoom In Down
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타납니다.
쓰는 곳
모달, 이미지 라이트박스, 팝오버
[적용할 곳]에 줌 인(Zoom In) 등장 애니메이션을 넣어 줘. 스케일 인(scale in)이라고도 불러.
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타나게 해 줘. 빠르고 부드럽게, 크기가 넘쳤다 돌아오는 느낌 없이.
주변 레이아웃에 영향을 주지 않게 중심에서 확대하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.A
Zoom Out (줌 아웃)
다른 이름 Scale Out
요소가 줄어들며 서서히 옅어지다 사라집니다.
쓰는 곳
모달 닫기와 항목 제거
[적용할 곳]에 줌 아웃(Zoom Out) 퇴장 애니메이션을 넣어 줘. 스케일 아웃(scale out)이라고도 불러.
요소가 중심을 향해 줄어들면서 서서히 옅어지다 사라지게 해 줘. 빠르게, 갈수록 가속되게.
완전히 사라진 뒤에 레이아웃과 키보드 포커스에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.A
Back In (백 인)
다른 이름 Back In Up, Back In Down
요소가 작게 줄어든 채 비켜난 위치에서 시작해, 미끄러져 들어오며 원래 크기로 커집니다.
쓰는 곳
히어로 요소, 카드
[적용할 곳]에 백 인(Back In) 등장 애니메이션을 넣어 줘. 백 인 업(back in up), 백 인 다운(back in down)이라고도 불러.
요소가 작게 줄어들고 살짝 흐린 채로 가장자리 바깥에서 들어오고, 제자리에 도착한 뒤에 원래 크기로 커지게 해 줘. 톡 튀어나오는 게 아니라 의도적인 두 단계 움직임으로.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.