프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 글로우(Glow) 호버 효과를 넣어 줘. 네온 글로우(neon glow)라고도 불러.
포인터가 올라가 있는 동안 요소 둘레에 부드러운 색 빛 번짐이 서서히 나타나고, 벗어나면 사라지게 해 줘. 은은하게, 움직임 없이.
빛 번짐이 레이아웃에 영향을 주지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.비슷한 모션
A
마우스를 올려 보세요
Hover Shadow (호버 섀도)
다른 이름 Drop Shadow on hover, Elevation on hover
마우스를 올리면 요소 아래에 부드러운 그림자가 생기거나 짙어져 떠오른 느낌을 줍니다.
쓰는 곳
카드, 버튼
[적용할 곳]에 호버 섀도(Hover Shadow) 효과를 넣어 줘. 드롭 섀도 온 호버(drop shadow on hover), 엘리베이션 온 호버(elevation on hover)라고도 불러.
포인터가 올라가 있는 동안 요소 아래의 부드러운 그림자가 짙어지고 퍼져서 떠 보이게 하고, 벗어나면 다시 옅어지게 해 줘. 요소 자체는 제자리에 두고.
라이트·다크 테마 모두에서 어울리도록 그림자는 은은하게 하고, 키보드 포커스에도 같은 효과를 보여 줘.ABCDEF
Neon Glow Text (네온 글로우 텍스트)
다른 이름 Neon Sign Flicker, Glowing Text
텍스트가 네온관처럼 빛나며 깜빡이거나 은은하게 맥동합니다.
쓰는 곳
나이트라이프, 게임 콘셉트
[적용할 곳]에 네온 글로우 텍스트(Neon Glow Text) 효과를 넣어 줘. 네온사인 플리커(neon sign flicker), 글로잉 텍스트(glowing text)라고도 불러.
텍스트가 네온관처럼 부드럽고 일정한 빛으로 빛나다가, 가끔 진짜 간판처럼 잠깐 꺼지게 해 줘.
빠른 깜빡임은 일부 사용자에게 해로울 수 있으니 깜빡임은 빠르지 않게 가끔만 넣고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 일정하게 유지해 줘.A
마우스를 올려 보세요
마우스를 올리면 외곽선이 요소에서 바깥으로 퍼지거나 요소 쪽으로 좁혀집니다.
쓰는 곳
버튼
[적용할 곳]에 아웃라인 익스팬드(Outline Expand) 호버 효과를 넣어 줘.
외곽선이 요소 가장자리에 딱 붙은 채로 시작해 바깥으로 벌어지며 둘레에 작은 틈을 만들고, 호버 중에는 그대로 있다가 포인터가 벗어나면 다시 좁혀지게 해 줘. 부드럽고 빠르게.
요소 크기를 바꾸거나 주변 콘텐츠를 밀지 않는 방식으로 외곽선을 그리고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
그라디언트 테두리가 요소 둘레를 따라 움직이고, 포인터를 올리면 퍼져 나갑니다.
쓰는 곳
버튼, 카드
[적용할 곳]에 호버 보더 그라디언트(Hover Border Gradient) 효과를 넣어 줘.
짧은 그라디언트 하이라이트가 테두리 한쪽에 머물러 있다가, 포인터가 올라가 있는 동안 테두리를 따라 일정하게 돌고 테두리 전체가 은은하게 빛나며 밝아지게 해 줘.
호버 중에만 테두리를 움직이고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.Hover의 다른 모션
A
마우스를 올려 보세요
Grow (그로우)
다른 이름 Scale Up, Zoom In on hover
포인터가 올라가 있으면 요소가 부드럽게 살짝 커집니다.
쓰는 곳
버튼, 링크, 썸네일
[적용할 곳]에 그로우(Grow) 호버 효과를 넣어 줘. 스케일 업(scale up)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 커지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
Hollow (할로우)
다른 이름 Ghost fill
마우스를 올리면 채워진 배경이 비워지고 테두리만 남은 버튼이 됩니다.
쓰는 곳
버튼
[적용할 곳]에 할로우(Hollow) 호버 효과를 넣어 줘. 고스트 필(ghost fill)이라고도 불러.
채워진 배경이 사라지면서 테두리만 남고, 빈 배경에서도 읽히도록 라벨 색이 바뀌게 해 줘. 부드럽고 빠르게.
요소 크기가 변하지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.