// Hero. The visual is the product: a live workflow panel plus three floating status
// cards that break out of its bounds. Depth comes from ambient light, a 1px hairline
// system and pointer-driven tilt — never from decoration.
// Pointer tilt. Writes CSS custom properties instead of inline transforms so the float
// animation and the tilt can compose, and so reduced-motion can switch it off.
// track: 'self' reacts to the pointer over the element itself; 'window' keeps facing the
// cursor anywhere in the viewport and only returns to rest when it leaves the window.
function useTilt(strength = 6, track = 'self') {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const rest = () => {
el.removeAttribute('data-tracking');
el.style.setProperty('--ry', '0deg'); el.style.setProperty('--rx', '0deg');
el.style.setProperty('--px', '0'); el.style.setProperty('--py', '0');
el.style.setProperty('--lift', '0');
};
// One rAF-coalesced write per frame — pointermove fires far faster than paint.
let pending = null, frame = 0;
const apply = () => {
frame = 0;
const e = pending;
if (!e) return;
const r = el.getBoundingClientRect();
// Against the window, distance is normalised by the viewport so the panel keeps
// turning as the cursor travels away instead of saturating at its own edge.
const w = track === 'window' ? window.innerWidth / 2 : r.width;
const h = track === 'window' ? window.innerHeight / 2 : r.height;
const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
const px = track === 'window' ? (e.clientX - cx) / w : (e.clientX - r.left) / r.width - 0.5;
const py = track === 'window' ? (e.clientY - cy) / h : (e.clientY - r.top) / r.height - 0.5;
const clamp = v => Math.max(-1, Math.min(1, v));
// Tracking is a near-immediate follow (see the short transition on [data-tracking]);
// only the return to rest is eased, so the panel feels attached to the cursor.
el.setAttribute('data-tracking', '1');
el.style.setProperty('--ry', (clamp(px) * strength).toFixed(2) + 'deg');
el.style.setProperty('--rx', (-clamp(py) * strength).toFixed(2) + 'deg');
el.style.setProperty('--px', clamp(px).toFixed(3));
el.style.setProperty('--py', clamp(py).toFixed(3));
el.style.setProperty('--lift', '1');
};
const move = e => { pending = e; if (!frame) frame = requestAnimationFrame(apply); };
const host = track === 'window' ? window : el;
host.addEventListener('pointermove', move, { passive: true });
if (track === 'window') {
document.addEventListener('pointerleave', rest);
window.addEventListener('blur', rest);
} else {
el.addEventListener('pointerleave', rest);
}
return () => {
host.removeEventListener('pointermove', move);
document.removeEventListener('pointerleave', rest);
window.removeEventListener('blur', rest);
el.removeEventListener('pointerleave', rest);
if (frame) cancelAnimationFrame(frame);
};
}, [strength, track]);
return ref;
}
// Ambient light and the orbital field. Pure CSS, 3–8% opacity, no imagery.
function HeroAtmos() {
return (
{/* The field plate carries the grid, trails, particles and ground glow; the CSS layers
that used to draw those were removed so nothing competes with it. */}
{[[58, 12], [72, 86], [88, 34], [64, 58], [42, 91], [95, 66]].map(([l, t], i) => (
))}
);
}
function FloatingCards() {
const { Avatar } = window.EG;
// The accent rotates between the three cards so the group reads as one live system
// rather than three static badges. Paused for reduced-motion users.
const [active, setActive] = React.useState(1);
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const t = setInterval(() => setActive(i => (i + 1) % 3), 3200);
return () => clearInterval(t);
}, []);
return (
boltAutomatización desplegadaEn producciónsmart_toyAgente ejecutadohace 2 min
);
}
function Hero() {
const { MetalButton } = window.EG;
const visualRef = React.useRef(null);
// border-beam's wrapper reports less flow height than the panel actually renders
// (measured: 330px allocated for a 381px panel), so the cards below it would sit inside
// the panel. Measure the real gap once and correct it — self-healing on resize, and if
// the library ever contains its child properly the correction becomes zero.
React.useEffect(() => {
const host = visualRef.current;
if (!host) return;
const panel = host.querySelector('.lp-wf');
const floats = host.querySelector('.lp-floats');
if (!panel || !floats) return;
const OVERLAP = 6; // just enough to break the panel edge without covering its content
const align = () => {
floats.style.marginTop = '';
// One-column hero: the panel and the cards are stacked and the CSS owns the
// offset. Measuring across that break produced a huge negative pull that lifted
// the cards over the header.
const grid = host.parentElement;
if (!grid || getComputedStyle(grid).gridTemplateColumns.split(' ').length < 2) return;
const current = parseFloat(getComputedStyle(floats).marginTop) || 0;
const delta = panel.getBoundingClientRect().bottom - floats.getBoundingClientRect().top;
const next = Math.min(240, Math.max(0, Math.round(current + delta - OVERLAP)));
floats.style.marginTop = next + 'px';
};
align();
// text metrics settle after the webfont swap, so measure again once it is ready
if (document.fonts && document.fonts.ready) document.fonts.ready.then(align);
const ro = new ResizeObserver(align);
ro.observe(panel);
window.addEventListener('resize', align);
return () => { ro.disconnect(); window.removeEventListener('resize', align); };
}, []);
return (
Consultoría de IA · Automatización · Software
Inteligencia artificial aplicada a operaciones reales.
Convertimos operaciones manuales en sistemas impulsados por IA.
Diseñamos agentes, automatizaciones y software para empresas
con procesos reales, datos reales y necesidad real de ejecutar.
{[['23', 'sistemas en producción'], ['6', 'sectores'], ['4–8', 'semanas por implementación']].map(([n, l]) => (
{n}{l}
))}
);
}
// Social proof. Deliberately restrained: sectors and outcomes, not a wall of borrowed
// logos. The four slots accept client marks when they clear.
function Proof() {
const { Badge } = window.EG;
return (