Hover / React + Web APIs
Perspective Tilt
Tilt a card toward the pointer inside a bounded perspective.
Open experiment[ EXP-003 / PLAYGROUND MODE ]
Magnetic Field / Playground
Pull a signal node toward the pointer with a soft, bounded attraction.
EXP-003 / LIVE PREVIEW
FIELD / POINTER ATTRACTION
REDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
01 / Overview
A small magnetic target adds tactile feedback to a call to action. Pointer coordinates remain bounded so the control stays reachable.
02 / How it works
Pointer position is measured relative to the field center and limited by the configured radius. A single scheduled frame updates the node transform. Leaving the field returns it to center.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (magneticField), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Attraction | Number | 0.05–1 | 0.35 |
| Field radius | Number | 80–260px | 180px |
| Return duration | Number | 0.1–1s | 0.35s |
05 / Usage & accessibility
A working demonstration created for this archive, not a claim of historical client work. Activate manually. Reduced motion uses a static result. Animation handles and listeners are released on unmount.
Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.
Related experiments.
Hover / React + Web APIs
Border Trace
Draw a continuous frame around an active control.
Open experiment