Peek Promo
A friendly character peeks from the edge holding a sign — only after the visitor is engaged.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Right · Peeks from the right edge. side="right"
It appears after a scroll depth or time on page, waves, and slides back on its own if ignored. Clicking the sign unfolds a compact offer card in place: no modal, no overlay. ✕ snoozes it for days.
Installation
$ npm i @guetix/peek-promo
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { peekPromo } from "@guetix/peek-promo";
peekPromo({
sign: "psst! 🎁",
title: "A gift for reading",
body: "15% off your first order.",
cta: "Claim 15% off",
href: "/shop?code=HELLO15",
afterScroll: 0.4,
});Usage
example.tsx
import { PeekPromo } from "@/components/guetix/peek-promo";
<PeekPromo fullscreen side="right" afterScroll={0.4} href="/shop?code=HELLO15" />First-order discountsNewsletter offersFree-trial nudges
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sign / title / body / cta / href | string | — | Content. |
| side | "left" | "right" | "right" | Edge. |
| afterScroll | number | 0.35 | Depth 0–1. |
| afterSeconds | number | 12 | …or seconds on page. |
| stay | number | 9 | Auto-hide after (s). |
| snoozeDays | number | 7 | Hidden after ✕ (days). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Sign is a button with aria-expanded; the offer is a labelled dialog region; nothing traps focus.