// ============ CITRUS HERO ============ // Big featured citrus character. Sits on a glowing pedestal, // floating chips orbit around it, a speech bubble greets you, // subtle idle animation. The face of the brand. // // Animations layered on top of the original idle motion: // A · cycling speech bubble (React state, every ~5s) // B · sequential visor pulse (CSS, left → middle → right) // C · sequential chip ping (CSS, one chip outline-pulses every ~4s) // D · cursor-aware head tilt (mousemove on stage, max ±5°) const { useState: useCState, useEffect: useCEffect, useRef: useCRef } = React; const CITRUS_PALETTE = { skin: "#E85D1A", skinDark: "#B84410", accent: "#FFCA7D", visor: "#1A120B", }; // (A) Cycling speech bubble messages. const HERO_MESSAGES = [ ["Citrus", "Hey — what do you want me\nto take off your plate?"], ["ORI", "Inbox is piling up — want me\nto jump in and reply?"], ["SOL", "It's almost Monday — should I\nwrite this week's brief?"], ["VEX", "Three leads have gone cold.\nWant me to follow up?"], ["INK", "New contract just landed —\nshould I read it first?"], ]; const MSG_INTERVAL = 5000; const MSG_FADE = 280; function CitrusHero() { // (A) message cycling const [msgIndex, setMsgIndex] = useCState(0); const [fading, setFading] = useCState(false); useCEffect(() => { const id = setInterval(() => { setFading(true); setTimeout(() => { setMsgIndex(i => (i + 1) % HERO_MESSAGES.length); setFading(false); }, MSG_FADE); }, MSG_INTERVAL); return () => clearInterval(id); }, []); // (D) cursor head tilt const stageRef = useCRef(null); const [tracking, setTracking] = useCState(false); const [headRot, setHeadRot] = useCState(0); useCEffect(() => { const stage = stageRef.current; if (!stage) return; const onMove = (e) => { const r = stage.getBoundingClientRect(); const dx = e.clientX - (r.left + r.width / 2); const t = Math.max(-1, Math.min(1, dx / (r.width / 2 || 1))); setHeadRot(+(t * 5).toFixed(2)); if (!tracking) setTracking(true); }; const onLeave = () => setTracking(false); stage.addEventListener("mousemove", onMove); stage.addEventListener("mouseleave", onLeave); return () => { stage.removeEventListener("mousemove", onMove); stage.removeEventListener("mouseleave", onLeave); }; }, [tracking]); const [tag, msg] = HERO_MESSAGES[msgIndex]; return (

{/* (A) speech bubble — content cycles every ~5s with a fade transition */}

{tag} {msg.split("\n").map((line, i, arr) => ( {line} {i < arr.length - 1 ?
: null} ))}

{/* floating tool chips — chip-ping CSS pulses one of them in turn (C) */}

Stripe

Sheets

Gmail

{/* the character */}

{/* status pill above head */}

on shift

{/* sparkles */} ✦ ✦ ✦

); } // ===== Big custom citrus figure (more detail than the small avatar) ===== function CitrusFigure() { return ( ); } // ===== Tool chip icons ===== function ChipWhatsApp() { return ( ); } function ChipStripe() { return ( ); } function ChipSheets() { return ( ); } function ChipGmail() { return ( ); } window.CitrusHero = CitrusHero;