Glare / Holographic Card (글레어 / 홀로그래픽 카드)
다른 이름 Glare hover, Glare card, Magic card, Glare
밝은 하이라이트가 반사광처럼 포인터를 따라 카드 표면 위를 움직입니다.
쓰는 곳
프리미엄 카드, 수집용 카드
변형
- Glare Card
- Glare Hover
- glare option in vanilla-tilt
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 글레어 / 홀로그래픽 카드(Glare / Holographic Card) 효과를 넣어 줘. 글레어 카드(glare card), 글레어 호버(glare hover)라고도 불러.
은은하고 밝은 하이라이트가 반사되는 빛처럼 포인터를 따라 카드 표면을 움직이고, 카드는 포인터 쪽으로 살짝 기울게 해 줘. 포인터가 벗어나면 둘 다 사라지게. 부드럽고 은은하게.
클릭은 빛 레이어를 통과하게 하고, 그 아래 내용은 잘 읽히게 두고, 터치 기기에서는 빛 없이 카드를 보여 줘.비슷한 모션
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)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.ABCDEF
마우스를 올려 보세요
Holographic Text (홀로그래픽 텍스트)
다른 이름 Holographic Foil Text
글자에 무지갯빛 홀로그램 포일 반사가 나타나 포인터나 시간에 따라 움직입니다.
쓰는 곳
프리미엄 카드
[적용할 곳]에 홀로그래픽 텍스트(Holographic Text) 호버 효과를 넣어 줘. 홀로그래픽 포일 텍스트(holographic foil text)라고도 불러.
포인터가 글자 위에 있는 동안 포일 같은 색의 띠가 글자 위를 느리고 부드럽게 오가고, 포인터가 떠나면 원래의 평범한 모습으로 돌아오게 해 줘.
반짝임의 어느 순간에도 글자가 읽히게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
포인터를 움직여 보세요
3D Tilt (3D 틸트)
다른 이름 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
카드가 포인터 쪽으로 원근감 있게 기울고, 겹겹이 놓인 내용이 표면에서 떠오릅니다.
쓰는 곳
제품 카드, 요금제 카드
[적용할 곳]에 3D 틸트(3D Tilt) 효과를 넣어 줘. 퍼스펙티브 틸트(perspective tilt), 틸트 카드(tilt card)라고도 불러.
포인터가 움직이면 카드가 그쪽으로 원근감 있게 기울고, 안쪽 레이어들이 서로 다른 깊이로 표면에서 떠오르게 해 줘. 포인터가 벗어나면 부드럽게 평평하게 돌아오게. 부드럽고 은은하게.
글자가 잘 읽히도록 기울기는 살짝만 주고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 카드를 평평하게 둬.A
마우스를 올려 보세요
Shine Sweep (샤인 스윕)
다른 이름 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.
쓰는 곳
버튼, 카드, 배지
[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.3D & Depth의 다른 모션
ABCDEF
클릭해 보세요
3D Carousel (3D 캐러셀)
다른 이름 Rotating ring carousel
고리 모양으로 늘어선 패널이 3D 공간에서 세로축을 중심으로 회전합니다.
쓰는 곳
갤러리, 제품 쇼케이스
[적용할 곳]에 3D 캐러셀(3D Carousel)을 넣어 줘. 회전 링 캐러셀(rotating ring carousel)이라고도 불러.
패널을 원근감 있는 고리 모양으로 배치하고, 다음을 누를 때마다 고리 전체가 세로축을 중심으로 부드럽게 돌아 다음 패널이 앞으로 오게 해 줘.
컨트롤은 키보드로도 쓸 수 있게 하고, 현재 패널을 스크린 리더에 알려 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.3D Globe (3D 글로브)
다른 이름 Interactive globe
마커나 호가 그려진 3D 지구가 레이아웃 안에서 회전합니다.
쓰는 곳
글로벌 확장을 보여 주는 비주얼
[적용할 곳]에 3D 글로브(3D Globe)를 넣어 줘. 인터랙티브 글로브(interactive globe)라고도 불러.
표면에 마커 몇 개가 있는 지구본이 마커와 함께 축을 중심으로 느리고 일정하게 돌게 해 줘. 차분하고 끊김 없이.
장식으로 두고 보여 주는 정보는 텍스트 대체를 마련하고, 화면 밖에 있을 때는 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.A
마우스를 올려 보세요
3D Pin (3D 핀)
다른 이름 Pin hover 3D
포인터를 올리면 카드가 원근감 있게 뒤로 기울고, 핀과 빛이 보는 사람 쪽으로 솟아오릅니다.
쓰는 곳
링크 미리보기 카드
[적용할 곳]에 3D 핀(3D Pin) 호버 효과를 넣어 줘. 핀 호버 3D(pin hover 3D)라고도 불러.
포인터가 카드 위에 오면 카드가 원근감 있게 뒤로 기울고, 밑동에 은은한 빛이 있는 핀이 가운데에서 솟아오르게 해 줘. 포인터가 벗어나면 모두 제자리로. 부드럽게, 튕기지 않게.
레이아웃에서 카드가 차지하는 자리는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.