본문으로 건너뛰기
cccskills
무료GitHub에 공개

magnetic-button

Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch and under prefers-reduced-motion. Do not use it on dense UIs full of buttons.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything
설치 방법 보기

포함된 파일(5)

  • SKILL.md1.9 KB
  • magnetic-button.css708 B
  • magnetic-button.js1.6 KB
  • preview.html1.2 KB
  • recipe.motion.yaml1.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

magnetic-button

A button that leans toward the cursor, then springs back. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

  • A single primary call-to-action you want to feel alive (hero "Get started" / "Try it").

When NOT to use it (restraint)

  • Dense UIs with many buttons — it becomes chaotic. Reserve for 1–2 primary targets.
  • Touch-only contexts (no cursor). The recipe disables itself there automatically.

How to apply

  1. Copy magnetic-button.css and magnetic-button.js into the project, and link them.
  2. Mark the button: 
    <button class="magnetic" data-magnet-strength="0.3">Get started</button>
  3. Auto-attaches to .magnetic. Keep strength small (~0.2–0.4) so the pull stays subtle.

Accessibility & performance

  • Disabled under prefers-reduced-motion and on (hover: none) touch devices.
  • Transform only; resets on pointerleave.

Framework notes

  • React: call attachMagnetic(ref.current) in useEffect, guarded by the same reduced-motion/touch checks.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

anim-backindown

무료

Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything8962026년 7월 7일 업데이트

anim-backinleft

무료

Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything8962026년 7월 7일 업데이트

anim-backinright

무료

Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything8962026년 7월 7일 업데이트

anim-backinup

무료

Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything8962026년 7월 7일 업데이트

anim-backoutdown

무료

Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything8962026년 7월 7일 업데이트

anim-backoutleft

무료

Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/motion-anything8962026년 7월 7일 업데이트

nexu-io의 스킬 모두 보기

이 스킬의 문제 신고