/* Shared primitives + hooks */
const { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } = React;
/* --- Reveal on scroll --- */
function Reveal({ children, className = '', delay = 0, as: As = 'div' }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
let revealed = false;
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const show = () => {
if (revealed) return;
revealed = true;
// The CSS handles the optional entrance flourish via a keyframe
// animation tied to .in. Base .reveal is visible by default — no
// animation timeline can ever leave the page hidden.
el.classList.add('in');
};
// If already in viewport on mount, reveal after delay
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh && r.bottom > 0) {
const t = setTimeout(show, delay);
return () => clearTimeout(t);
}
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(show, delay);
io.unobserve(e.target);
}
});
}, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });
io.observe(el);
// Safety-net: never let content stay hidden longer than 1.2s
const safety = setTimeout(show, 1200 + delay);
return () => { io.disconnect(); clearTimeout(safety); };
}, [delay]);
return {children};
}
/* --- Animated count-up (when scrolled into view) --- */
function CountUp({ to = 100, suffix = '', prefix = '', duration = 1600, decimals = 0, className = '' }) {
const ref = useRef(null);
const [val, setVal] = useState(0);
const started = useRef(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(to * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
const display = decimals ? val.toFixed(decimals) : Math.round(val).toString();
return {prefix}{display}{suffix};
}
/* --- Magnetic button wrapper --- */
function Magnetic({ children, strength = 14, className = '' }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
let raf = 0; let cx = 0, cy = 0;
const onMove = (e) => {
const r = el.getBoundingClientRect();
const x = e.clientX - (r.left + r.width / 2);
const y = e.clientY - (r.top + r.height / 2);
cx += (x / r.width * strength - cx) * 0.2;
cy += (y / r.height * strength - cy) * 0.2;
el.style.transform = `translate(${cx}px, ${cy}px)`;
};
const onLeave = () => { el.style.transform = ''; };
el.addEventListener('mousemove', onMove);
el.addEventListener('mouseleave', onLeave);
return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(raf); };
}, [strength]);
return {children};
}
/* --- Section wrapper --- */
function Section({ id, dark = true, className = '', children, label }) {
return (
{label && (
{label}
)}
{children}
);
}
/* --- Mini chip / badge --- */
function Chip({ children, tone = 'violet', className = '' }) {
const tones = {
violet: 'bg-violet-600/10 text-violet-500 border-violet-600/20',
cyan: 'bg-cy-400/10 text-cy-400 border-cy-400/20',
magenta: 'bg-mag-400/10 text-mag-400 border-mag-400/20',
ink: 'bg-ink-700/50 text-paper-100 border-ink-600/60',
light: 'bg-ink-900/5 text-ink-900 border-ink-900/10',
};
return (
{children}
);
}
/* --- Logo --- */
function Logo({ className = '', dark = true, size = 38, hideText = false, textClass = '' }) {
return (
{!hideText && (
Flowo
)}
);
}
/* --- Logo mark only --- */
function LogoMark({ size = 38, className = '', glow = true }) {
return (
{glow && }
);
}
/* --- Section heading helper --- */
function SectionEyebrow({ children, dark = true, className = '' }) {
return (
{children}
);
}
/* --- Tiny arrow icon --- */
const ArrowRight = ({ className = '' }) => (
);
const Icon = {
Arrow: ArrowRight,
Check: ({ className = '' }) => (
),
Plus: ({ className = '' }) => (
),
Minus: ({ className = '' }) => (
),
Spark: ({ className = '' }) => (
),
};
/* expose */
Object.assign(window, { Reveal, CountUp, Magnetic, Section, Chip, Logo, LogoMark, SectionEyebrow, Icon });