// before-after.jsx — interactive workflow diagram with drag slider
const { useState: useStateBA, useRef: useRefBA, useEffect: useEffectBA } = React;
function BeforeAfter() {
const isMobile = useIsMobile(640);
const isMobileHeader = useIsMobile(640);
const [pct, setPct] = useStateBA(50);
const ref = useRefBA(null);
const draggingRef = useRefBA(false);
// Auto-animation state. The slider gently sweeps left/right on its
// own (10s sweep window) so the comparison reads at a glance for
// passive viewers. Any user interaction (mousedown/touchstart) sets
// userActiveRef and pauses the animation; after 10s of no activity
// we resume the auto-sweep where it left off.
const userActiveRef = useRefBA(false);
const lastInteractRef = useRefBA(0);
const animStartRef = useRefBA(null);
const rafRef = useRefBA(null);
const visibleRef = useRefBA(false);
const containerRef = useRefBA(null);
const onPointer = (clientX) => {
const r = ref.current.getBoundingClientRect();
const x = Math.max(0, Math.min(r.width, clientX - r.left));
setPct((x / r.width) * 100);
};
const markInteract = () => {
userActiveRef.current = true;
lastInteractRef.current = performance.now();
animStartRef.current = null; // force re-sync when auto resumes
};
useEffectBA(() => {
const onMove = (e) => {
if (!draggingRef.current) return;
onPointer(e.clientX ?? e.touches?.[0]?.clientX);
};
const onUp = () => { draggingRef.current = false; };
window.addEventListener('mousemove', onMove);
window.addEventListener('touchmove', onMove);
window.addEventListener('mouseup', onUp);
window.addEventListener('touchend', onUp);
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('touchmove', onMove);
window.removeEventListener('mouseup', onUp);
window.removeEventListener('touchend', onUp);
};
}, []);
// Visibility tracking: only animate when the slider is actually on
// screen, so we don't burn cycles when the user is elsewhere on the
// page. Resets the animation phase when re-entering view so the
// sweep always starts from a clean state.
useEffectBA(() => {
if (!containerRef.current) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
visibleRef.current = e.isIntersecting;
if (e.isIntersecting) animStartRef.current = null;
});
}, { threshold: 0.2 });
io.observe(containerRef.current);
return () => io.disconnect();
}, []);
// Auto-sweep loop. Sine wave between ~15% and ~85% with a 10s
// period, gated on (a) user not interacting, (b) 10s elapsed since
// last interaction, (c) slider is in view.
useEffectBA(() => {
const IDLE_MS = 10000;
const PERIOD_MS = 10000;
const tick = (now) => {
const idle = !userActiveRef.current ||
(now - lastInteractRef.current) > IDLE_MS;
if (idle && visibleRef.current && !draggingRef.current) {
if (userActiveRef.current) userActiveRef.current = false;
if (animStartRef.current == null) {
// Sync sine phase to current pct so resume is seamless: solve
// pct = 50 + 35*sin(theta) for theta, then back-derive start.
const target = (pct - 50) / 35;
const theta = Math.asin(Math.max(-1, Math.min(1, target)));
animStartRef.current = now - (theta / (2 * Math.PI)) * PERIOD_MS;
}
const phase = ((now - animStartRef.current) / PERIOD_MS) * 2 * Math.PI;
const next = 50 + Math.sin(phase) * 35;
setPct(next);
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
// THE DELTA
Drag to compare a day before and after timegain.
Same team. Same volume. The admin tax disappears and those hours come back.
Industry studies estimate skilled workers lose roughly 30% of their week to non-billable administrative tasks.
{isMobile ? (
BEFORE
AFTER · TIMEGAIN
) : (
{ ref.current = node; containerRef.current = node; }}
onMouseDown={(e) => { markInteract(); draggingRef.current = true; onPointer(e.clientX); }}
onTouchStart={(e) => { markInteract(); draggingRef.current = true; onPointer(e.touches[0].clientX); }}
style={{
position: 'relative', height: 540, borderRadius: 16, overflow: 'hidden',
border: '1px solid var(--bg-line)', cursor: 'ew-resize',
userSelect: 'none', touchAction: 'none',
background: 'var(--bg-elev)',
}}>
{/* After (full) */}
{/* Before (clipped). No CSS transition on clip-path: the
handle position is updated every animation frame already,
so a transition just creates a 100ms lag between handle
and clip and competes with the rAF loop, which the
browser also throttles when nothing else on the page is
repainting. Driving clip directly off pct keeps panel and
handle locked together. */}