// Starfish — bottom-left creature. Clicking reveals a small vendor-partnership card. // Sits just above the bottom of the screen; wiggles its arms gently. const Starfish = () => { const [open, setOpen] = React.useState(false); const [copied, setCopied] = React.useState(false); const [t, setT] = React.useState(0); const triggerRef = React.useRef(null); const panelRef = React.useRef(null); // close on click outside React.useEffect(() => { if (!open) return; const onDown = (e) => { const t = e.target; if (triggerRef.current?.contains(t)) return; if (panelRef.current?.contains(t)) return; setOpen(false); }; const id = setTimeout(() => document.addEventListener('mousedown', onDown), 0); return () => { clearTimeout(id); document.removeEventListener('mousedown', onDown); }; }, [open]); React.useEffect(() => { let raf; const start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const rot = Math.sin(t * 0.5) * 6; // slow sway const breathe = 1 + Math.sin(t * 1.2) * 0.03; // Classic 5-point star path — sharp, pointy arms const starPath = (() => { const pts = []; const R = 30, r = 13; for (let i = 0; i < 10; i++) { const angle = (Math.PI / 5) * i - Math.PI / 2; const rad = i % 2 === 0 ? R : r; pts.push([Math.cos(angle) * rad, Math.sin(angle) * rad]); } return 'M ' + pts.map(p => p.join(',')).join(' L ') + ' Z'; })(); // Little bumps (tubercles) scattered on the surface const bumps = (() => { const out = []; const rings = [ { r: 20, count: 5, size: 1.5 }, { r: 11, count: 5, size: 1.3 }, ]; rings.forEach((ring, ri) => { for (let i = 0; i < ring.count; i++) { const a = (Math.PI * 2 / ring.count) * i + (ri === 0 ? -Math.PI/2 : -Math.PI/2 + Math.PI/5); out.push({ x: Math.cos(a) * ring.r, y: Math.sin(a) * ring.r, r: ring.size, }); } }); return out; })(); const email = 'partnerships@tides.deals'; const copy = (e) => { e.stopPropagation(); navigator.clipboard?.writeText(email); setCopied(true); setTimeout(() => setCopied(false), 1600); }; const isMobile = window.innerWidth < 600 || window.matchMedia('(pointer: coarse)').matches; const sfScale = isMobile ? 0.65 : 1.12; return ( <> {/* Creature — bottom-RIGHT with hint */}
setOpen(o => !o)} > {/* pulsing attention ring */} {!open && ( )} {/* soft water shadow behind */} {/* main body — flat painterly fill, ink linework */} {/* subtle rim shading */} {/* surface speckles */} {bumps.map((b, i) => ( ))} {/* tiny ink-dot face */}
{/* Hint label + arrow (mirrored, points from text toward starfish on the right) */} {!open && (
vendors say hi
)}
{/* Vendor card — sits to the LEFT of the starfish now */}
For vendors
Run a venue? Let's partner.

If you run a fun activity venue in Melbourne such as bowling, karting, escape rooms, mini golf, arcades etc. drop us a line!

); }; window.Starfish = Starfish; // Inject keyframes once if (typeof document !== 'undefined' && !document.getElementById('starfish-kf')) { const s = document.createElement('style'); s.id = 'starfish-kf'; s.textContent = ` @keyframes starPulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes hintFloat { 0%,100% { transform: translateX(0); opacity: 0.75; } 50% { transform: translateX(3px); opacity: 1; } } `; document.head.appendChild(s); }