cursor
Soft Cursor
A small core and spring-lagging follower.
- cursor
Quick usage
import { SoftCursor } from "@pinky-ui/effects";
<SoftCursor />Install
Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/effectspnpm add @pinky-ui/effectsyarn add @pinky-ui/effectsnpx pinky-ui add soft-cursorPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Motion never carries the only meaning; the underlying content remains in the DOM.
- Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.
Reduced motion
The effect resolves to a static readable state when motion is reduced.
When to use
- As a restrained enhancement to meaningful content.
When not to use
- When the content or control would be unclear without motion.
Skill
Purpose
SoftCursor adds a small pointer core and a larger spring-lagging follower for fine-pointer desktop interfaces. It is a gentle enhancement for a portfolio, hero or project surface, not a replacement for the browser cursor.
Use it when the page has one calm signature interaction and enough whitespace for a follower to be legible. Use followerOnly when the native pointer should remain especially prominent. Do not use it over dense forms, data tables, text editing, or every component on a page.
Keep followerSize around 28–48px and hoverScale near 1–1.7. Leave hideNative off unless the design genuinely benefits and form controls still retain their native cursor. The effect is aria-hidden and pointer-transparent; the underlying controls must remain complete.
It disables itself for coarse pointers and reduced motion. Never make cursor decoration the only hover or focus affordance. Pair it with CursorProvider/CursorText only for short, redundant labels.