// VisitorPulse — MyGemma edition. Same engine as the template, retuned for the // luxury-resale catalog and 3 personas (collector / trend / gifter). // // Layers: 1) collapsed rail (mini vector viz + definition %), 2) expanded panel // (User Context + Adaptive Profile + 2D Vector Space). Progressive definition // (blurry → sharp) across welcome → plp → search → pdp → merch. Saves pull the // visitor dot toward the matching cluster + boost cluster definition. // ---------- Cluster taxonomy (MyGemma) ---------- function _clusterProducts(filterFn, limit) { return (window.PRODUCTS || []).filter(filterFn).slice(0, limit || 4).map(p => p.id); } const CLUSTERS = [ { id: 'quiet-luxury', label: 'Quiet Luxury · Hermès · Bottega', short: 'Quiet Luxury', color: '#7C6F58', // bronze / taupe angle: -150, // upper-left products: _clusterProducts(p => p.cats.includes('quiet-luxury')), }, { id: 'monogram', label: 'Monogram · LV · Gucci · Dior', short: 'Monogram · Logo', color: '#9A6A3A', // LV brown angle: -30, // upper-right products: _clusterProducts(p => p.cats.includes('monogram')), }, { id: 'fine-jewelry', label: 'Fine Jewelry · Tiffany · Cartier · VCA', short: 'Fine Jewelry', color: '#3AA6A0', // teal (Tiffany-adjacent) angle: 50, // lower-right products: _clusterProducts(p => p.cats.includes('fine-jewelry')), }, { id: 'statement', label: 'Statement · Colour · Trend', short: 'Statement · Trend', color: '#C25B7C', // rose angle: -90, // top products: _clusterProducts(p => p.cats.includes('statement') || p.cats.includes('bright-tone')), }, { id: 'everyday-leather', label: 'Everyday Leather · Totes · SLG', short: 'Everyday · SLG', color: '#6E8B9E', // slate blue angle: 130, // lower-left products: _clusterProducts(p => p.cats.includes('tote') || p.cats[0] === 'slg'), }, ]; const REST_R = 42; const NEAR_R = 15; // Per-persona affinity to each cluster (0–1). const PERSONA_AFFINITY = { collector: { 'quiet-luxury': 1.00, 'everyday-leather': 0.55, monogram: 0.30, 'fine-jewelry': 0.30, statement: 0.06 }, trend: { monogram: 1.00, statement: 0.85, 'everyday-leather': 0.50, 'fine-jewelry': 0.20, 'quiet-luxury': 0.12 }, gifter: { 'fine-jewelry': 1.00, statement: 0.35, 'everyday-leather': 0.25, monogram: 0.20, 'quiet-luxury': 0.18 }, }; // Map any product id → cluster id (for save-driven drift) const PRODUCT_TO_CLUSTER = (() => { const map = {}; for (const c of CLUSTERS) for (const pid of c.products) map[pid] = c.id; return map; })(); // ---------- Per-persona narrative (scripted but reacts to saves) ---------- const PERSONA_NARRATIVE = { collector: { primaryCluster: 'quiet-luxury', bars: ['Quiet luxury', 'Hermès / Bottega', 'Investment tier', 'Neutral palette', 'Classic leather', 'Statement / trend'], barKey: ['quiet-luxury', 'hermes', 'investment', 'neutral-tone', 'leather', 'statement'], perStep: { welcome: { bars: [0.42, 0.34, 0.30, 0.30, 0.26, 0.18], events: [ { kind: 'PAGE VIEW', label: 'New Arrivals', val: '572 items' }, ]}, plp: { bars: [0.64, 0.50, 0.46, 0.44, 0.36, 0.16], events: [ { kind: 'DWELL', label: 'Hermès Evelyne GM', val: '18s' }, { kind: 'HOVER', label: 'Bottega Jodie', val: 'hover 2×' }, ]}, search: { bars: [0.78, 0.64, 0.56, 0.52, 0.42, 0.14], events: [ { kind: 'SEARCH', label: '"hermès in neutral"', val: 'mal-rank' }, ]}, pdp: { bars: [0.88, 0.76, 0.66, 0.60, 0.48, 0.12], events: [ { kind: 'DWELL', label: 'Chanel Classic Flap PDP', val: '26s' }, { kind: 'SAVE INTENT', label: 'Beige caviar flap', val: 'save 1×' }, ]}, merch: { bars: [0.95, 0.84, 0.74, 0.66, 0.52, 0.10], events: [ { kind: 'PAIR', label: '+ Cartier Tank watch', val: 'open' }, ]}, }, }, trend: { primaryCluster: 'monogram', bars: ['Monogram / logo', 'Gucci / LV', 'Statement colour', 'Crossbody / mini', 'Accessible price', 'Quiet luxury'], barKey: ['monogram', 'gucci', 'statement', 'crossbody', 'accessible', 'quiet-luxury'], perStep: { welcome: { bars: [0.40, 0.36, 0.38, 0.30, 0.34, 0.16], events: [ { kind: 'PAGE VIEW', label: 'New Arrivals', val: '572 items' }, ]}, plp: { bars: [0.62, 0.58, 0.56, 0.46, 0.50, 0.14], events: [ { kind: 'DWELL', label: 'Gucci GG Mini Slingbag', val: '11s' }, { kind: 'HOVER', label: 'LV Coquelicot Locky BB', val: 'hover 3×' }, ]}, search: { bars: [0.74, 0.68, 0.66, 0.56, 0.58, 0.12], events: [ { kind: 'SEARCH', label: '"pink bag under 1500"', val: 'mal-rank' }, ]}, pdp: { bars: [0.84, 0.78, 0.74, 0.64, 0.62, 0.10], events: [ { kind: 'DWELL', label: 'Dior Saddle Bag PDP', val: '19s' }, { kind: 'SAVE INTENT', label: 'Red mini saddle', val: 'save 2×' }, ]}, merch: { bars: [0.93, 0.86, 0.80, 0.70, 0.64, 0.10], events: [ { kind: 'PAIR', label: '+ Gucci bag charm', val: 'open' }, ]}, }, }, gifter: { primaryCluster: 'fine-jewelry', bars: ['Fine jewelry', 'Tiffany / Cartier', 'Gold', 'Diamonds', 'Bracelets', 'Handbags'], barKey: ['fine-jewelry', 'tiffany', 'gold', 'diamond', 'bracelet', 'bag'], perStep: { welcome: { bars: [0.44, 0.36, 0.40, 0.30, 0.34, 0.18], events: [ { kind: 'PAGE VIEW', label: 'New Arrivals', val: '572 items' }, ]}, plp: { bars: [0.66, 0.56, 0.60, 0.46, 0.50, 0.16], events: [ { kind: 'DWELL', label: 'Tiffany Wave Ring', val: '13s' }, { kind: 'HOVER', label: 'Cartier Love Bracelet', val: 'hover 2×' }, ]}, search: { bars: [0.80, 0.68, 0.72, 0.56, 0.60, 0.14], events: [ { kind: 'SEARCH', label: '"something gold every day"', val: 'mal-rank' }, ]}, pdp: { bars: [0.88, 0.78, 0.80, 0.66, 0.66, 0.12], events: [ { kind: 'DWELL', label: 'VCA Alhambra PDP', val: '22s' }, { kind: 'SAVE INTENT', label: 'Rose gold bracelet', val: 'save 1×' }, ]}, merch: { bars: [0.94, 0.86, 0.86, 0.74, 0.70, 0.12], events: [ { kind: 'PAIR', label: '+ matching stud earrings', val: 'open' }, ]}, }, }, }; const PERSONA_CONTEXT = { collector: { visitorId: 'usr_4012', returning: 'Returning · 6 orders', device: 'Desktop · Safari · 1680w', referrer: 'google.com · "hermès kelly resale"', location: 'Greenwich, CT', time: 'Tue 10:12a · morning' }, trend: { visitorId: 'usr_8830', returning: '1st visit · no account', device: 'iOS 17 · 390w · mobile', referrer: 'tiktok.com · creator link', location: 'Los Angeles, CA', time: 'Fri 8:30p · evening' }, gifter: { visitorId: 'usr_2274', returning: '1st visit · no account', device: 'Android · 412w · mobile', referrer: 'google.com · "anniversary gift wife"', location: 'Austin, TX', time: 'Sun 2:05p · afternoon' }, }; // ---------- Step order ---------- const STEP_ORDER = ['welcome', 'plp', 'search', 'pdp', 'merch']; const STEP_LABELS = { welcome: 'Cold start', plp: 'PLP', search: 'Search', pdp: 'PDP', merch: 'Merch' }; const STEP_IMG_FLOOR = { welcome: 0.00, plp: 0.20, search: 0.55, pdp: 0.80, merch: 0.92 }; const STEP_BLUR_CEILING = { welcome: 18, plp: 5, search: 2.5, pdp: 1.0, merch: 0.5 }; const STEP_BASE_DEF = { welcome: 0.12, plp: 0.42, search: 0.70, pdp: 0.92, merch: 0.99 }; function VisitorPulse({ stepId, persona, favorites, expanded, setExpanded }) { React.useEffect(() => { if (!window.PRODUCTS) return; const seen = new Set(); CLUSTERS.flatMap(c => c.products).forEach(pid => { if (seen.has(pid)) return; seen.add(pid); const p = window.PRODUCTS.find(x => x.id === pid); if (!p?.img) return; const img = new Image(); img.src = p.img; }); }, []); const currentStepOrd = Math.max(0, STEP_ORDER.indexOf(stepId)); const [sliderOrd, setSliderOrd] = React.useState(currentStepOrd); React.useEffect(() => { setSliderOrd(currentStepOrd); }, [currentStepOrd]); const effectiveStepId = STEP_ORDER[Math.max(0, Math.min(STEP_ORDER.length - 1, sliderOrd))]; const isScrubbing = sliderOrd !== currentStepOrd; const narrative = PERSONA_NARRATIVE[persona.id] || PERSONA_NARRATIVE.collector; const context = PERSONA_CONTEXT[persona.id] || PERSONA_CONTEXT.collector; const stepData = narrative.perStep[effectiveStepId] || narrative.perStep.welcome; const affinityMap = PERSONA_AFFINITY[persona.id] || PERSONA_AFFINITY.collector; const heartClusterCounts = React.useMemo(() => { const counts = {}; for (const fid of (favorites || [])) { const cid = PRODUCT_TO_CLUSTER[fid]; if (cid) counts[cid] = (counts[cid] || 0) + 1; } return counts; }, [favorites]); const heartTotal = Object.values(heartClusterCounts).reduce((s, v) => s + v, 0); const baseDef = STEP_BASE_DEF[effectiveStepId] ?? 0.12; const heartBoost = Math.min(0.32, heartTotal * 0.10); const definition = Math.min(0.99, baseDef + heartBoost); const computedClusters = React.useMemo(() => { return CLUSTERS.map(c => { const aff = affinityMap[c.id] ?? 0.1; const hearts = heartClusterCounts[c.id] || 0; let pull = Math.pow(aff, 1.4) * (0.40 + definition * 1.00) + hearts * 0.40; pull = Math.max(0, Math.min(0.97, pull)); const ang = c.angle * Math.PI / 180; const dist = REST_R - (REST_R - NEAR_R) * pull; return { ...c, pos: { x: 50 + Math.cos(ang) * dist, y: 50 + Math.sin(ang) * dist }, pull, affinity: aff, hearts, normDist: dist / REST_R, }; }); }, [persona.id, definition, heartClusterCounts]); const visitorPos = { x: 50, y: 50 }; const eventLog = React.useMemo(() => { const upto = STEP_ORDER.indexOf(effectiveStepId); const arr = []; for (let i = 0; i <= upto; i++) { const step = STEP_ORDER[i]; const s = narrative.perStep[step]; if (s) for (const e of s.events) arr.push({ ...e, step }); } return arr.slice(-6); }, [effectiveStepId, persona.id]); return ( <> {!expanded && ( )} {expanded && (
VISITOR PULSE {context.visitorId} · {Math.round(definition * 100)}% defined
USER CONTEXT
RETURNING{context.returning}
DEVICE{context.device}
REFERRER{context.referrer}
LOCATION{context.location}
TIME{context.time}
IN-SESSION BEHAVIOURS · {eventLog.length} events
{eventLog.map((e, i) => (
{e.kind} {e.label} {e.val}
))}
VECTOR SPACE · 2D PROJECTION 384 DIMS · UPDATED PER EVENT
{currentStepOrd > 0 && (
REPLAY PROGRESSION {STEP_LABELS[effectiveStepId]} {isScrubbing && · scrubbing}
setSliderOrd(Number(e.target.value))} />
{STEP_ORDER.slice(0, currentStepOrd + 1).map((s, i) => ( ))}
)}
ADAPTIVE PROFILE
{narrative.bars.map((label, i) => { const val = stepData.bars[i] || 0; const tone = ['lime', 'violet', 'rose', 'lime', 'violet', 'amber'][i % 6]; return (
{label} {val.toFixed(2)}
); })}
)} ); } // ---------- SVG renderer (unchanged engine) ---------- function VectorSpaceSVG({ clusters, visitorPos, definition, compact = false, hearted = [], visitorTag = 'usr_4012', stepId = 'plp' }) { const products = window.PRODUCTS || []; const byId = (id) => products.find(p => p.id === id); const stepFloor = STEP_IMG_FLOOR[stepId] ?? 0.16; const stepBlurMax = STEP_BLUR_CEILING[stepId] ?? 6; const lineOpacity = Math.max(0, (definition - 0.25) * 1.4); const visitorBlur = Math.max(0, (1 - definition) * 4); return ( {clusters.map((c) => ( ))} {clusters.map((c) => { const pull = c.pull ?? 0; const haloR = compact ? 8.5 : 8 + pull * 5 + definition * 1.5; const naturalOpacity = 0.40 + pull * 0.55; const imgOpacity = stepId === 'welcome' ? 0 : Math.max(stepFloor, naturalOpacity); const blurAmt = Math.min(stepBlurMax, (1 - pull) * 7); const labelOpacity = 0.35 + pull * 0.65; const heartedHere = c.products.filter(pid => hearted.includes(pid)); const otherHere = c.products.filter(pid => !hearted.includes(pid)); const pickIds = [...heartedHere, ...otherHere].slice(0, compact ? 0 : 4); const productThumbs = pickIds.map(byId).filter(Boolean); const distVisitor = Math.sqrt(Math.pow(c.pos.x - visitorPos.x, 2) + Math.pow(c.pos.y - visitorPos.y, 2)); const isTop = c.pos.y < 50; const labelY = isTop ? -haloR - 4.5 : haloR + 4.6; const dY = isTop ? -haloR - 1.6 : haloR + 7.8; return ( {productThumbs.map((p, i) => { const cols = 2; const col = i % cols; const row = Math.floor(i / cols); const gap = compact ? 0 : haloR * 0.42; const tx = (col - 0.5) * gap; const ty = (row - 0.5) * gap; const tr = compact ? 2.4 : 3.4 + pull * 1.0; const isHearted = hearted.includes(p.id); const variance = 0.5 + ((i * 37) % 100) / 100 * 0.5; const localBlur = isHearted ? 0 : Math.min(6, blurAmt * variance); return ( {isHearted && (♥)} ); })} {!compact && ( {c.short} )} {!compact && pull > 0.2 && ( d={(distVisitor / REST_R).toFixed(2)} · n={c.products.length} )} ); })} {!compact && ( <> visitor {visitorTag} )} ); } Object.assign(window, { VisitorPulse });