프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 보더 리플(Border Ripple) 호버 효과를 넣어 줘.
포인터가 들어오면 테두리 고리 두어 개가 차례로 요소에서 바깥으로 퍼지며 사라지게 해 줘. 물결처럼 빠르고 가볍게.
반복하지 말고 호버할 때마다 한 번만 재생하고, 고리 때문에 주변 레이아웃이 밀리지 않게 해 줘.비슷한 모션
A
마우스를 올려 보세요
마우스를 올리면 외곽선이 요소에서 바깥으로 퍼지거나 요소 쪽으로 좁혀집니다.
쓰는 곳
버튼
[적용할 곳]에 아웃라인 익스팬드(Outline Expand) 호버 효과를 넣어 줘.
외곽선이 요소 가장자리에 딱 붙은 채로 시작해 바깥으로 벌어지며 둘레에 작은 틈을 만들고, 호버 중에는 그대로 있다가 포인터가 벗어나면 다시 좁혀지게 해 줘. 부드럽고 빠르게.
요소 크기를 바꾸거나 주변 콘텐츠를 밀지 않는 방식으로 외곽선을 그리고, 키보드 포커스에도 같은 효과를 보여 줘.A
Ping (핑)
다른 이름 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
요소의 복사본이 레이더 파동처럼 커지며 사라지기를 반복합니다.
쓰는 곳
알림 점, 실시간 상태 표시
[적용할 곳]에 핑(Ping) 효과를 넣어 줘. 레이더 핑(radar ping), 펄스 링(pulse ring)이라고도 불러.
요소의 복사본이 바깥으로 커지며 사라지는 동작을 일정한 속도로 계속 반복하고, 요소 자체는 가만히 있게 해 줘.
링은 별도 레이어에 그려서 레이아웃이 절대 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반복을 멈춰 줘.A
Ripple Rings (리플 링)
다른 이름 Background ripple, Concentric ripples
동심원이 중심점에서 바깥으로 퍼져 나가며 사라집니다.
쓰는 곳
히어로 중앙 요소, 오디오·페어링 비주얼
[적용할 곳]에 리플 링(Ripple Rings) 효과를 넣어 줘. 배경 리플(background ripple), 동심원 물결(concentric ripples)이라고도 불러.
고리가 중심점에서 바깥으로 계속 퍼져 나가며 커질수록 사라지게 하고, 일정한 간격으로 하나씩 이어지게 해 줘. 느리고 꾸준하게.
가운데 요소는 제자리에 가만히 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.Hover의 다른 모션
A
마우스를 올려 보세요
Bounce Scale (바운스 스케일)
다른 이름 Bounce In / Out
호버가 시작되거나 끝날 때 요소가 탄력 있게 살짝 넘치며 커지거나 작아집니다.
쓰는 곳
버튼, 배지
[적용할 곳]에 바운스 스케일(Bounce Scale) 호버 효과를 넣어 줘. 바운스 인/아웃(bounce in / out)이라고도 불러.
요소가 탄력 있게 살짝 커지면서 최종 크기를 잠깐 눈에 띄게 넘었다가 자리 잡고, 포인터가 벗어나면 같은 방식으로 튕기며 돌아오게 해 줘.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.ABCDEF
포인터를 움직여 보세요
Card Hover Effect (카드 호버 효과)
다른 이름 Sliding highlight card grid
강조 배경이 그리드 안의 카드 사이를 미끄러지듯 옮겨 다니며 마우스를 올린 카드를 따라갑니다.
쓰는 곳
카드 그리드, 기능 목록
[적용할 곳]에 카드 호버 효과(Card Hover Effect)를 넣어 줘. 슬라이딩 하이라이트 카드 그리드(sliding highlight card grid)라고도 불러.
마우스를 올린 카드 뒤에 부드러운 강조 배경이 나타나고, 포인터가 다른 카드로 옮겨 가면 그쪽으로 매끄럽게 미끄러져 가며, 포인터가 그리드를 벗어나면 서서히 사라지게 해 줘.
키보드 포커스로도 강조 배경이 똑같이 움직이게 하고, 카드 자체는 밀리지 않게 해 줘.A
포인터를 움직여 보세요
Card Spotlight (카드 스포트라이트)
다른 이름 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
부드러운 원형 빛이 포인터를 따라 카드 표면을 움직이며 아래 배경을 드러냅니다.
쓰는 곳
기능 소개 카드, 벤토 그리드
[적용할 곳]에 카드 스포트라이트(Card Spotlight) 효과를 넣어 줘. 스포트라이트 호버(spotlight hover), 포인터 글로우(pointer glow), 마우스 추적 글로우(mouse-following glow), 방사형 그라디언트 호버(radial gradient hover)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.