Promo Plane
A little plane tows your promo banner across the top of the page. Hover pauses it, click opens it, ✕ dismisses it for good.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
An ad that people smile at instead of block. Capped per day, never covers content for long, never blocks clicks. Use it for your own promos, sponsors and affiliate offers. Do NOT put ad-network iframes (AdSense etc.) inside moving elements: that breaks their policies.
Installation
$ npm i @guetix/promo-plane
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { promoPlane } from "@guetix/promo-plane";
promoPlane({
text: "🚀 Launch week — 40% off Pro",
href: "/pricing",
delay: 6, // first flight after 6s
dailyCap: 2, // max 2 flights per visitor per day
});Usage
example.tsx
import { PromoPlane } from "@/components/guetix/promo-plane";
<PromoPlane fullscreen text="🚀 Launch week — 40% off Pro" href="/pricing" dailyCap={2} />Seasonal salesLaunch announcementsSponsor shout-outs
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Web Animations API: hover simply pauses the flight; ✕ finishes it and remembers your choice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text / href | string | — | Banner copy and link. |
| color | string | "#fde047" | Banner color. |
| duration | number | 14 | Seconds to cross. |
| delay | number | 4 | First flight after (s). |
| every | number | 0 | Repeat every (s), 0 = once. |
| dailyCap | number | 3 | Flights per visitor per day. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The banner is a real link with a label; pauses on hover/focus; dismiss button; reduced motion parks it in the corner.