Shy Button
Make 'Unsubscribe' run away from the mouse — dodge, teleport or shrink — until it gives up.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Dodge · Slides away from the cursor. mode="dodge"
After `patience` attempts it gives up with a sigh and stays. It never moves for keyboard focus, so it stays accessible and honest.
Installation
$ npm i @guetix/shy-button
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { shy } from "@guetix/shy-button";
shy("#unsubscribe", { mode: "teleport", patience: 5, giveUpText: "fine… 😮💨" });Usage
example.tsx
import { ShyButton } from "@/components/guetix/shy-button";
<div className="relative h-40">
<ShyButton mode="dodge" onClick={unsubscribe}>Unsubscribe</ShyButton>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "dodge" | "teleport" | "shrink" | "dodge" | How it escapes. |
| distance | number | 90 | Trigger distance (px). |
| patience | number | 6 | Attempts before giving up. |
| giveUpText | string | — | Label after giving up. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Never moves while focused or for touch; it's a real button the whole time.