What is wink-cursor?

wink-cursor is a lightweight React component that replaces the default system cursor with a custom image — and makes it "wink" on every click. Instead of a static pointer, users see a playful emoji or icon that briefly changes to a wink animation whenever they click anywhere in the app. The component is built for simplicity: install it, drop it into your React app, and it works across the entire page with zero configuration required.

Who it's for

• Product designers who want to add a touch of personality to onboarding flows or landing pages without custom animation work.
• React developers looking for a drop-in micro-interaction that works out of the box with minimal code.
• Creative project builders making portfolios, interactive stories, or playful web experiences where the cursor itself becomes part of the brand.

Key features

Fully customizable images and size

You can set any image URL for both the idle cursor and the click-triggered wink image. The size prop lets you control the cursor dimensions in pixels, so it fits your design — whether you want a tiny emoji or a larger branded icon.

Adjustable wink duration

The duration prop determines how long the wink image stays visible after a click (in milliseconds). This gives you fine control over the animation feel — from a quick flash to a more lingering playful effect.

Lightweight and easy to install

The component is published as a single npm package with no heavy dependencies. Installation is a single command, and usage requires just one import and one JSX tag. No CSS overrides or global style changes needed.

What stands out

"A little delight goes a long way — especially in onboarding, landing pages, and creative projects."

Most web interfaces feel purely transactional. wink-cursor turns a mundane action — clicking — into a moment of surprise. Instead of building custom hover states or animation sequences, you get a ready-made micro-interaction that works across your entire app. The wink effect is subtle enough not to distract, but noticeable enough to make users smile. It's a rare example of a UI component that prioritizes joy over utility, without sacrificing performance.

Worth checking out if…

You're building a React app that could use a dash of personality — especially for landing pages, onboarding flows, portfolios, or any project where first impressions matter. If you've ever wanted your cursor to feel less like a tool and more like a character, wink-cursor delivers that in under 10 lines of code.