Cursor Follow
Animated React cursor-following blob component with spring physics, blend and blur styling options, and performance-aware updates.
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.
Props
Contribution Graph
Animated React contribution graph component with GitHub-style heatmap cells, tooltips, and custom color scales for data visualization.
Dynamic Island
Apple-inspired Dynamic Island React component with smooth spring animations. Expandable notification pill for alerts, music players, and status updates.