프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 하트비트(Heartbeat) 효과를 넣어 줘. heart beat라고도 불러.
요소가 빠르게 두 번 부풀었다 풀리고, 다음 박동 전에 잠깐 쉬게 해 줘. 뛰는 심장처럼.
박동 사이의 쉼을 유지한 채 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.비슷한 모션
A
Pulse (펄스)
다른 이름 Pulsing
요소가 부드럽게 커졌다 작아지거나 흐려졌다 선명해지기를 반복합니다.
쓰는 곳
스켈레톤 로더, 라이브 표시, CTA
[적용할 곳]에 펄스(Pulse) 효과를 넣어 줘. 펄싱(pulsing)이라고도 불러.
요소가 느리고 일정한 리듬으로 부드럽게 부풀었다 돌아오게 해 줘. 은은하게, 튕기는 느낌 없이.
주변 레이아웃을 밀지 않고 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.클릭해 보세요
Like / Heart Burst (좋아요 / 하트 버스트)
다른 이름 Heart animation, Twitter heart, Favorite toggle
하트 아이콘을 클릭하면 색이 채워지며 작은 입자가 터지거나 두근거립니다.
쓰는 곳
좋아요·즐겨찾기 버튼
[적용할 곳]에 좋아요 / 하트 버스트(Like / Heart Burst) 애니메이션을 넣어 줘. 하트 애니메이션(heart animation), 즐겨찾기 토글(favorite toggle)이라고도 불러.
좋아요를 누르면 하트가 색으로 채워지며 통통 튀듯 커지고, 링과 작은 점들이 바깥으로 터졌다가 사라지게 해 줘. 전체적으로 빠르고 경쾌하게, 좋아요를 취소하면 하트만 조용히 비워지게.
눌림 상태를 가진 진짜 토글 버튼으로 만들고, 버스트는 켤 때만 재생해 줘.A
요소가 커지면서 회전하듯 흔들린 뒤 원래 크기로 돌아와, 축하하는 느낌을 줍니다.
쓰는 곳
성공 상태, 축하 표시
[적용할 곳]에 타다(Tada) 주목 효과를 넣어 줘.
요소가 살짝 작아졌다가 커지면서 빠르게 기울며 좌우로 흔들리고, 원래 크기로 돌아오게 해 줘. 작은 축하처럼.
성공 직후처럼 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.A
마우스를 올려 보세요
요소가 빠르게 커졌다가 톡 튕기듯 제자리로 돌아옵니다.
쓰는 곳
아이콘, 버튼
[적용할 곳]에 팝(Pop) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 부풀었다가 원래 크기로 돌아오게, 작게 톡 튕기는 느낌으로 해 줘.
커진 상태로 멈추거나 반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.Emphasis의 다른 모션
A
Jello (젤로)
다른 이름 Jelly
요소가 흔들리는 젤리처럼 좌우로 일그러지며, 흔들림 폭이 점점 줄어듭니다.
쓰는 곳
버튼이나 로고의 재미있는 강조
[적용할 곳]에 젤로(Jello) 주목 효과를 넣어 줘. 젤리(jelly)라고도 불러.
요소가 흔들리는 젤리처럼 좌우로 일그러지게 해 줘. 처음엔 크게, 금방 잦아들며 멈추게.
트리거되면 한 번만 재생하고, 요소가 차지하는 자리는 그대로 둬서 주변 콘텐츠가 밀리지 않게 해 줘.A
Ping (핑)
다른 이름 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
요소의 복사본이 레이더 파동처럼 커지며 사라지기를 반복합니다.
쓰는 곳
알림 점, 실시간 상태 표시
[적용할 곳]에 핑(Ping) 효과를 넣어 줘. 레이더 핑(radar ping), 펄스 링(pulse ring)이라고도 불러.
요소의 복사본이 바깥으로 커지며 사라지는 동작을 일정한 속도로 계속 반복하고, 요소 자체는 가만히 있게 해 줘.
링은 별도 레이어에 그려서 레이아웃이 절대 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반복을 멈춰 줘.