/* global React, FramerMotion */
const { motion, useInView, useScroll, useTransform, AnimatePresence } = FramerMotion;
const { useRef, useState, useEffect, useMemo } = React;
const EASE_OUT_QUART = [0.22, 1, 0.36, 1];
const EASE_EXPO = [0.16, 1, 0.3, 1];
/* If the document is backgrounded at boot, the browser throttles RAF/WAAPI
to 0fps and animations never commit — leaving the page stuck on initial
states. In that case we fast-forward: components mount in their final
state with zero-duration animations. Real browser tabs (visible) animate
normally. */
const SKIP_ANIM = (typeof document !== "undefined" && document.hidden);
// MotionGlobalConfig.skipAnimations is also set in the HTML boot script,
// so framer-motion bypasses transitions. We keep SKIP_ANIM as a flag for
// our own custom looping animations (chat stream, dashboard counter) so
// they don't run heavy timers while hidden either.
/* useDeferredMount — return true after a small delay. */
function useDeferredMount(delay = 0) {
const [ready, setReady] = useState(SKIP_ANIM);
useEffect(() => {
if (SKIP_ANIM) return;
const id = setTimeout(() => setReady(true), 30 + delay);
return () => clearTimeout(id);
}, [delay]);
return ready;
}
/* Helper to merge a base transition with the skip-anim override */
function tx(base) {
return SKIP_ANIM ? { duration: 0 } : base;
}
/* WordsPullUp — splits text by spaces, each word slides up. */
function WordsPullUp({ text, className = "", delay = 0, stagger = 0.08, showAsterisk = false, asteriskClass = "" }) {
const ready = useDeferredMount();
const words = text.split(" ");
if (SKIP_ANIM) {
return (
{words.map((w, i) => {
const isLast = i === words.length - 1;
return (
{w}
{showAsterisk && isLast && (
*
)}
);
})}
);
}
return (
{words.map((w, i) => {
const isLast = i === words.length - 1;
return (
{w}
{showAsterisk && isLast && (
*
)}
);
})}
);
}
/* WordsPullUpMultiStyle — array of {text, className} segments. */
function WordsPullUpMultiStyle({ segments, className = "", delay = 0, stagger = 0.06, justify = "center" }) {
const ready = useDeferredMount();
const flat = [];
segments.forEach((seg) => {
seg.text.split(" ").forEach((w) => {
if (w) flat.push({ word: w, cls: seg.className || "" });
});
});
if (SKIP_ANIM) {
return (
{flat.map((item, i) => (
{item.word}
))}
);
}
return (
{flat.map((item, i) => (
{item.word}
))}
);
}
/* AnimatedParagraph — scroll-linked per-char opacity reveal */
function AnimatedParagraph({ text, className = "" }) {
if (SKIP_ANIM) {
return {text}
;
}
const ref = useRef(null);
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start 0.85", "end 0.35"],
});
const chars = useMemo(() => Array.from(text), [text]);
return (
{chars.map((ch, i) => {
const p = i / chars.length;
const range = [Math.max(0, p - 0.08), Math.min(1, p + 0.06)];
return (
);
})}
);
}
function AnimatedChar({ char, progress, range }) {
const opacity = useTransform(progress, range, [0.18, 1]);
return {char};
}
/* FadeUp — small reusable wrapper, animates on mount */
function FadeUp({ children, delay = 0, y = 20, duration = 0.9, className = "" }) {
const ready = useDeferredMount();
if (SKIP_ANIM) {
return {children}
;
}
return (
{children}
);
}
/* ===== ICONS ===== */
function IconArrowRight({ className = "w-4 h-4", style }) {
return (
);
}
function IconCheck({ className = "w-4 h-4" }) {
return (
);
}
function IconPlus({ className = "w-4 h-4" }) {
return (
);
}
function IconMinus({ className = "w-4 h-4" }) {
return (
);
}
function IconSparkle({ className = "w-4 h-4" }) {
return (
);
}
/* useCountUp — animates an integer from 0 to target. */
function useCountUp(target, duration = 1800, deps = []) {
const [val, setVal] = useState(SKIP_ANIM ? target : 0);
useEffect(() => {
if (SKIP_ANIM) { setVal(target); return; }
let raf;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(eased * target));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
return val;
}
/* AnimatedSvgUnderline — wavy underline that draws itself */
function AnimatedSvgUnderline({ color = "currentColor", className = "" }) {
return (
);
}
Object.assign(window, {
WordsPullUp, WordsPullUpMultiStyle, AnimatedParagraph, FadeUp, useDeferredMount,
IconArrowRight, IconCheck, IconPlus, IconMinus, IconSparkle,
EASE_OUT_QUART, EASE_EXPO, SKIP_ANIM,
useCountUp, AnimatedSvgUnderline,
});