Tab Tricks
When visitors switch tabs, your title cycles 'Come back 👀' and the favicon becomes eyes looking around.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
When they come back, a toast says welcome back. Bonus: progress(0–1) draws a progress ring in the favicon for uploads, timers or builds. The original title and icon are restored exactly. Try it now: switch tabs and look at this one.
Installation
$ npm i @guetix/tab-tricks
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { tabTricks } from "@guetix/tab-tricks";
const tab = tabTricks({ away: ["Your cart misses you 🛒", "Still 20% off…"], favicon: "eyes" });
tab.progress(0.42); // favicon progress ring
tab.progress(null); // restoreUsage
example.tsx
import { tabTricks } from "@/components/guetix/tab-tricks";
import { useEffect } from "react";
export function TabMagic() {
useEffect(() => tabTricks({ welcome: "Welcome back 👋" }).destroy, []);
return null;
}E-commerce (cart reminders)Long tasks / uploadsPersonal sites
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| away | string[] | — | Titles while hidden. |
| welcome | string | "Welcome back 👋" | Toast on return ('' disables). |
| interval | number | 1400 | ms between titles. |
| favicon | "eyes" | "wave" | "none" | "eyes" | Away animation. |
| accent | string | — | Icon/toast color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The welcome toast is a polite status; nothing changes while the tab is visible.