/* Shared animation primitives + icons for the Prisma landing page.
Reproduces the framer-motion behaviors described in the spec using
React state + IntersectionObserver + scroll math, exported to window. */
const { useState, useEffect, useRef } = React;
const EASE_EXPO = 'cubic-bezier(0.16, 1, 0.3, 1)';
const EASE_CARD = 'cubic-bezier(0.22, 1, 0.36, 1)';
/* "useInView once" — IntersectionObserver with robust fallbacks so revealed
content can never stay permanently hidden if IO callbacks don't fire. */
function useInViewOnce(rootMargin = '0px') {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
let done = false;
const reveal = () => {
if (done) return;
done = true;
setInView(true);
cleanup();
};
// Parse a single px margin (e.g. "-100px") for the manual check.
const m = parseFloat(rootMargin) || 0;
const check = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh - m && r.bottom > m) reveal();
};
const io = ('IntersectionObserver' in window)
? new IntersectionObserver(([entry]) => { if (entry.isIntersecting) reveal(); },
{ rootMargin, threshold: 0.01 })
: null;
if (io) io.observe(el);
window.addEventListener('scroll', check, { passive: true });
window.addEventListener('resize', check);
// Immediate + deferred manual checks (covers IO not firing in some hosts).
check();
requestAnimationFrame(check);
const t1 = setTimeout(check, 300);
const t2 = setTimeout(reveal, 1200); // hard safety: never leave content hidden
function cleanup() {
if (io) io.disconnect();
window.removeEventListener('scroll', check);
window.removeEventListener('resize', check);
clearTimeout(t1);
clearTimeout(t2);
}
return cleanup;
}, []);
return [ref, inView];
}
/* After `active` turns true, wait `delay` ms then return true. Used to strip the
CSS transition once the entrance animation should be finished — guarantees the
element commits to its final (visible) state even in hosts where the CSS
transition clock is frozen (JS timers still run). */
function useSettle(active, delay = 1600) {
const [settled, setSettled] = useState(false);
useEffect(() => {
if (!active) return;
const t = setTimeout(() => setSettled(true), delay);
return () => clearTimeout(t);
}, [active]);
return settled;
}
/* ---------- Icons (lucide-style thin line) ---------- */
function ArrowRight({ className = '', style = {}, strokeWidth = 2 }) {
return (
);
}
function Check({ className = '', style = {}, strokeWidth = 2.5 }) {
return (
);
}
/* Render a word with a superscript asterisk after its final character. */
function renderWithAsterisk(word) {
const head = word.slice(0, -1);
const last = word.slice(-1);
return (
{head}
{last}
*
);
}
/* ---------- WordsPullUp ---------- */
function WordsPullUp({ text, className = '', wordClassName = '', showAsterisk = false }) {
const [ref, inView] = useInViewOnce('0px');
const words = text.split(' ');
const settled = useSettle(inView, 600 + words.length * 80 + 500);
return (
{words.map((word, wi) => {
const isLast = wi === words.length - 1;
return (
{isLast && showAsterisk ? renderWithAsterisk(word) : word}
);
})}
);
}
/* ---------- WordsPullUpMultiStyle ---------- */
function WordsPullUpMultiStyle({ segments, className = '', align = 'center' }) {
const [ref, inView] = useInViewOnce('0px');
const words = [];
segments.forEach((seg) => {
seg.text.split(' ').forEach((w) => {
if (w !== '') words.push({ w, cls: seg.className || '' });
});
});
const settled = useSettle(inView, 600 + words.length * 80 + 500);
return (
{words.map((it, i) => (
{it.w}
))}
);
}
/* ---------- ScrollRevealText (per-character scroll-linked opacity) ----------
Accepts either `text` (plain string) or `segments` ([{ text, className }]) so
styled runs (e.g. an italic accent) keep the per-character parallax reveal. */
function ScrollRevealText({ text, segments, className = '', style = {} }) {
const ref = useRef(null);
const [progress, setProgress] = useState(0);
useEffect(() => {
const onScroll = () => {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
const startTop = 0.8 * vh; // progress 0 when top hits 80% down
const endTop = 0.2 * vh - rect.height; // progress 1 when bottom hits 20% down
let p = (startTop - rect.top) / (startTop - endTop);
setProgress(Math.max(0, Math.min(1, p)));
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, []);
const parts = segments && segments.length ? segments : [{ text: text || '', className: '' }];
const chars = [];
parts.forEach((seg) => {
const lines = (seg.text || '').split('\n');
lines.forEach((line, li) => {
if (li > 0) chars.push({ br: true });
[...line].forEach((ch) => chars.push({ ch, cls: seg.className || '' }));
});
});
const total = chars.length;
return (
{chars.map((item, i) => {
if (item.br) return
;
const cp = i / total;
const local = (progress - (cp - 0.1)) / 0.15; // range [cp-0.1, cp+0.05]
const o = 0.2 + 0.8 * Math.max(0, Math.min(1, local));
return {item.ch};
})}
);
}
/* ---------- CardReveal (scale + fade entrance, staggered) ---------- */
function CardReveal({ index = 0, children, className = '', style = {} }) {
const [ref, inView] = useInViewOnce('-100px');
const settled = useSettle(inView, 700 + index * 150 + 400);
return (
{children}
);
}
/* ---------- FadeUp (timed mount fade for hero content) ---------- */
function FadeUp({ delay = 0, as = 'div', children, className = '', style = {} }) {
const [shown, setShown] = useState(false);
useEffect(() => {
const t = setTimeout(() => setShown(true), 60);
return () => clearTimeout(t);
}, []);
const settled = useSettle(shown, delay * 1000 + 800 + 400);
const El = as;
return (
{children}
);
}
Object.assign(window, {
useInViewOnce, ArrowRight, Check,
WordsPullUp, WordsPullUpMultiStyle, ScrollRevealText, CardReveal, FadeUp
});