프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.비슷한 모션
ABC DEFGH
Shimmer Text (시머 텍스트)
다른 이름 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
밝은 하이라이트가 글자 위를 반복해서 훑고 지나갑니다.
쓰는 곳
배지, 공지 필
[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.Skeleton Shimmer (스켈레톤 시머)
다른 이름 Skeleton wave, Shimmer effect, placeholder-wave
회색 자리 표시 도형 위로 밝은 빛줄기가 지나갑니다.
쓰는 곳
콘텐츠 로딩 자리 표시
[적용할 곳]에 스켈레톤 시머(Skeleton Shimmer)를 넣어 줘. 스켈레톤 웨이브(skeleton wave), 시머 효과(shimmer effect)라고도 불러.
부드러운 빛의 띠가 회색 자리 표시 도형 위를 왼쪽에서 오른쪽으로 지나가고, 다음 번 전에 잠깐 쉬게 해 줘. 매끄럽고 느긋하게.
도형은 실제 레이아웃에 맞춰서 콘텐츠가 로드될 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지된 자리 표시만 보여 줘.A
포인터를 움직여 보세요
Glare / Holographic Card (글레어 / 홀로그래픽 카드)
다른 이름 Glare hover, Glare card, Magic card, Glare
밝은 하이라이트가 반사광처럼 포인터를 따라 카드 표면 위를 움직입니다.
쓰는 곳
프리미엄 카드, 수집용 카드
[적용할 곳]에 글레어 / 홀로그래픽 카드(Glare / Holographic Card) 효과를 넣어 줘. 글레어 카드(glare card), 글레어 호버(glare hover)라고도 불러.
은은하고 밝은 하이라이트가 반사되는 빛처럼 포인터를 따라 카드 표면을 움직이고, 카드는 포인터 쪽으로 살짝 기울게 해 줘. 포인터가 벗어나면 둘 다 사라지게. 부드럽고 은은하게.
클릭은 빛 레이어를 통과하게 하고, 그 아래 내용은 잘 읽히게 두고, 터치 기기에서는 빛 없이 카드를 보여 줘.A
Border Beam (보더 빔)
다른 이름 Shine border, Animated border, Glowing effect, Moving Border
밝은 하이라이트가 카드 테두리를 따라 돌아갑니다.
쓰는 곳
추천 카드, CTA
[적용할 곳]에 보더 빔(Border Beam) 효과를 넣어 줘. 샤인 보더(shine border), 무빙 보더(moving border)라고도 불러.
짧고 밝은 하이라이트가 카드 테두리를 따라 일정하고 느긋한 속도로 돌고, 튀는 부분 없이 반복되게 해 줘.
효과 때문에 카드 내용이나 크기가 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빔을 멈춰 줘.Hover의 다른 모션
A
마우스를 올려 보세요
Shrink (슈링크)
다른 이름 Scale Down
포인터가 올라가 있으면 요소가 부드럽게 살짝 작아집니다.
쓰는 곳
버튼, 타일
[적용할 곳]에 슈링크(Shrink) 호버 효과를 넣어 줘. 스케일 다운(scale down)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 작아지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
Shutter Fill (셔터 필)
다른 이름 Shutter
포인터를 올리면 배경이 가운데나 가장자리에서 셔터처럼 열리거나 닫힙니다.
쓰는 곳
버튼, 카드
[적용할 곳]에 셔터 필(Shutter Fill) 호버 효과를 넣어 줘. 셔터(shutter)라고도 불러.
새 배경색이 가운데 세로선에서 양옆으로 셔터처럼 열리고, 포인터가 벗어나면 다시 가운데로 닫히게 해 줘. 그동안 글자색은 읽기 좋게 바뀌어야 해. 부드럽고 빠르게.
채우기는 요소 안쪽에서만 보이게 잘라 주고 글자는 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
포인터를 올리면 요소가 몇 픽셀 아래로 내려가 페이지 안으로 눌린 듯 보입니다.
쓰는 곳
버튼
[적용할 곳]에 싱크(Sink) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 살짝 내려가 그대로 머물러 페이지 안으로 눌린 듯 보이고, 벗어나면 다시 올라오게 해 줘. 부드럽게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 옮기고, 키보드 포커스에도 같은 효과를 보여 줘.