// Shared UI primitives — exposed on window for cross-script use
const { motion, AnimatePresence, useScroll, useTransform, useSpring, useMotionValue, useInView, useMotionValueEvent, useReducedMotion } = window.FramerMotion || window.Motion || {};
// Detected once at module load: page hidden iframes (e.g. preview captures) throttle RAF,
// so initial framer-motion animations never commit. Skip in-anims when hidden.
const IS_HIDDEN = typeof document !== 'undefined' && document.visibilityState === 'hidden';
// ---- Reveal hook (triggers on viewport entry; works in hidden iframes too) ----
function useScrollReveal(rootMarginRatio = 0.08) {
const ref = React.useRef(null);
// If document is hidden (background tab / hidden iframe), don't animate at all — show immediately.
const initialHidden = (typeof document !== 'undefined' && document.visibilityState === 'hidden');
const [shown, setShown] = React.useState(initialHidden);
React.useEffect(() => {
if (initialHidden) return;
let raf, timeout, fallback;
const check = () => {
const el = ref.current;
if (!el) return false;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
const margin = vh * rootMarginRatio;
const inView = r.top < vh - margin && r.bottom > margin;
if (inView) {
setShown(true);
cleanup();
return true;
}
return false;
};
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(check);
};
const cleanup = () => {
window.removeEventListener('scroll', onScroll, true);
document.removeEventListener('scroll', onScroll, true);
window.removeEventListener('resize', onScroll);
document.removeEventListener('visibilitychange', onVisible);
cancelAnimationFrame(raf);
clearTimeout(timeout);
clearTimeout(fallback);
};
const onVisible = () => {
if (document.visibilityState === 'visible') check();
};
// Run an immediate viewport check; if not in view, wait for scroll/visibility.
if (!check()) {
window.addEventListener('scroll', onScroll, { passive: true, capture: true });
document.addEventListener('scroll', onScroll, { passive: true, capture: true });
window.addEventListener('resize', onScroll);
document.addEventListener('visibilitychange', onVisible);
// Re-check after layout settles (fonts, images)
timeout = setTimeout(check, 80);
// Safety net
fallback = setTimeout(() => setShown(true), 1500);
}
return cleanup;
}, [rootMarginRatio]);
return [ref, shown];
}
// ---- Aurora background ----
function Aurora() {
return (
);
}
// ---- Reveal on scroll ----
function Reveal({ children, delay = 0, y = 24, className = "" }) {
const [ref, shown] = useScrollReveal();
// Capture whether we're starting already-shown (hidden iframe / SSR hydrate)
const startShown = React.useRef(shown).current;
return (
{children}
);
}
// ---- Animated text by word ----
function SplitText({ text, className = "", delay = 0, stagger = 0.05 }) {
const words = text.split(" ");
const [ref, shown] = useScrollReveal(0.05);
const startShown = React.useRef(shown).current;
return (
{words.map((w, i) => (
{w}
))}
);
}
// ---- Section header with chapter number + title ----
function SectionHeader({ chapter, eyebrow, title, lede }) {
return (
{chapter}
{eyebrow}
{lede && (
{lede}
)}
);
}
// ---- Magnetic button ----
function MagneticButton({ children, href, onClick, primary = false, className = "" }) {
const ref = React.useRef(null);
const x = useMotionValue(0);
const y = useMotionValue(0);
const sx = useSpring(x, { stiffness: 180, damping: 18 });
const sy = useSpring(y, { stiffness: 180, damping: 18 });
function handleMove(e) {
const r = ref.current.getBoundingClientRect();
const mx = e.clientX - (r.left + r.width / 2);
const my = e.clientY - (r.top + r.height / 2);
x.set(mx * 0.25);
y.set(my * 0.25);
}
function handleLeave() { x.set(0); y.set(0); }
const inner = (
{children}
);
const base = `group relative inline-flex items-center justify-center px-6 py-3 rounded-full text-sm font-medium tracking-wide overflow-hidden transition-colors ${className}`;
const variant = primary
? "bg-bone-100 text-ink-900 hover:bg-mint-300"
: "border border-bone-300/20 text-bone-100 hover:border-mint-400 hover:text-mint-300";
const Tag = href ? "a" : "button";
return (
{inner}
);
}
// ---- Animated counter ----
function Counter({ to, suffix = "", duration = 1.6 }) {
const [ref, inView] = useScrollReveal();
const [val, setVal] = React.useState(0);
React.useEffect(() => {
if (!inView) return;
let raf;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / (duration * 1000));
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(eased * to));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [inView, to, duration]);
return {val}{suffix};
}
// ---- Icons (line) ----
const Icon = {
Mail: (p) => ,
Phone: (p) => ,
Pin: (p) => ,
Download: (p) => ,
Arrow: (p) => ,
ArrowDown: (p) => ,
Stethoscope: (p) => ,
Brain: (p) => ,
Book: (p) => ,
Award: (p) => ,
Beaker: (p) => ,
Sparkle: (p) => ,
Linkedin: (p) => ,
Github: (p) => ,
X: (p) => ,
};
// ---- Top progress bar ----
function ScrollProgress() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let raf;
const update = () => {
const h = document.documentElement.scrollHeight - window.innerHeight;
const p = h > 0 ? window.scrollY / h : 0;
el.style.transform = `scaleX(${Math.max(0, Math.min(1, p))})`;
};
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(update);
};
update();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", update);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", update);
cancelAnimationFrame(raf);
};
}, []);
return (
);
}
// ---- Marquee (clinical principles) ----
function Marquee({ items }) {
const row = [...items, ...items];
return (
{row.map((it, i) => (
{it}
✦
))}
);
}
// Expose to window
Object.assign(window, {
Aurora, Reveal, SplitText, SectionHeader, MagneticButton, Counter, Icon, ScrollProgress, Marquee, useScrollReveal, IS_HIDDEN
});