Fade Up (페이드 업)
다른 이름 Fade In Up, Reveal on Scroll
요소가 살짝 떠오르며 서서히 나타나, 제자리에 자리 잡는 느낌을 줍니다.
쓰는 곳
스크롤로 등장하는 섹션 제목, 카드, 이미지
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 페이드 업(Fade Up) 등장 애니메이션을 넣어 줘. 페이드 인 업(fade-in-up), 스크롤 리빌(reveal on scroll)이라고도 불러.
요소가 처음 화면에 들어올 때 살짝 떠오르면서 서서히 나타나게 해 줘. 은은하고 빠르게, 튕기는 느낌 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.비슷한 모션
A
Fade In Directional (방향 페이드 인)
다른 이름 Fade In Down, Fade In Left, Fade In Right
요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으며 서서히 나타납니다.
쓰는 곳
로드나 스크롤 때 등장하는 섹션, 카드
[적용할 곳]에 방향 페이드 인(Fade In Directional) 등장 애니메이션을 넣어 줘. 페이드 인 레프트(fade in left), 페이드 인 라이트(fade in right), 페이드 인 다운(fade in down)이라고도 불러.
요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으면서 서서히 나타나게 해 줘. 빠르고 매끄럽게, 도착할 때 감속하고 튕김 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.A
Slide In (슬라이드 인)
다른 이름 Slide In Up, Slide In Down, Slide In Left, Slide In Right
요소가 컨테이너 가장자리 바깥에서 제자리까지 페이드 없이 미끄러져 들어옵니다.
쓰는 곳
드로어, 사이드 패널, 배너
[적용할 곳]에 슬라이드 인(Slide In) 등장 애니메이션을 넣어 줘. slide in left, slide in right, slide in up, slide in down이라고도 불러.
요소가 컨테이너 가장자리 바깥에서 제자리까지 미끄러져 들어오고, 그동안 계속 완전히 불투명하게 해 줘. 빠르게, 튕김 없이 부드럽게 감속하게.
바깥에 있는 동안 이웃 요소와 겹치거나 스크롤바가 생기지 않게 컨테이너 가장자리에서 잘라 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 제자리에 바로 보여 줘.Stagger (스태거)
다른 이름 Staggered Animation, Cascade
그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.
쓰는 곳
리스트, 그리드, 내비게이션 메뉴, 검색 결과
[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.A
Fade In / Fade Out (페이드 인 / 페이드 아웃)
다른 이름 Fade
요소가 제자리에서 완전히 투명한 상태에서 완전히 불투명하게 바뀌고, 사라질 때는 반대로 바뀝니다.
쓰는 곳
모달, 토스트, 페이지 콘텐츠 등장
[적용할 곳]에 페이드 인 / 페이드 아웃(Fade In / Fade Out) 애니메이션을 넣어 줘. 페이드(fade)라고도 불러.
나타날 때는 요소가 제자리에서 완전히 투명한 상태에서 또렷하게 보이는 상태로 바뀌고, 사라질 때는 같은 방식으로 흐려지게 해 줘. 은은하게, 이동이나 크기 변화 없이.
사라진 뒤에는 클릭도 키보드 접근도 안 되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.Entrance & Exit의 다른 모션
ABCD
요소가 고장 난 네온사인처럼 빠르게 깜빡이다가 켜진 상태로 남습니다.
쓰는 곳
네온, 레트로 텍스트 효과
[적용할 곳]에 플리커 인(Flicker In) 등장 애니메이션을 넣어 줘.
고장 난 네온사인처럼 요소가 불규칙한 간격으로 몇 번 켜졌다 꺼졌다 한 뒤 켜진 채로 남게 해 줘. 딱딱 끊기는 깜빡임으로, 위치는 움직이지 않게.
한 번만 재생하고, 깜빡이는 빛에 민감한 사람도 안전하도록 깜빡임은 적고 너무 빠르지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 켜진 상태로 보여 줘.A
요소가 Y축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가왔다가 돌아갑니다.
쓰는 곳
카드나 배지를 눈에 띄게 드러낼 때
[적용할 곳]에 플립(Flip) 애니메이션을 넣어 줘.
요소가 세로축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가오고, 크기가 아주 살짝 줄었다가 제자리로 돌아오게 해 줘. 생기 있지만 짧게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 반복하지 말고 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 생략해 줘.A
Flip In (플립 인)
다른 이름 Flip In X, Flip In Y
요소가 가로축이나 세로축을 중심으로 3D 회전해, 옆면만 보이던 상태에서 정면을 향하게 됩니다.
쓰는 곳
카드, 타일 등장
[적용할 곳]에 플립 인(Flip In) 등장 애니메이션을 넣어 줘. 플립 인 X(flip in X), 플립 인 Y(flip in Y)라고도 불러.
요소가 옆면만 보이는 상태에서 시작해 가로축을 중심으로 돌아 정면을 향하고, 살짝 지나쳤다가 돌아와 자리 잡게 해 줘. 빠르게, 작은 흔들림과 함께.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 정면 상태로 보여 줘.