---
name: magnetic-hover
description: "Add restrained pointer-following motion to a rare promotional action. Use for pointer, magnetic, hover."
---

# Magnetic hover

Add restrained pointer-following motion to a rare promotional action.

## Implementation decisions

1. Keep the hit target stationary and move its visual inner layer.
2. Normalize coordinates against bounds and clamp displacement.
3. Enable only for fine pointers with hover; reset on leave.
4. Keep keyboard focus stationary and respect reduced motion.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- The target never runs away from the cursor.
- Touch does not retain hover.
- Keyboard access remains predictable.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/magnetic

Version 2.0.0 · Original WEBCRAFT content · MIT