Internal card layers translate in 2D toward the cursor at different intensities — hero block moves the most, inner element at 40%, text at 20% — creating a parallax depth illusion without any 3D rotation or perspective.
Goal: Create a "Magnetic" card animation (parallax content layers).
Visual behavior: The card container stays flat with no 3D rotation. Instead, internal layers translate in 2D toward the cursor with different intensities, creating a parallax depth illusion. The hero image/icon block moves the most (±14px x, ±10px y), an inner element moves at 40% of that, and the text block moves at 20%. All layers spring back to center on mouse leave. No perspective, no rotateX/Y — this is a pure translate-based depth effect distinct from a 3D tilt.
Technique:
- Track mouse position within the card via onMouseMove
- Compute normalized offset: (clientX - rect.left) / rect.width - 0.5 → range [-0.5, +0.5]
- Multiply by strength for each layer: hero ×14/10, inner element ×5/4, text ×3/2
- Apply via style={{ transform: `translate(${dx}px, ${dy}px)` }} with willChange: transform
- During mouse tracking: transition: 'transform 60ms linear' (instant follow)
- On mouse leave: transition: 'transform 500ms cubic-bezier(0.23, 1, 0.32, 1)' (slow spring back)
- Scale the hero block up slightly (1.05) on hover for an additional depth cue
Accessibility: Wrap mouse-tracking in a prefers-reduced-motion check; skip all transforms if reduced motion is preferred.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.