Cursor Follow
Smooth cursor-following blob for delightful feedback.
Installation
npx smoothui-cli add cursor-followFeatures
- Tracks pointer with spring animation
- Blend/blur styling options
- Performance-aware updates
- Easy theming
Accessibility
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
role="application" | Container | Indicates the region is an interactive application widget |
tabIndex={0} | Container | Makes the container focusable for keyboard/focus events |
Screen Reader
- The component listens to
onFocusandonBlurevents in addition to mouse events, allowingdata-cursor-textcontent to be triggered by focus. - The cursor bubble itself is purely decorative and uses
pointer-events: none, so it does not interfere with assistive technology.
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the cursor bubble appears instantly without scale or opacity entrance animations. The spring-based position tracking still operates via motion values.