프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.비슷한 모션
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)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.A
마우스를 올려 보세요
SVG Mask Reveal (SVG 마스크 리빌)
다른 이름 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
마스크 도형이 쓸고 지나가거나 포인터를 따라가며 아래 콘텐츠를 드러냅니다.
쓰는 곳
이미지·콘텐츠 드러내기
[적용할 곳]에 SVG 마스크 리빌(SVG Mask Reveal) 호버 효과를 넣어 줘. 클립 패스 리빌(clip-path reveal), 스포트라이트 마스크(spotlight mask)라고도 불러.
포인터를 올린 동안 원형 마스크가 가운데서 커지며 아래 콘텐츠를 드러내고, 포인터가 벗어나면 다시 닫히게 해 줘. 부드럽고 꽤 빠르게.
아무것도 밀리지 않게 두 레이어를 정확히 같은 크기로 두고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.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)를 켜 두었으면 빛이 이미 자리 잡은 상태로 보여 줘.Cursor의 다른 모션
포인터를 움직여 보세요
Cursor Trail (커서 트레일)
다른 이름 Mouse trail
포인터가 움직이면 뒤로 사라져 가는 도형들이 줄지어 남습니다.
쓰는 곳
장난스러운 랜딩 페이지
[적용할 곳]에 커서 트레일(Cursor Trail) 효과를 넣어 줘. 마우스 트레일(mouse trail)이라고도 불러.
포인터가 움직이면 작은 점들이 짧게 줄지어 뒤에 남고, 각 점이 빠르게 줄어들며 사라지게 해 줘. 꼬리는 짧게, 지나간 길을 부드럽게 따라가는 느낌으로.
포인터가 움직일 때만 그리고, 클릭을 절대 막지 않게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빼 줘.B
포인터를 움직여 보세요
Custom Cursor (커스텀 커서)
다른 이름 Animated cursor, Cursor replacement
기본 화살표 대신 꾸민 점이나 링이 나타나고, 상호작용 요소 위에서 모양이 바뀝니다.
쓰는 곳
포트폴리오·에이전시 사이트
[적용할 곳]에 커스텀 커서(Custom Cursor)를 넣어 줘. 애니메이티드 커서(animated cursor), 커서 대체(cursor replacement)라고도 불러.
기본 화살표 대신 포인터를 정확히 따라가는 작은 점과 살짝 뒤처져 따라오는 링을 보여 주고, 링크와 버튼 위에서는 링이 부드럽게 커지게 해 줘.
터치 기기와 텍스트 입력란에서는 기본 커서를 그대로 두고, 커스텀 커서가 클릭을 절대 막지 않게 해 줘.A
포인터를 움직여 보세요
Magnetic Button (마그네틱 버튼)
다른 이름 Magnetic target, Magnetic hover
포인터가 가까이 오면 요소가 그쪽으로 끌려가고, 멀어지면 제자리로 튕기듯 돌아옵니다.
쓰는 곳
CTA 버튼, 내비게이션 아이콘
[적용할 곳]에 마그네틱 버튼(Magnetic Button) 효과를 넣어 줘. 마그네틱 타깃(magnetic target), 마그네틱 호버(magnetic hover)라고도 불러.
포인터가 가까이 오면 버튼이 그쪽으로 조금 끌려가고 라벨은 조금 더 움직이게 해 줘. 포인터가 떠나면 살짝 튕기며 제자리로 돌아오게.
주변 레이아웃이 밀리지 않게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 끌림을 꺼 줘.