프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 워블 카드(Wobble Card) 효과를 넣어 줘.
포인터가 카드 위에서 움직이면 카드는 포인터 쪽으로 살짝 움직이고, 안의 콘텐츠는 반대쪽으로 살짝 움직이며 조금 커지면서 부드럽게 따라가게 해 줘. 포인터가 벗어나면 모두 제자리로 돌아와야 해.
움직임은 작게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 꺼 줘.비슷한 모션
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
포인터를 움직여 보세요
Magnetic Button (마그네틱 버튼)
다른 이름 Magnetic target, Magnetic hover
포인터가 가까이 오면 요소가 그쪽으로 끌려가고, 멀어지면 제자리로 튕기듯 돌아옵니다.
쓰는 곳
CTA 버튼, 내비게이션 아이콘
[적용할 곳]에 마그네틱 버튼(Magnetic Button) 효과를 넣어 줘. 마그네틱 타깃(magnetic target), 마그네틱 호버(magnetic hover)라고도 불러.
포인터가 가까이 오면 버튼이 그쪽으로 조금 끌려가고 라벨은 조금 더 움직이게 해 줘. 포인터가 떠나면 살짝 튕기며 제자리로 돌아오게.
주변 레이아웃이 밀리지 않게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 끌림을 꺼 줘.A
포인터를 움직여 보세요
Glare / Holographic Card (글레어 / 홀로그래픽 카드)
다른 이름 Glare hover, Glare card, Magic card, Glare
밝은 하이라이트가 반사광처럼 포인터를 따라 카드 표면 위를 움직입니다.
쓰는 곳
프리미엄 카드, 수집용 카드
[적용할 곳]에 글레어 / 홀로그래픽 카드(Glare / Holographic Card) 효과를 넣어 줘. 글레어 카드(glare card), 글레어 호버(glare hover)라고도 불러.
은은하고 밝은 하이라이트가 반사되는 빛처럼 포인터를 따라 카드 표면을 움직이고, 카드는 포인터 쪽으로 살짝 기울게 해 줘. 포인터가 벗어나면 둘 다 사라지게. 부드럽고 은은하게.
클릭은 빛 레이어를 통과하게 하고, 그 아래 내용은 잘 읽히게 두고, 터치 기기에서는 빛 없이 카드를 보여 줘.Hover의 다른 모션
A
마우스를 올려 보세요
색 배경이 한쪽 끝에서 쓸려 들어오며 탄력 있게 살짝 넘쳤다가 자리 잡습니다.
쓰는 곳
버튼
[적용할 곳]에 배경 바운스 스윕(Background Bounce Sweep) 호버 효과를 넣어 줘.
새 배경색이 한쪽 끝에서 쓸려 들어와 반대쪽 끝을 탄력 있게 살짝 넘었다가 자리 잡고, 글자색은 잘 읽히도록 바뀌게 해 줘. 포인터가 벗어나면 부드럽게 다시 빠져나가게 해 줘.
글자는 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
Background Fade (배경 페이드)
다른 이름 Color Fade
마우스를 올리면 배경색과 글자색이 새 색으로 부드럽게 바뀝니다.
쓰는 곳
버튼, 내비게이션 항목
[적용할 곳]에 배경 페이드(Background Fade) 호버 효과를 넣어 줘. 컬러 페이드(color fade)라고도 불러.
포인터가 요소 위에 있는 동안 배경색과 글자색이 새 색으로 부드럽게 바뀌고, 벗어나면 원래대로 돌아오게 해 줘. 차분하게, 움직임 없이.
두 상태 모두 글자와 배경의 대비를 충분히 유지하고, 키보드 포커스에도 같은 효과를 보여 줘.A
마우스를 올려 보세요
Background Sweep (배경 스윕)
다른 이름 Background Fill, Slide Fill
마우스를 올리면 색 배경이 한쪽 끝에서 요소를 가로질러 쓸고 지나갑니다.
쓰는 곳
버튼, 메뉴 링크
[적용할 곳]에 배경 스윕(Background Sweep) 호버 효과를 넣어 줘. 백그라운드 필(background fill), 슬라이드 필(slide fill)이라고도 불러.
새 배경색이 왼쪽 끝에서 오른쪽 끝으로 튕김 없이 부드럽고 빠르게 쓸고 지나가고, 포인터가 벗어나면 같은 방식으로 물러나게 해 줘. 글자색은 잘 읽히도록 바뀌게 해 줘.
채움은 요소 모양 안쪽으로 잘라 두고, 키보드 포커스에도 같은 효과를 보여 줘.