Change your browser tab title with fun effects that catch attention and bring visitors back.
Shows a single message if you add one, or rotates through multiple if you add more.
// Put your messages here.
// If there's only ONE, it will just show that (default).
// If there are TWO or more, it will rotate between them.
const tabMessages = [
"👀 Hey... did you forget about me?",
"✨ Your designs are still waiting!",
"🚀 Ready when you are!"
];
// How long to wait before starting (in ms)
const startDelay = 2000;
// How fast to switch between messages if rotating (in ms)
const rotateSpeed = 2000;
// How long to wait before switching back when they return
const returnDelay = 1000;
// Should this also work on phones? true = yes, false = no
const allowMobile = false;
(function () {
if (!allowMobile && /Mobi|Android/i.test(navigator.userAgent)) return;
let originalTitle = document.title;
let index = 0;
let interval = null;
let returnTimer = null;
function startEffect() {
stopEffect();
if (tabMessages.length === 1) {
document.title = tabMessages[0];
return;
}
interval = setInterval(() => {
document.title = tabMessages[index];
index = (index + 1) % tabMessages.length;
}, rotateSpeed);
}
function stopEffect() {
clearInterval(interval);
interval = null;
}
function restore() {
stopEffect();
clearTimeout(returnTimer);
returnTimer = setTimeout(() => {
document.title = originalTitle;
}, returnDelay);
}
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
setTimeout(startEffect, startDelay);
} else {
restore();
}
});
window.addEventListener("blur", () => setTimeout(startEffect, startDelay));
window.addEventListener("focus", restore);
})();
Types out your message letter by letter. If you add more than one, it loops through them all.
// Add your messages here.
// One message = type it out once and freeze.
// Multiple messages = type them all, looping forever.
const typingMessages = [
"✍️ Wait... I was just getting to the good part",
"😏 Don’t ghost me now...",
"✨ Your designs are still here!"
];
// How long to wait before starting typing (in ms)
const typingDelay = 2000;
// How fast each letter appears (smaller = faster)
const typingSpeed = 120;
// How long to pause before moving to the next message (in ms)
const pauseBetween = 1500;
// How long to wait before switching back when they return
const returnDelay = 1000;
// Should this also work on phones? true = yes, false = no
const allowMobileTyping = false;
(function () {
if (!allowMobileTyping && /Mobi|Android/i.test(navigator.userAgent)) return;
let originalTitle = document.title;
let index = 0;
let charIndex = 0;
let typingInterval = null;
let returnTimer = null;
function startTyping() {
stopTyping();
charIndex = 0;
let currentMessage = typingMessages[index];
typingInterval = setInterval(() => {
document.title = currentMessage.substring(0, charIndex++);
if (charIndex > currentMessage.length) {
clearInterval(typingInterval);
if (typingMessages.length === 1) return;
setTimeout(() => {
index = (index + 1) % typingMessages.length;
startTyping();
}, pauseBetween);
}
}, typingSpeed);
}
function stopTyping() {
clearInterval(typingInterval);
typingInterval = null;
}
function restore() {
stopTyping();
clearTimeout(returnTimer);
returnTimer = setTimeout(() => {
document.title = originalTitle;
}, returnDelay);
}
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
setTimeout(startTyping, typingDelay);
} else {
restore();
}
});
window.addEventListener("blur", () => setTimeout(startTyping, typingDelay));
window.addEventListener("focus", restore);
})();
Picks one random line from your list every time you leave the tab.
// The different messages it can pick from (one will show at random each time)
const randomMessages = [
"👋 Still here, promise.",
"✨ Your ideas are warming up.",
"🧠 Brainwave pending…",
"🚀 Ready when you are!",
"😏 Don’t keep me waiting."
];
// How long to wait before showing the message (in ms)
const startDelay = 1200;
// How long to wait before switching back after they return (in ms)
const returnDelay = 800;
// Should this also work on phones? true = yes, false = no
const allowMobile = false;
// Always picks a different line than the one just shown (true = avoid repeats, false = allow repeats)
const avoidImmediateRepeat = true;
(function () {
if (!allowMobile && /Mobi|Android/i.test(navigator.userAgent)) return;
let originalTitle = document.title;
let returnTimer = null;
let startTimer = null;
let lastIndex = -1;
function pickRandomMessage() {
if (randomMessages.length === 0) return originalTitle;
if (!avoidImmediateRepeat || randomMessages.length === 1) {
return randomMessages[Math.floor(Math.random() * randomMessages.length)];
}
let idx;
do { idx = Math.floor(Math.random() * randomMessages.length); } while (idx === lastIndex);
lastIndex = idx;
return randomMessages[idx];
}
function showRandom() {
clearTimeout(startTimer);
startTimer = setTimeout(() => {
document.title = pickRandomMessage();
}, startDelay);
}
function restore() {
clearTimeout(returnTimer);
returnTimer = setTimeout(() => {
document.title = originalTitle;
}, returnDelay);
}
document.addEventListener("visibilitychange", () => {
document.hidden ? showRandom() : restore();
});
window.addEventListener("blur", showRandom);
window.addEventListener("focus", restore);
})();
Change your browser tab title with fun effects that catch attention and bring visitors back.