Exit Whisper
Exit intent without the rage: a small note drops on a string from the top edge — no modal.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Triggered when the cursor races to the tab bar (or a fast scroll-up on mobile). One line and one button; it reels itself back up if ignored. Max once per session.
Installation
$ npm i @guetix/exit-whisper
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { exitWhisper } from "@guetix/exit-whisper";
exitWhisper({ text: "Your cart is saved — free shipping today.", cta: "Use FREESHIP", href: "/cart" });Usage
example.tsx
import { ExitWhisper } from "@/components/guetix/exit-whisper";
<ExitWhisper fullscreen text="Your cart is saved — free shipping today." href="/cart" />Abandoned cartsFree-shipping nudgesNewsletter last call
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text / cta / href | string | — | Content. |
| stay | number | 6 | Auto-hide after (s). |
| minTime | number | 8 | Min seconds on page. |
| color | string | — | Button color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Status role, dismiss button, no focus trap, no overlay.