/* Aevitan website — Home: hero, orbit signature, collection, philosophy, system. */
const DSh = window.AevitanDesignSystem_6a042d;
// Cart + ordering live in the authenticated portal (separate origin). Public CTAs route there to sign in.
const PORTAL_URL = (typeof location !== 'undefined' && location.hostname === 'localhost')
? 'http://localhost:3001'
: 'https://portal.aevitan.com';
// B39 (a11y): in-content CTAs need a real root-relative href to be keyboard-focusable and to carry
// link semantics — the onClick still drives SPA nav (preventDefault). Uniquely named so it can't
// collide with another Babel script's top-level const (the kit shares one global lexical scope).
const RP_HOME = (window.AEV_ROUTES || {}).paths || {};
// [name, category, image, lowest catalog price (USD), description, productId|null]
// B49: this is only the OFFLINE fallback (id=null → the More+ opens the local drawer). When the
// live feed answers, the section shows the 4 real portfolio products most present in member
// wishlists (daily-rotating ties), each carrying its real id so More+ deep-links the shop modal.
const COLLECTION = [
['AEVI APEX-T', 'Metabolic peptide', '../../assets/aevi-apex-t.png', 420,
'Sterile, lyophilized tirzepatide for metabolic and recovery protocols. Prescription-grade, third-party assayed, and serialized to the individual vial.', null],
['AEVI NOVEN', 'NAD+ supplement', '../../assets/aevi-noven.png', 95,
'Sublingual NAD+ precursor strips for daily cellular-energy support. Batch-verified for identity and content, never marketing claims.', null],
['AEVI AMAZON', 'Daily capsules', '../../assets/aevi-amazon.png', 68,
'NMN paired with Amazon-sourced actives in a daily capsule: the consistent foundation of an integrated longevity protocol.', null],
['AEVI DERMA', 'Skin & surface', '../../assets/aevi-derma.png', 140,
'GHK-Cu topical cream for skin and surface vitality. Clinical-grade actives, dermatologist-formulated, traceable from batch to you.', null],
];
const PILLARS = [
['Research', 'Through proprietary algorithms, our platform continuously review thousands of scientific articles, clinical trials and clinical reports that may be used as a valuable tool to promote longevity and wellness.'],
['Curate', 'The most promising product candidates are submitted to our scientific board review to assess claiming, ADME (absorption, distribution, metabolism and elimination), directions and adverse reactions.'],
['Integrate', 'If the reward outweighs the risk when it comes to reported or measured effects and safety, the product is integrated in our portfolio.'],
];
const CLUB_PATHS = [
['How to belong', 'One free membership', 'Patients, health professionals, clinics and resellers all enter through the same basic signup. Additional information and a separate declaration are requested only when relevant to the selected member type or action.'],
['Member perk', 'Club standing', 'Club standing reflects sustained activity within the Club. It is a recognition of participation, not a separate way in, and it may qualify you for preferential pricing with participating consultants.'],
['The member benefit', 'Professional curation reports', 'Every member reads the board\u2019s opinion on each product. The professional report adds the full evaluation, the batch certificate of analysis and the manufacturer\u2019s package insert.'],
];
const SYSTEM = [
['Assess', 'Biomarkers & baseline', 'Longevity begins with measurement: biological age and biomarkers set the starting point.'],
['Metabolic', 'Peptides', 'Verified metabolic and recovery peptides, the engine of the protocol.'],
['Foundation', 'Supplements', 'Daily NAD+, NMN and actives: the consistent base that compounds over time.'],
['Surface', 'Cosmetics & topicals', 'Skin and surface care, so visible vitality matches internal health.'],
];
const ORBIT_ITEMS = [
{ label: 'Lab Tested', lx: 0, ly: -248,
body: 'Every batch is sent to an independent laboratory. Quality control and consistency are a must.' },
{ label: 'Serialized', lx: 238, ly: -22,
body: 'Each unit carries a unique serial and a tamper-evident seal, so no two products ever share an identity.' },
{ label: 'Scientific-reviewed', lx: 0, ly: 248,
body: 'Our scientific board reviews every product and decides admission. Curation means saying NO far more often than YES.' },
{ label: 'Traceable', lx: -238, ly: 30,
body: 'Scan a code to trace any unit from us to you. We adopted the best practices to surface possible clones the moment they appear.' },
];
const ORBIT_DOTS = [30, 95, 150, 210, 270, 330];
/** Masked heading line — rises from an overflow mask when its section reveals. */
function Mask({ children, className = '' }) {
return {children};
}
/* The orbit signature: scroll-scrubbed "explosion" from a lone core into the full
ringed system, with strong 3D parallax, a core that expands A → Aevitan on hover,
and orbiting trust labels that open a detail panel on hover. Fully JS-driven. */
function OrbitRing() {
const { Kicker } = DSh;
const secRef = React.useRef(null);
const fieldRef = React.useRef(null);
const coreRef = React.useRef(null);
const coreARef = React.useRef(null);
const coreFullRef = React.useRef(null);
const panelRef = React.useRef(null);
const [activeIdx, setActiveIdx] = React.useState(-1);
const [isMobile, setIsMobile] = React.useState(false);
const S = React.useRef({ mx: 0, my: 0, coreHover: false, activeIdx: -1 });
React.useEffect(() => {
const mq = window.matchMedia('(max-width:760px)');
const on = () => setIsMobile(mq.matches);
on();
mq.addEventListener('change', on);
return () => mq.removeEventListener('change', on);
}, []);
const setActive = (i) => { S.current.activeIdx = i; setActiveIdx(i); };
const setCore = (v) => { S.current.coreHover = v; };
React.useEffect(() => {
if (isMobile) return undefined;
const sec = secRef.current, field = fieldRef.current, core = coreRef.current;
const aEl = coreARef.current, fullEl = coreFullRef.current, panel = panelRef.current;
if (!sec || !field) return;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const rings = [...field.querySelectorAll('[data-ring]')];
const dots = [...field.querySelectorAll('[data-dot]')];
const labels = [...field.querySelectorAll('[data-label]')];
const lp = labels.map(() => ({ x: 0, y: 0 }));
const apply = (e, txx, tyy, slide, w, panelOp) => {
field.style.transform = `translateX(${slide.toFixed(1)}px) rotateX(${(-txx).toFixed(2)}deg) rotateY(${tyy.toFixed(2)}deg)`;
rings.forEach((r, i) => { r.style.transform = `translateZ(${(i + 1) * 36}px) scale(${(0.16 + 0.84 * e).toFixed(3)})`; r.style.opacity = e.toFixed(3); });
dots.forEach((d) => { d.style.opacity = (e * 0.85).toFixed(3); d.style.transform = `rotate(${d.dataset.a}deg) translateX(${(250 * e).toFixed(1)}px) scale(${e.toFixed(3)})`; });
labels.forEach((l, i) => {
const lx = +l.dataset.lx, ly = +l.dataset.ly;
l.style.transform = `translate(-50%,-50%) translate(${(lx * e).toFixed(1)}px,${(ly * e).toFixed(1)}px) translateZ(${(72 * e).toFixed(1)}px)`;
const act = S.current.activeIdx;
l.style.opacity = (act >= 0 && act !== i ? e * 0.2 : e).toFixed(3);
});
if (panel) { panel.style.opacity = panelOp.toFixed(3); panel.style.transform = `translateY(-50%) translateX(${((1 - panelOp) * 26).toFixed(1)}px)`; }
};
if (reduce) { apply(1, 0, 0, 0, 130, 0); return; }
const onMove = (e) => { S.current.mx = e.clientX / window.innerWidth - 0.5; S.current.my = e.clientY / window.innerHeight - 0.5; };
window.addEventListener('mousemove', onMove);
let raf = 0, cE = 0, cTX = 0, cTY = 0, cSlide = 0, cW = 130, cPanel = 0;
const loop = () => {
const r = sec.getBoundingClientRect(), vh = window.innerHeight;
let prog = 1 - (r.top + r.height * 0.12) / (vh * 0.9);
prog = Math.max(0, Math.min(1, prog));
const e = Math.max(0, Math.min(1, (prog - 0.10) / 0.5)); // core-only first, then explode
cE += (e - cE) * 0.12;
const tiltMax = 9; // gentle 3D — labels stay put under the cursor
cTX += (S.current.my * tiltMax * cE - cTX) * 0.08;
cTY += (S.current.mx * tiltMax * cE - cTY) * 0.08;
cSlide += ((S.current.activeIdx >= 0 ? -150 : 0) - cSlide) * 0.1;
cPanel += ((S.current.activeIdx >= 0 ? 1 : 0) - cPanel) * 0.12;
apply(cE, cTX, cTY, cSlide, cW, cPanel);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => { cancelAnimationFrame(raf); window.removeEventListener('mousemove', onMove); };
}, [isMobile]);
const active = activeIdx >= 0 ? ORBIT_ITEMS[activeIdx] : null;
return (
Peptides, supplements, cosmetics, medicines: each unit verified, serialized, and traceable before it earns the name.
);
}
function Home({ go, addToCart }) {
const { Kicker } = DSh;
const [muted, setMuted] = React.useState(true);
const [drawer, setDrawer] = React.useState(null); // selected product array, or null
// B49: live "The collection" = the products most present in member wishlists (daily-rotating
// ties), TOP 3 shown (owner 2026-07-28: three larger cards whose plate matches the photo ratio).
// Starts null (loading) so the built-in list NEVER flashes before the real one paints; the
// fallback is used ONLY when the feed is empty/unavailable, so it still degrades gracefully.
const [collection, setCollection] = React.useState(null);
React.useEffect(() => {
let alive = true;
fetch('/api/collection')
.then((r) => r.json())
.then((d) => {
if (!alive) return;
if (d && Array.isArray(d.products) && d.products.length) {
// B54.2: the medicine leads — headline slot carries the actives with strengths
// ("Tirzepatide 29 mg"), the small line carries the BRAND. Offline fallback items keep
// the design's own demo shape (they never reach this mapping).
setCollection(d.products.slice(0, 3).map((p) => [
p.activesLabel || p.name,
p.activesLabel ? p.name : (p.category || p.subcategory || ''),
p.image,
p.floorUsd ?? p.priceUsd,
p.presentation || p.sub || '',
p.id,
]));
} else {
setCollection(COLLECTION.slice(0, 3)); // empty feed → offline fallback (same 3-card layout)
}
})
.catch(() => { if (alive) setCollection(COLLECTION.slice(0, 3)); }); // network error → offline fallback
return () => { alive = false; };
}, []);
// More+ on a live product deep-links the shop and opens its modal (window-scoped signal, the same
// cross-script channel the kit already uses for AEV_ROUTES / scroll-lock). Offline items (id=null)
// keep the original local drawer so the homepage still previews the fallback set.
const openCollItem = (it) => {
const id = it[5];
if (id) { window.AEV_OPEN_PRODUCT = id; go('shop'); }
else { setDrawer(it); }
};
const lastProd = React.useRef(null);
if (drawer) lastProd.current = drawer;
const dp = drawer || lastProd.current; // persists during exit transition
React.useEffect(() => {
if (!drawer) return undefined;
const onKey = (e) => { if (e.key === 'Escape') setDrawer(null); };
document.addEventListener('keydown', onKey);
const lock = window.aevScrollLock;
if (lock) lock.acquire();
return () => { document.removeEventListener('keydown', onKey); if (lock) lock.release(); };
}, [drawer]);
const vA = React.useRef(null);
const vB = React.useRef(null);
const veilRef = React.useRef(null);
const runRef = React.useRef(null);
const mutedRef = React.useRef(true);
// The still photo is the video's first frame. On load the photo shows, the video cross-fades in over
// it (the photo "comes alive"), plays once, and freezes on its sharp 4K last frame (which matches the
// photo). Pressing "Sound on" replays the whole thing with audio, then it freezes again and self-mutes.
React.useEffect(() => {
const a = vA.current;
if (!a) return;
a.loop = false; a.style.zIndex = '2';
const HOLD = 450, FADE_IN = 1300;
let raf = 0, phase = 'idle', t0 = 0;
const set = (o) => { a.style.opacity = Math.max(0, Math.min(1, o)).toFixed(3); };
const loop = () => {
const now = performance.now(), dur = a.duration;
if (phase === 'hold') { set(0); if (now - t0 >= HOLD) phase = 'in'; }
else if (phase === 'in') { set((now - t0 - HOLD) / FADE_IN); if (now - t0 - HOLD >= FADE_IN) phase = 'playing'; }
else if (phase === 'playing') {
set(1);
if (isFinite(dur) && !a.muted) {
const AUD = 1.4; // seconds — ramp the audio down over the tail so it isn't cut abruptly
a.volume = Math.max(0, Math.min(1, (dur - a.currentTime) / AUD));
}
if (a.ended || (isFinite(dur) && a.currentTime >= dur - 0.05)) {
a.pause(); set(1); // freeze on the sharp last frame
if (!a.muted) { a.muted = true; mutedRef.current = true; setMuted(true); } // sound auto-off
a.volume = 1;
phase = 'done';
}
}
if (phase !== 'done') raf = requestAnimationFrame(loop);
};
const run = (withSound) => {
cancelAnimationFrame(raf);
a.muted = !withSound; mutedRef.current = !withSound; setMuted(!withSound);
a.volume = 1;
try { a.currentTime = 0; } catch (e) {}
set(0); phase = 'hold'; t0 = performance.now();
const p = a.play();
if (p && p.catch) p.catch(() => { a.muted = true; mutedRef.current = true; setMuted(true); a.play().catch(() => {}); });
raf = requestAnimationFrame(loop);
};
runRef.current = run;
run(false); // initial autoplay, muted
return () => cancelAnimationFrame(raf);
}, []);
const toggleMute = () => {
if (mutedRef.current) {
// sound is off → turn it on and replay the animation from the start
if (runRef.current) runRef.current(true);
} else {
// sound is on → just mute
mutedRef.current = true; setMuted(true);
if (vA.current) vA.current.muted = true;
}
};
return (
{/* HERO */}
Verified longevity
Live well, longer.
Scroll
We curate longevity through rigorous scientific evaluation to support health professionals in promoting longevity and a better quality of life for the people they care for.
Membership is common and free. Your member type shapes the profile information and declaration relevant to you; Club standing and the professional curation reports grow from there.
