// COVIA Back-to-Top FAB with 5-platform share fan-out
// Floating button bottom-right. Appears after ~0.8 viewport of scroll.
// Hover reveals LINE / FB / X / TG / Threads sliding out to the left (stagger).
//
// Share URL is hardcoded to https://covia.io/ (production) — localhost URLs
// won't yield a working OG preview on share platforms.
function CoviaBackToTop() {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const onScroll = () => {
setVisible(window.scrollY > window.innerHeight * 0.8);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const SHARE_URL = 'https://covia.io/';
const enc = encodeURIComponent(SHARE_URL);
// SVG icons (stroke/fill inherit currentColor so hover state recolors)
const icons = {
line: (
),
fb: (
),
x: (
),
tg: (
),
threads: (
),
};
const shares = [
{ id: 'line', name: 'LINE', url: `https://social-plugins.line.me/lineit/share?url=${enc}`, icon: icons.line },
{ id: 'fb', name: 'Facebook', url: `https://www.facebook.com/sharer/sharer.php?u=${enc}`, icon: icons.fb },
{ id: 'x', name: 'X', url: `https://twitter.com/intent/tweet?url=${enc}`, icon: icons.x },
{ id: 'tg', name: 'Telegram', url: `https://t.me/share/url?url=${enc}`, icon: icons.tg },
{ id: 'threads', name: 'Threads', url: `https://www.threads.net/intent/post?text=${enc}`, icon: icons.threads },
];
const lastIdx = shares.length - 1;
return (
);
}
const fabStyle = document.createElement('style');
fabStyle.textContent = `
.fab {
position: fixed;
bottom: clamp(20px, 3vh, 36px);
right: clamp(20px, 3vw, 36px);
z-index: 100;
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition:
opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fab.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.fab-shares {
display: flex;
align-items: center;
gap: 8px;
padding-right: 2px;
}
.fab-share {
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: 50%;
background: oklch(0.16 0.008 260 / 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border);
color: var(--text-1);
text-decoration: none;
opacity: 0;
transform: translateX(16px) scale(0.82);
pointer-events: none;
transition:
opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
background 200ms, color 200ms, border-color 200ms;
/* Closing: rightmost (highest i) exits first */
transition-delay: calc((var(--last, 4) - var(--i, 0)) * 40ms);
}
.fab-share svg {
width: 16px; height: 16px;
display: block;
}
.fab:hover .fab-share,
.fab:focus-within .fab-share {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
/* Opening: rightmost (closest to main button) enters first */
transition-delay: calc((var(--last, 4) - var(--i, 0)) * 50ms);
}
.fab-share:hover {
background: var(--gold);
color: var(--surface-0);
border-color: var(--gold);
transform: translateY(-2px) scale(1);
}
.fab-share:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.fab-top {
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: 50%;
background: oklch(0.16 0.008 260 / 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border);
color: var(--text-1);
cursor: pointer;
box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.5);
transition:
background 200ms, color 200ms, border-color 200ms,
transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 200ms;
padding: 0;
}
.fab-top:hover {
background: var(--gold);
color: var(--surface-0);
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 12px 32px -6px oklch(0.78 0.16 75 / 0.35);
}
.fab-top:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.fab, .fab-share, .fab-top { transition-duration: 120ms !important; }
.fab-top:hover { transform: none; }
.fab-share:hover { transform: none; }
}
`;
document.head.appendChild(fabStyle);
window.CoviaBackToTop = CoviaBackToTop;