/* Rinus features grid — v3 diagrams. Six operators (agents), each a distinct micro-animation. ALL pulsing leads/signals show as SIGNAL orange. */ const { useEffect, useRef, useState } = React; const FEAT_TOKENS = { PITCH: "var(--pitch-700)", PITCH_400: "var(--pitch-400)", LINE_STRONG: "var(--line-strong)", LINE: "var(--line)", INK_SUBTLE: "var(--ink-subtle)", INK: "var(--ink)", INK_MUTED: "var(--ink-muted)", PAPER_50: "var(--paper-50)", PAPER_100: "var(--paper-100)", PAPER_200: "var(--paper-200)", PAPER_300: "var(--paper-300)", PAPER_400: "var(--paper-400)", PAPER_500: "var(--paper-500)", PATINA: "var(--patina)", SIGNAL: "var(--signal)", SIGNAL_INK: "var(--signal-ink)", MONO: "var(--font-mono)", DISPLAY: "var(--font-display)", }; const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const easeOut = (t) => 1 - Math.pow(1 - t, 3); const easeInOut = (t) => t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2; function useFrameTime() { const [t, setT] = useState(0); useEffect(() => { let raf = 0; let start = null; const step = (ts) => { if (start == null) start = ts; setT((ts - start) / 1000); raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, []); return t; } /* ── 1. Signals: pulsing radar takes in input dots, emits typed cards ── */ function SignalsDiag() { const t = useFrameTime(); const SIGNAL_TYPES = [ { type: "FINANCIAM.", detail: "Serie B · $48M", time: "2m", color: FEAT_TOKENS.SIGNAL }, { type: "NUEVO ROL", detail: "Nuevo VP Ingeniería", time: "5m", color: FEAT_TOKENS.PITCH }, { type: "PRECIOS", detail: "3 visitas a precios", time: "12m", color: FEAT_TOKENS.PITCH_400 }, { type: "COMPETIDOR", detail: "Comparó con Helix", time: "1h", color: FEAT_TOKENS.SIGNAL_INK }, { type: "CONTRATAC.", detail: "12 roles SDR publicados", time: "2h", color: FEAT_TOKENS.PITCH }, { type: "MENCIÓN", detail: "Nota en TechCrunch", time: "3h", color: FEAT_TOKENS.PITCH_400 }, { type: "TECH STACK", detail: "Migró a Snowflake", time: "5h", color: FEAT_TOKENS.PAPER_500 }, ]; const SPAWN = 2.2; const LIFE = 6.0; const ANCHOR_X = 30; const PATH_END_X = 280; // Y rows — clamped to stay within viewBox (max 69 so card bottom ≤ 112). const Y_ROWS = [18, 36, 54, 65, 28, 46]; const lastSpawn = Math.floor(t / SPAWN); const inFlight = []; for (let k = Math.max(0, lastSpawn - 4); k <= lastSpawn; k++) { const age = t - k * SPAWN; if (age < 0 || age > LIFE) continue; const sig = SIGNAL_TYPES[k % SIGNAL_TYPES.length]; const y = Y_ROWS[k % Y_ROWS.length]; inFlight.push({ k, age, sig, y }); } // Tiny grey input dots streaming into the radar from off-canvas left. const INPUT_DOTS = 5; const INPUT_LIFE = 2.4; const inputs = []; for (let k = 0; k < INPUT_DOTS; k++) { const phase = ((t + k * 0.5) % INPUT_LIFE) / INPUT_LIFE; const e = easeOut(phase); const startY = [18, 52, 90, 36, 76][k]; const x = -8 + e * (ANCHOR_X + 8); const y = startY + (56 - startY) * e; const op = phase < 0.08 ? phase * 12 : (phase > 0.92 ? (1 - phase) * 12 : 0.85); inputs.push({ x, y, op }); } const localPulse = (t % SPAWN) / SPAWN; return ( ); } /* ── 2. Draft: editorial email UI — typed → sending (3-dot loader) → sent ── */ function DraftDiag() { const t = useFrameTime(); const CYCLE = 7.98; const p = (t % CYCLE) / CYCLE; // 0.00–0.08 reveal // 0.08–0.70 typing // 0.70–0.78 idle, send button "armed" // 0.78–0.92 sending (button pressed, 3-dot loader) // 0.92–1.00 SENT label, slow fade const body = "Clara, felicitaciones por el nuevo rol en TechBA. Vi que pasaste años en observabilidad y me encantaría comparar notas. ¿15 min la semana que viene?"; const typeStart = 0.08; const typeEnd = 0.70; const typeP = clamp((p - typeStart) / (typeEnd - typeStart), 0, 1); const chars = Math.floor(body.length * typeP); const typed = body.slice(0, chars); const cursorOn = typeP > 0 && typeP < 1 && Math.floor(t * 2) % 2 === 0; const sending = p >= 0.78 && p < 0.92; const sent = p >= 0.92; // Auto-scroll the body area to the bottom as new text arrives. const bodyRef = useRef(null); useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }); return ( ); } /* ── 3. Qualify: Rinus logo emits dots → HOT/WARM/DROP, with arrival pulses ── */ function QualifyDiag() { const t = useFrameTime(); const DUR = 2.8; // Source on left, 3 destinations on right, curved bezier paths. const SX = 36, SY = 56; const lanes = [ { name: "INTERESADO", color: FEAT_TOKENS.SIGNAL, ex: 182, ey: 18, cx: 108, cy: 0 }, { name: "CALIFICADO", color: "#166534", ex: 182, ey: 56, cx: 108, cy: 56 }, { name: "ARCHIVAR", color: FEAT_TOKENS.PAPER_400, ex: 182, ey: 94, cx: 108, cy: 112 }, ]; // Central pulse — fires when any lane emits a dot (p≈0) let centralPulse = 0; for (let i = 0; i < 3; i++) { const ph = i / 3; const lp = ((t / DUR + ph) % 1); const ep = lp < 0.15 ? 1 - lp / 0.15 : 0; centralPulse = Math.max(centralPulse, ep); } function bezAt(lane, p) { const u = 1 - p; const x = u * u * SX + 2 * u * p * lane.cx + p * p * lane.ex; const y = u * u * SY + 2 * u * p * lane.cy + p * p * lane.ey; return { x, y }; } // Per-lane state: dot position + post-arrival pulse + drop animation const laneData = lanes.map((lane, i) => { const phase = i / 3; const p = ((t / DUR + phase) % 1); const point = bezAt(lane, p); const op = p < 0.08 ? p / 0.08 : (p > 0.93 ? (1 - p) / 0.07 : 1); const sinceArrival = p * DUR; // p=0 ≡ instant after destination const PULSE_T = 0.75; const pulse = sinceArrival < PULSE_T ? 1 - sinceArrival / PULSE_T : 0; return { lane, x: point.x, y: point.y, op, pulse, sinceArrival }; }); return ( ); } /* ── 4. Calendar: weekly grid, persistent bookings, reset per cycle ─ */ function CalendarDiag() { const t = useFrameTime(); const CYCLE = 8.4; const DAYS = ["DOM", "LUN", "MAR", "MIÉ", "JUE", "VIE", "SÁB"]; const TIMES = ["9", "11", "14", "16"]; // 4 rows // Pre-defined bookings that "drop" one by one across the cycle. const BOOKINGS = [ { day: 2, row: 0, time: "09:30", appearAt: 0.06 }, // Tue 09:30 { day: 1, row: 1, time: "11:15", appearAt: 0.16 }, // Mon 11:15 { day: 3, row: 2, time: "14:00", appearAt: 0.27 }, // Wed 14:00 { day: 4, row: 0, time: "10:00", appearAt: 0.38 }, // Thu 10:00 { day: 4, row: 3, time: "16:00", appearAt: 0.48 }, // Thu 16:00 { day: 5, row: 0, time: "09:00", appearAt: 0.59 }, // Fri 09:00 { day: 2, row: 2, time: "14:30", appearAt: 0.70 }, // Tue 14:30 { day: 5, row: 2, time: "13:45", appearAt: 0.82 }, // Fri 13:45 ]; const localT = (t % CYCLE) / CYCLE; const GRID_X = 16, GRID_Y = 18; const COL_W = 36, ROW_H = 18; const HEAD_H = 12; return ( ); } /* ── 5. Pipeline: kanban — varied travelers, GANADO fills to 5 then resets ── */ function PipelineDiag() { const t = useFrameTime(); const COLS = ["NUEVO", "CALIF.", "DEMO", "GANADO"]; const COL_W = 66; const COL_X = [6, 74, 142, 210]; const TOP = 14, HEAD_H = 11; const CARD_H = 13, SLOT = 15; const CARD_W = COL_W - 4; const SIT = 2.2, TRANSIT = 0.85; const STEP = SIT + TRANSIT; // 9 company cards: 3 in each of col0, col1, col2 initially. GANADO starts empty. const CARDS = [ { id: 0, co: "Vercel", lc: "#fff", bg: "#111111" }, { id: 1, co: "Stripe", lc: "#fff", bg: "#635BFF" }, { id: 2, co: "Notion", lc: "#fff", bg: "#373530" }, { id: 3, co: "Linear", lc: "#fff", bg: "#5E6AD2" }, { id: 4, co: "Figma", lc: "#fff", bg: "#F24E1E" }, { id: 5, co: "Loom", lc: "#fff", bg: "#625DF5" }, { id: 6, co: "HubSpot", lc: "#fff", bg: "#FF7A59" }, { id: 7, co: "Salesforce", lc: "#fff", bg: "#00A1E0" }, { id: 8, co: "Atlassian", lc: "#fff", bg: "#0052CC" }, ]; const INIT_COL = [0, 0, 0, 1, 1, 1, 2, 2, 2]; // Sequence of single moves — only ONE card moves at a time. // Result: GANADO ends with {6,7,8}, others redistributed. const SEQ = [ { c: 6, to: 3 }, // HubSpot col2→GANADO { c: 3, to: 2 }, // Linear col1→col2 { c: 7, to: 3 }, // Salesforce col2→GANADO { c: 0, to: 1 }, // Vercel col0→col1 { c: 4, to: 2 }, // Figma col1→col2 { c: 8, to: 3 }, // Atlassian col2→GANADO ]; const TOTAL = SEQ.length * STEP + SIT; const tc = t % TOTAL; // Fade-out in last 0.8s of cycle, fade-in in first 0.5s const globalOp = tc < 0.5 ? tc / 0.5 : tc > TOTAL - 0.8 ? (TOTAL - tc) / 0.8 : 1; function getMoveStart(mi) { return mi * STEP + SIT; } // Returns current column for card (toCol if mid-transit — card ranks in dest immediately) function getCardCol(cardId) { let col = INIT_COL[cardId]; for (let mi = 0; mi < SEQ.length; mi++) { if (SEQ[mi].c !== cardId) continue; if (tc >= getMoveStart(mi)) col = SEQ[mi].to; } return col; } // Returns transit info for card if currently moving function getCardTransit(cardId) { let prevCol = INIT_COL[cardId]; for (let mi = 0; mi < SEQ.length; mi++) { if (SEQ[mi].c !== cardId) continue; const ms = getMoveStart(mi); const me = ms + TRANSIT; if (tc < ms) break; if (tc < me) { return { isMoving: true, fromCol: prevCol, progress: easeInOut((tc - ms) / TRANSIT) }; } prevCol = SEQ[mi].to; } return { isMoving: false }; } // Rank = # of cards with lower id in same column (packs from top, no gaps) function getCardRank(cardId) { const col = getCardCol(cardId); let rank = 0; for (let j = 0; j < cardId; j++) { if (getCardCol(j) === col) rank++; } return rank; } function colY(rank) { return TOP + HEAD_H + rank * SLOT + 2; } const BODY_H = 3 * SLOT + 6; // Pulsing dot in GANADO once first card arrives const firstGandoTime = getMoveStart(0) + TRANSIT; const showPulse = tc > firstGandoTime; const pulseR = showPulse ? 1.5 + ((t * 1.4) % 1) * 4 : 0; const pulseOp = showPulse ? (1 - (t * 1.4) % 1) * 0.5 : 0; return ( ); } /* ── 6. Connect: central Rinus, icons orbit counter-clockwise, pulse dots ── */ function ConnectDiag() { const t = useFrameTime(); const CX = 140, CY = 56; // 6 icons in a ring around the center — angles are BASE angles before spin. const ICONS = [ { name: "linkedin", angle: -Math.PI / 2 }, { name: "gmail", angle: -Math.PI / 2 + Math.PI/3 }, { name: "calendar", angle: -Math.PI / 2 + 2*Math.PI/3 }, { name: "whatsapp", angle: Math.PI / 2 }, { name: "messenger",angle: Math.PI / 2 + Math.PI/3 }, { name: "phone", angle: Math.PI / 2 + 2*Math.PI/3 }, ]; const RX = 92, RY = 36; // Counter-clockwise spin — very slow (one full revolution every 60s). const SPIN_DUR = 42; const spin = -(t / SPIN_DUR) * Math.PI * 2; // Pulse dots: each icon emits a dot in or out along its CURRENT (rotated) radius. const PULSE_DUR = 1.64; const pulses = ICONS.map((icon, i) => { const phase = (t / PULSE_DUR + i / ICONS.length) % 1; const inbound = Math.floor((t / PULSE_DUR + i / ICONS.length)) % 2 === 0; const liveAngle = icon.angle + spin; const iconX = CX + RX * Math.cos(liveAngle); const iconY = CY + RY * Math.sin(liveAngle); const p = phase; const start = inbound ? { x: iconX, y: iconY } : { x: CX, y: CY }; const end = inbound ? { x: CX, y: CY } : { x: iconX, y: iconY }; const x = start.x + (end.x - start.x) * easeOut(p); const y = start.y + (end.y - start.y) * easeOut(p); const eased_p = easeOut(p); const op = p < 0.12 ? p / 0.12 : (eased_p > 0.75 ? Math.max(0, (1 - eased_p) / 0.25) : 1); return { x, y, op }; }); return ( ); } function ChannelIcon({ name, x, y }) { const fill = FEAT_TOKENS.PITCH; if (name === "linkedin") return ( ); if (name === "gmail") return ( ); if (name === "calendar") return ( {/* Page binding (top tabs) */} {/* Card body */} {/* Header bar */} {/* Date number */} 14 ); if (name === "whatsapp") return ( ); if (name === "messenger") return ( ); if (name === "phone") return ( ); return null; } /* ── Icon for kind label (unchanged) ─────────────────────────────── */ function FeatIcon({ name, size = 12 }) { const s = { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }; if (name === "spark") return ; if (name === "chat") return ; if (name === "branch") return ; if (name === "calendar") return ; if (name === "pipeline") return ; if (name === "node") return ; if (name === "arrow") return ; return null; } const FEATURES = [ { kind: "Señales", title: "Llegá primero.", body: "Los agentes monitorean rondas de financiamiento, cambios de rol, visitas a precios y comparaciones con competidores. Disparan el proceso indicado para cada señal.", icon: "spark", Diag: SignalsDiag }, { kind: "Mensajes", title: "Contacta a tus leads.", body: "Enviáles mensajes apenas se genere la oportunidad, o con el trigger que vos quieras. El agente puede enviarte un borrador para que apruebes o contactar de forma directa.", icon: "chat", Diag: DraftDiag }, { kind: "Calificar", title: "Filtrá el ruido.", body: "Procesá a tus prospectos con las reglas que quieras. Tus agentes diseñan y ejecutan los procesos que necesités, dependiendo de ICP, tiempos, o las variables que elijas.", icon: "branch", Diag: QualifyDiag }, { kind: "Agenda", title: "Agendá la reunión.", body: "Tus agentes pueden verificar disponibilidad, pasar horarios y agendar reuniones. Manejan la conversación de agendado por su cuenta y te notifican cuando está hecho.", icon: "calendar", Diag: CalendarDiag }, { kind: "Pipeline", title: "Avanzá tus deals.", body: "Cada interacción se registra sola. Tus agentes mantienen monitoreado y actualizado tu CRM para entender tu pipeline en tiempo real.", icon: "pipeline", Diag: PipelineDiag }, { kind: "Conectar", title: "Integrá todo.", body: "Email, LinkedIn, calendario, WhatsApp, Messenger, teléfono y el CRM que ya usás. Rinus corre sobre tu stack como la capa de operaciones.", icon: "node", Diag: ConnectDiag }, ]; function FeatureGrid() { return (
El sistema

Nosotros te cubrimos.

Usá Rinus para manejar agentes que busquen y procesen leads desde las fuentes que necesites. Explicales las tareas a automatizar y ellos las ejecutan.

{FEATURES.map((f) => (
{f.kind}

{f.title}

{f.body}

))}
); } window.FeatureGrid = FeatureGrid;