프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 카드 스포트라이트(Card Spotlight) 효과를 넣어 줘. 스포트라이트 호버(spotlight hover), 포인터 글로우(pointer glow), 마우스 추적 글로우(mouse-following glow), 방사형 그라디언트 호버(radial gradient hover)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.비슷한 모션
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
포인터를 움직여 보세요
Cursor Spotlight (커서 스포트라이트)
다른 이름 Flashlight cursor, Spotlight effect
포인터 주변의 빛의 원이 콘텐츠를 드러내고, 나머지는 어둡게 남습니다.
쓰는 곳
히어로 섹션, 드러내기 효과
[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.A
포인터를 움직여 보세요
Glare / Holographic Card (글레어 / 홀로그래픽 카드)
다른 이름 Glare hover, Glare card, Magic card, Glare
밝은 하이라이트가 반사광처럼 포인터를 따라 카드 표면 위를 움직입니다.
쓰는 곳
프리미엄 카드, 수집용 카드
[적용할 곳]에 글레어 / 홀로그래픽 카드(Glare / Holographic Card) 효과를 넣어 줘. 글레어 카드(glare card), 글레어 호버(glare hover)라고도 불러.
은은하고 밝은 하이라이트가 반사되는 빛처럼 포인터를 따라 카드 표면을 움직이고, 카드는 포인터 쪽으로 살짝 기울게 해 줘. 포인터가 벗어나면 둘 다 사라지게. 부드럽고 은은하게.
클릭은 빛 레이어를 통과하게 하고, 그 아래 내용은 잘 읽히게 두고, 터치 기기에서는 빛 없이 카드를 보여 줘.ABCDEFGHIJKL
포인터를 움직여 보세요
Text Reveal Card (텍스트 리빌 카드)
다른 이름 Spotlight Text Reveal
카드 위로 포인터를 움직이면 마스크 경계나 스포트라이트 아래에 숨은 텍스트가 드러납니다.
쓰는 곳
기능 소개 카드
[적용할 곳]에 텍스트 리빌 카드(Text Reveal Card) 효과를 넣어 줘. 스포트라이트 텍스트 리빌(spotlight text reveal)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.Spotlight (스포트라이트)
다른 이름 Spotlight sweep, Light cone
부드러운 원뿔형 빛이나 빛 웅덩이가 스치듯 들어와 배경 일부를 비춥니다.
쓰는 곳
히어로 제목
[적용할 곳]에 스포트라이트(Spotlight) 효과를 넣어 줘. 스포트라이트 스윕(spotlight sweep), 라이트 콘(light cone)이라고도 불러.
페이지가 로드되면 부드러운 원뿔형 빛이 모서리에서 비스듬히 들어와 제목 위에 자리 잡고, 도착하면서 밝아지게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛이 이미 자리 잡은 상태로 보여 줘.Hover의 다른 모션
A
마우스를 올려 보세요
Curl (컬)
다른 이름 Page curl
마우스를 올리면 요소의 한 모서리가 책장을 넘기듯 말려 올라갑니다.
쓰는 곳
카드, 메모
[적용할 곳]에 컬(Curl) 호버 효과를 넣어 줘. 페이지 컬(page curl)이라고도 불러.
요소의 한 모서리가 책장을 넘기듯 부드럽게 말려 올라가 접힌 뒷면이 보이고, 포인터가 벗어나면 다시 평평해지게 해 줘.
중요한 내용을 가리지 않게 접힌 부분은 작게 두고, 키보드 포커스에도 같은 효과를 보여 줘.A
B
포인터를 움직여 보세요
Direction Aware Hover (디렉션 어웨어 호버)
다른 이름 Direction-aware overlay
포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 빠져나갑니다.
쓰는 곳
이미지 갤러리, 포트폴리오 그리드
[적용할 곳]에 디렉션 어웨어 호버(Direction Aware Hover) 효과를 넣어 줘. 방향 인식 오버레이(direction-aware overlay)라고도 불러.
포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 미끄러져 나가게 해 줘. 빠르고 부드럽게.
들어올 때와 나갈 때의 포인터 위치로 방향을 판단하고, 터치나 키보드 포커스에서는 정해 둔 한 방향을 써 줘.ABCDE
포인터를 움직여 보세요
Dock Magnification (독 확대)
다른 이름 Dock
macOS Dock처럼 포인터가 가까워질수록 한 줄로 놓인 아이콘이 부드럽게 커집니다.
쓰는 곳
아이콘 툴바, 내비게이션
[적용할 곳]에 독 확대(Dock Magnification) 효과를 넣어 줘. 독(dock)이라고도 불러.
포인터가 가까워질수록 줄 안의 아이콘이 부드럽게 커지고, 가장 가까운 아이콘이 가장 크며 양옆 아이콘도 조금 커지게 해 줘. 포인터가 벗어나면 모두 원래 크기로 돌아오게 해 줘.
아이콘은 고정된 기준선에서 위쪽으로 커지게 하고, 터치와 키보드에서는 모든 아이콘을 원래 크기 그대로 쓸 수 있게 해 줘.