Hover / React + Web APIs
Magnetic Field
Pull a signal node toward the pointer with a soft, bounded attraction.
Open experiment[ EXP-019 / PLAYGROUND MODE ]
Velocity Stretch / Playground
Stretch a cursor marker in the direction of travel.
EXP-019 / LIVE PREVIEW
VIEWDRAG
STATIC / REDUCED MOTIONREDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
01 / Overview
Stretch a cursor marker in the direction of travel. An independent interaction study built for the Resources archive.
02 / How it works
Measure frame-to-frame velocity to calculate the marker angle and bounded horizontal scale.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (velocityStretch), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Strength | Number | 0.2–1 | 0.6 |
05 / Usage & accessibility
Enable playback, then move across the preview. Hover controls also respond to focus and activation; cursor studies offer arrow-key movement and tap positioning. Reduced motion keeps a static result.
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.
Cursor / React + Web APIs
Smooth Follower
Follow the pointer with a softly delayed ring.
Open experimentCursor / React + Web APIs
Cursor Trail
Leave a short chain of fading dots behind the pointer.
Open experiment