/* =========================================================
RHeroAnimated — scroll-locked fertilization sequence
Sticky hero (200vh tall). As you scroll through it,
progress 0→1 animates: egg arrives, sperm swim in,
one fertilises, DNA helix forms, hero copy settles.
========================================================= */
// helper: lerp + clamp
const _lerp = (a, b, t) => a + (b - a) * t;
const _clamp = (v, lo = 0, hi = 1) => Math.max(lo, Math.min(hi, v));
const _stage = (p, a, b) => _clamp((p - a) / (b - a));
const _ease = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
function useScrollProgress(ref) {
const [p, setP] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
const el = ref.current; if (!el) return;
const rect = el.getBoundingClientRect();
const total = el.offsetHeight - window.innerHeight;
const scrolled = -rect.top;
setP(_clamp(scrolled / Math.max(1, total)));
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, [ref]);
return p;
}
function RHeroAnimated() {
const ref = React.useRef(null);
const p = useScrollProgress(ref);
// Timeline — explicit phases that match the biology so the viewer
// can actually see the sperm cross the membrane, enter the egg, and
// be absorbed before DNA forms. Settle has a long dwell so the final
// caption is comfortable to read.
const introT = _ease(_stage(p, 0.00, 0.10)); // intro copy fades out
const eggInT = _ease(_stage(p, 0.10, 0.22)); // egg materialises
const swimT = _ease(_stage(p, 0.16, 0.36)); // 5 sperm fan toward the egg
const penetrateT = _ease(_stage(p, 0.34, 0.50)); // lead sperm crosses the membrane (head moves egg-edge → center)
const insideT = _ease(_stage(p, 0.46, 0.62)); // sperm head visible *inside* the egg, dissolving
const fertiliseT = _ease(_stage(p, 0.44, 0.58)); // (kept — other sperm fade out)
const dnaT = _ease(_stage(p, 0.58, 0.76)); // DNA helix draws inside the egg
const settleT = _ease(_stage(p, 0.62, 0.82)); // caption appears with generous dwell
const exitT = _ease(_stage(p, 0.96, 1.00)); // gentle fade for handoff
// Pre-compute element transforms
const eggScale = _lerp(0.0, 1.0, eggInT);
const eggGlow = eggInT * _lerp(1, 1.35, settleT);
// sperm: 5 of them, fanned around the egg
const sperms = [
{ id: 0, fromX: -1100, fromY: -180, ang: -15, fertilise: true },
{ id: 1, fromX: -1200, fromY: 120, ang: 8 },
{ id: 2, fromX: 1100, fromY: -140, ang: 170 },
{ id: 3, fromX: 1240, fromY: 80, ang: 195 },
{ id: 4, fromX: -780, fromY: 340, ang: -40 },
];
return (
{/* sticky stage */}
{/* layered teal bg + subtle pen photo */}
{/* The fertilisation scene */}
{/* Hero copy — fades in two phases */}
International Egg Donation Agency
A Global Standard in Fertility Care.
With over 15 years of experience, Traveling Donors provides fully
managed egg donation, sperm donation, and surrogacy programs
across the world's leading fertility destinations.