// Widget States, single big stage: real hotel website + animated bubble + // dim overlay + picker pop, then forks into Personalized vs Direct call paths. const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React; const W_PAPER = "#fbfaf6"; const W_CREAM = "#f6f4ef"; const W_INK = "#1a1a1a"; const W_MUTED = "#6b6358"; const W_RULE = "rgba(0,0,0,0.10)"; const W_FUCHSIA = "#ED4D86"; const W_FUCHSIA_DEEP = "#B8336A"; const W_GOLD = "#C9A24A"; // ─────────────────────────────────────────────────────────── // Equalizer / wave-bar icon, the brand widget mark // Looping vertical bars, like an audio level meter // ─────────────────────────────────────────────────────────── function BubbleIcon({ size = 22, color = "#fff", time = 0 }) { // 5 bars, each phased to create a smooth left-to-right wave loop const bars = [0, 1, 2, 3, 4].map(i => { // Two overlapping sines for richer motion const phase = time * 3.4 - i * 0.55; const a = (Math.sin(phase) + 1) / 2; // 0..1 const b = (Math.sin(phase * 1.7 + 0.4) + 1) / 2; // 0..1 const m = a * 0.65 + b * 0.35; // 0..1 // Map to 22%..100% of full height so the shortest bar is still visible const h = 0.22 + m * 0.78; return h; }); const W = 22; // viewBox width const H = 22; // viewBox height const barW = 2.8; const gap = 1.6; const totalW = bars.length * barW + (bars.length - 1) * gap; const startX = (W - totalW) / 2; const cy = H / 2; const maxBar = H * 0.72; return ( {bars.map((h, i) => { const bh = maxBar * h; const x = startX + i * (barW + gap); const y = cy - bh / 2; return ( ); })} ); } // ─────────────────────────────────────────────────────────── // Driver hook // ─────────────────────────────────────────────────────────── function useStageTime(duration, paused) { const [t, setT] = useStateW(0); const last = useRefW(performance.now()); useEffectW(() => { if (paused) return; let raf; const tick = (now) => { const dt = (now - last.current) / 1000; last.current = now; setT(prev => (prev + dt) % duration); raf = requestAnimationFrame(tick); }; last.current = performance.now(); raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [duration, paused]); const reset = () => setT(0); return [t, reset]; } // ─────────────────────────────────────────────────────────── // Aurea Hotels hero, exact recreation as live site behind bubble // ─────────────────────────────────────────────────────────── function AureaSite() { return (
{/* hero image as actual background */}
); } // ─────────────────────────────────────────────────────────── // Bubble mark with hover label // ─────────────────────────────────────────────────────────── // Bubble is anchored to the bottom-right corner. Pill grows LEFTWARD on hover // so the label appears to the left of the icon and never clips the stage. function FloatingBubble({ time, hovered, opening, rightPx, bottomPx }) { const breathe = 1 + Math.sin(time * 1.6) * 0.035; const ripples = [0, 1, 2].map(i => { const phase = ((time * 0.55 + i * 0.33) % 1); return { r: 30 + phase * 60, opacity: (1 - phase) * 0.55 }; }); return (
{/* sonar rings - centred on the icon (right side) */} {ripples.map((r, i) => ( ))} {/* halo removed - keeping the design strictly 2D */} {/* the pill */}
{/* label on the LEFT, slides out from behind the icon */}
Talk to us Speak instantly with our AI agent
{/* icon stays in a fixed circle on the right */}
); } // ─────────────────────────────────────────────────────────── // Picker modal, opens centred over dimmed site // ─────────────────────────────────────────────────────────── function PickerModal({ visible, highlightedIdx, clickedIdx }) { const opts = [ { key: "rec", title: "Personalized assistance", sub: "Share your trip. The agent calls you back with tailored options.", pill: "Recommended", icon: ( ), }, { key: "now", title: "Call now", sub: "Speak to the concierge in seconds. Direct line to availability.", pill: "Direct", icon: ( ), }, ]; return (
{/* header */}
How can we help?
Reply in seconds, never bots
{/* options */}
{opts.map((o, i) => { const isHighlighted = highlightedIdx === i; const isClicked = clickedIdx === i; return (
{o.icon}
{o.title} {o.pill.toUpperCase()}
{o.sub}
{/* arrow */} {/* click pulse */} {isClicked && (
)}
); })}
END-TO-END ENCRYPTED · POWERED BY GUESTMAKER
); } // ─────────────────────────────────────────────────────────── // Lead form (Personalized path) // ─────────────────────────────────────────────────────────── function LeadForm({ visible, fillProgress, submitted }) { const fields = [ { label: "Full name", val: "Sarah Chen", placeholder: "Your name" }, { label: "Email", val: "sarah.chen@studio.co.uk", placeholder: "name@example.com" }, { label: "Phone", val: "+44 7700 900 184", placeholder: "+44…" }, { label: "Party", val: "2 adults · 1 child", placeholder: "Guests" }, { label: "Best time", val: "Today · 18:00–19:00 BST", placeholder: "Window" }, ]; // Reveal each field as fillProgress crosses thresholds return (
Tell us about your stay
The agent calls you back within minutes
{fields.map((f, i) => { const start = i / fields.length; const local = Math.max(0, Math.min(1, (fillProgress - start) * fields.length)); const charsShown = Math.floor(f.val.length * local); const text = f.val.slice(0, charsShown); const showCursor = local > 0 && local < 1; return (
{f.label.toUpperCase()}
0 ? W_FUCHSIA + "55" : W_RULE}`, background: local > 0 ? "#fff" : W_PAPER, borderRadius: 10, display: "flex", alignItems: "center", fontFamily: "Inter", fontSize: 13.5, color: text ? W_INK : "#aaa", transition: "border 180ms, background 180ms", }}> {text || f.placeholder} {showCursor && ( )}
); })}
{/* Submit button */}
STEP 1 OF 1
); } // ─────────────────────────────────────────────────────────── // Live call panel (both paths converge here) // ─────────────────────────────────────────────────────────── function CallPanel({ visible, time, callStartT }) { const elapsed = Math.max(0, time - callStartT); const mm = Math.floor(elapsed / 60).toString().padStart(2, "0"); const ss = Math.floor(elapsed % 60).toString().padStart(2, "0"); // pre-scripted turns offset from callStart const turns = [ { t: 0.6, who: "agent", text: "Good evening, Aurea concierge." }, { t: 4.2, who: "agent", text: "How can I make your stay extraordinary?" }, { t: 8.0, who: "guest", text: "We're thinking late September, Mediterranean, two adults plus our daughter." }, { t: 14.5, who: "agent", text: "Wonderful. Costa Smeralda or Mykonos suits a family of three beautifully." }, { t: 20.8, who: "agent", text: "Our Cliffside Suite at Aurea Mykonos has direct sea access, and a private plunge pool." }, { t: 27.4, who: "guest", text: "Mykonos sounds lovely. Could you check rates for the 22nd?" }, ]; // Reveal turns up to elapsed; show last 3 const visibleTurns = turns.filter(tt => elapsed > tt.t).slice(-3); // pulse rings const rings = [0, 1, 2, 3].map(i => { const phase = ((elapsed * 0.55 + i * 0.25) % 1); return { r: 70 + phase * 100, opacity: (1 - phase) * 0.5 }; }); // waveform bars — all fuchsia, varying intensity. Recomputed every RAF // tick from `elapsed`. Two-oscillator mix so the wave reads as flowing // left-to-right rather than just pulsing. const bars = Array.from({ length: 28 }).map((_, i) => { const swap = Math.floor(elapsed / 4) % 2 === 0; // fast travelling wave + slower per-bar bias = liquid motion const h = 6 + Math.abs(Math.sin(elapsed * 7.2 - i * 0.55)) * 26 + Math.abs(Math.sin(elapsed * 2.3 + i * 0.18)) * 8; return { h, color: swap ? W_FUCHSIA : W_FUCHSIA_DEEP }; }); return (
{/* header */}
LIVE · {mm}:{ss}
AUREA HOTELS
{/* Pulse + bubble */}
{rings.map((r, i) => ( ))}
{/* waveform */}
{bars.map((b, i) => ( ))}
{/* captions */}
{visibleTurns.map((tt, i) => (
{tt.who === "agent" ? "AGENT" : "GUEST"} {tt.text}
))}
{/* controls */}
{[ { kind: "mic", active: true }, { kind: "pause" }, { kind: "end", danger: true }, ].map((c, i) => (
{c.kind === "mic" && (<> )} {c.kind === "pause" && (<> )} {c.kind === "end" && (<> )}
))}
); } // ─────────────────────────────────────────────────────────── // Phase track at the bottom of the stage // ─────────────────────────────────────────────────────────── function PhaseTrack({ steps, activeIdx }) { return (
{steps.map((s, i) => (
{i < activeIdx ? ( ) : (i + 1)}
{s.label}
{s.sub}
{i < steps.length - 1 && (
)}
))}
); } // ─────────────────────────────────────────────────────────── // Persistent "or call us" chip - top left of the stage // ─────────────────────────────────────────────────────────── function CallUsChip({ time }) { const pulse = 0.5 + Math.abs(Math.sin(time * 1.4)) * 0.5; return (
{/* fuchsia rail with breathing dot */}
{/* live dot */}
{/* content */}
OR CALL OUR AI · 24/7
+34 900 800 720
); } function PathSelector({ path, setPath }) { const opts = [ { key: "rec", label: "Personalized callback", sub: "form → call" }, { key: "now", label: "Direct call", sub: "tap → call" }, ]; return (
{opts.map(o => { const active = path === o.key; return ( ); })}
); } // ─────────────────────────────────────────────────────────── // MAIN STAGE // ─────────────────────────────────────────────────────────── function WidgetShowcase() { const [path, setPath] = useStateW("rec"); // "rec" or "now" const [inView, setInView] = useStateW(false); const stageRef = useRefW(null); /* Pause the scripted loop until the section is scrolled into view, then reset it to t=0 each time it re-enters so visitors always see the animation from the beginning. */ useEffectW(() => { if (!stageRef.current) return; const obs = new IntersectionObserver(([entry]) => { setInView(entry.isIntersecting); }, { threshold: 0.25 }); obs.observe(stageRef.current); return () => obs.disconnect(); }, []); // Per-path duration & key timestamps const SEQ_REC = { duration: 28, bubbleEnter: [0, 1.2], // bubble appears, ripples hoverLabel: [3.0, 5.0], // tooltip overlayIn: [5.4, 6.0], pickerIn: [6.0, 6.8], highlightRec: [7.5, 9.5], clickRec: [9.5, 10.0], pickerOut: [10.0, 10.6], formIn: [10.6, 11.4], formFill: [11.4, 17.5], // typing formSubmit: [17.5, 18.5], formOut: [19.5, 20.1], callIn: [20.1, 20.8], callPlays: [20.8, 28.0], callStartT: 20.1, }; const SEQ_NOW = { duration: 22, bubbleEnter: [0, 1.2], hoverLabel: [3.0, 5.0], overlayIn: [5.4, 6.0], pickerIn: [6.0, 6.8], highlightNow: [7.5, 9.0], clickNow: [9.0, 9.5], pickerOut: [9.5, 10.1], callIn: [10.1, 10.8], callPlays: [10.8, 22.0], callStartT: 10.1, }; const SEQ = path === "rec" ? SEQ_REC : SEQ_NOW; const [t, reset] = useStageTime(SEQ.duration, !inView); useEffectW(() => { reset(); }, [path]); // reset on path change useEffectW(() => { if (inView) reset(); }, [inView]); // restart when scrolled in // Helpers const between = ([a, b]) => t >= a && t <= b; const after = (a) => t >= a; const before = (a) => t < a; // ---------- visibility flags ---------- const overlayActive = after(SEQ.overlayIn[0]); // dim overlay on const overlayOpacity = Math.min(1, Math.max(0, (t - SEQ.overlayIn[0]) / 0.6)) * 0.55; const showHoverLabel = between(SEQ.hoverLabel) && before(SEQ.overlayIn[0] + 0.1); const bubbleOpening = after(SEQ.overlayIn[0] + 0.1) && before(SEQ.pickerOut[1] + 0.05); const pickerVisible = after(SEQ.pickerIn[0]) && before(SEQ.pickerOut[0] + 0.4); const highlightedIdx = path === "rec" ? (between(SEQ_REC.highlightRec) ? 0 : -1) : (between(SEQ_NOW.highlightNow) ? 1 : -1); const clickedIdx = path === "rec" ? (between(SEQ_REC.clickRec) ? 0 : -1) : (between(SEQ_NOW.clickNow) ? 1 : -1); const formVisible = path === "rec" && after(SEQ_REC.formIn[0]) && before(SEQ_REC.formOut[1]); const formProgress = path === "rec" ? Math.min(1, Math.max(0, (t - SEQ_REC.formFill[0]) / (SEQ_REC.formFill[1] - SEQ_REC.formFill[0]))) : 0; const formSubmitted = path === "rec" && after(SEQ_REC.formSubmit[0]); const callVisible = after(SEQ.callIn[0]); /* Top-left "OR CALL OUR AI 24/7" chip only appears in the live-call step. */ const callUsChipVisible = callVisible; /* Top-right path selector only appears once a path has been chosen. */ const pathSelectorVisible = after(SEQ.pickerOut[0]); // current phase index for tracker const STEPS_REC = [ { label: "Idle bubble", sub: "passive on the page" }, { label: "Hover preview", sub: "tooltip whisper" }, { label: "Picker opens", sub: "two routes offered" }, { label: "Personalized chosen", sub: "callback form" }, { label: "Form submitted", sub: "lead captured" }, { label: "Live call", sub: "concierge connected" }, ]; const STEPS_NOW = [ { label: "Idle bubble", sub: "passive on the page" }, { label: "Hover preview", sub: "tooltip whisper" }, { label: "Picker opens", sub: "two routes offered" }, { label: "Direct chosen", sub: "no friction" }, { label: "Live call", sub: "concierge connected" }, ]; const steps = path === "rec" ? STEPS_REC : STEPS_NOW; let activeIdx = 0; if (path === "rec") { if (after(28)) activeIdx = 5; else if (after(SEQ_REC.callIn[0])) activeIdx = 5; else if (after(SEQ_REC.formSubmit[0])) activeIdx = 4; else if (after(SEQ_REC.formIn[0])) activeIdx = 3; else if (after(SEQ_REC.pickerIn[0])) activeIdx = 2; else if (after(SEQ_REC.hoverLabel[0])) activeIdx = 1; } else { if (after(SEQ_NOW.callIn[0])) activeIdx = 4; else if (after(SEQ_NOW.clickNow[0])) activeIdx = 3; else if (after(SEQ_NOW.pickerIn[0])) activeIdx = 2; else if (after(SEQ_NOW.hoverLabel[0])) activeIdx = 1; } // Bubble position, lower-right (anchored to right + bottom) const bubbleRight = 24; const bubbleBottom = 122; // sit above the phase track (≈92px) + breathing room return (
{/* keyframes */} {/* heading */}
ON-SITE BUBBLE · LIVE WIDGET STATES

One bubble on the page,  two ways to talk.

Every Olea Hotels site gets a single discreet bubble. Visitors who want a curated proposal leave a callback; everyone else taps once and the agent picks up. Same bubble, same brand, two paths.

{/* THE BIG STAGE — aspect ratio matches the hero image (16:9) so it fills the frame edge-to-edge without cropping. */}
{/* Live website */} {/* Dim overlay */}
{/* Floating bubble */} {/* Picker */} {/* Lead form, only on rec path */} {path === "rec" && ( )} {/* Live call */} {/* AI phone number chip — only on the live-call step. zIndex 96 on the wrapper because the transform-animation creates a stacking context, otherwise the dim overlay (z=50) paints on top of it. */} {callUsChipVisible && (
)} {/* Path selector — only after a path has been chosen. zIndex 96 for the same stacking-context reason. */} {pathSelectorVisible && (
)} {/* Phase track */}
{/* footnote */}
AUREA HOTELS · DEMO PROPERTY · LIVE PREVIEW SCRIPTED LOOP · {Math.floor(t)}s / {SEQ.duration}s
); } // expose window.WidgetShowcase = WidgetShowcase;