入力すると下のデモ・コード・AIプロンプトが全て即座に書き換わります。コピーすればそのまま自分のサイトで使えます。
<a href="#" class="magnetic-link">EXPLORE</a>
.magnetic-link {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 5rem;
font-weight: 600;
letter-spacing: 0.1em;
color: #1A1A1A;
text-decoration: none;
padding: 1.5rem 2.5rem;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
color 0.3s ease;
will-change: transform;
cursor: pointer;
}
.magnetic-link:hover {
color: #E91B89;
}
@media (prefers-reduced-motion: reduce) {
.magnetic-link { transition: color 0.3s ease; }
}const link = document.querySelector('.magnetic-link');
const strength = 0.3;
const radius = 150;
document.addEventListener('mousemove', (e) => {
const rect = link.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = e.clientX - cx;
const dy = e.clientY - cy;
const distance = Math.hypot(dx, dy);
if (distance < radius) {
link.style.transform = `translate(${dx * strength}px, ${dy * strength}px)`;
} else {
link.style.transform = 'translate(0, 0)';
}
});Implement a "Magnetic Hover" effect on a link element. Behavior: - The element follows the cursor when within 150px proximity. - Attraction strength: 30% of cursor offset from element center. - Smoothly returns to origin when cursor exits the radius. - Use transform (translate) only. No top/left. - Easing: cubic-bezier(0.23, 1, 0.32, 1), 0.4s. - On direct hover: color shifts to brand accent (#E91B89). Constraints: - Vanilla JS only, no dependencies. - Add `will-change: transform` for GPU acceleration. - Respect prefers-reduced-motion (disable transform animation). - Single mousemove listener on document, not on element. Output: HTML + CSS + JS in 3 separate code blocks.
// .cursorrules or paste into Cursor chat
Create a magnetic hover interaction:
Element: an <a> tag with class "magnetic-link"
Effect: the link translates toward the cursor when distance < 150px,
with strength factor 0.3 of the offset vector.
Tech stack: vanilla HTML/CSS/JS (no React, no libraries).
Performance:
- Use transform: translate() only (no layout-triggering properties).
- Apply will-change: transform.
- Single document-level mousemove listener.
Accessibility:
- @media (prefers-reduced-motion: reduce) → disable the translate.
- Keep color hover transition active either way.
Brand color on hover: #E91B89.
Easing: cubic-bezier(0.23, 1, 0.32, 1), duration 0.4s.
Generate complete index.html with inline <style> and <script>.Build a React component called <MagneticLink> with these props: - children: ReactNode (the link label) - href: string - strength?: number (default 0.3) - radius?: number (default 150) Behavior: - The component translates toward the cursor when within `radius` px. - Translation = (cursor - center) * strength. - Returns to (0,0) outside radius. - Use useRef + useEffect for the mousemove listener. - Cleanup listener on unmount. Styling (Tailwind): - text-6xl font-semibold tracking-widest uppercase - transition-transform duration-[400ms] ease-[cubic-bezier(0.23,1,0.32,1)] - hover:text-pink-600 (use brand #E91B89 if possible via arbitrary value) - will-change-transform Accessibility: - Honor prefers-reduced-motion via window.matchMedia.