/* ============== HERO with canvas starfield + orbital moon =============== */
const HeroCanvas = ({ intensity = "high" }) => {
const ref = React.useRef(null);
React.useEffect(() => {
const canvas = ref.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2);
let raf, w, h, stars, shooters;
const intensityFactor = intensity === "low" ? 0.25 : intensity === "medium" ? 0.55 : 1;
const resize = () => {
const rect = canvas.getBoundingClientRect();
w = rect.width; h = rect.height;
canvas.width = w * dpr;
canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seed();
};
const seed = () => {
const count = Math.floor((w * h) / 9000 * intensityFactor);
stars = Array.from({ length: count }, () => ({
x: Math.random() * w,
y: Math.random() * h,
z: Math.random() * 0.85 + 0.15,
vx: (Math.random() - 0.5) * 0.04,
vy: (Math.random() - 0.5) * 0.04,
tw: Math.random() * Math.PI * 2,
twS: Math.random() * 0.02 + 0.005,
}));
shooters = [];
};
const spawnShooter = () => {
if (intensity === "low") return;
if (Math.random() > 0.012 * intensityFactor) return;
shooters.push({
x: Math.random() * w * 0.5,
y: Math.random() * h * 0.3,
vx: 2 + Math.random() * 2,
vy: 0.8 + Math.random() * 0.8,
life: 1,
len: 80 + Math.random() * 60,
});
};
const draw = () => {
ctx.clearRect(0, 0, w, h);
// soft nebula glow
const grad = ctx.createRadialGradient(w * 0.7, h * 0.5, 0, w * 0.7, h * 0.5, Math.max(w, h) * 0.6);
grad.addColorStop(0, "rgba(91, 141, 239, 0.10)");
grad.addColorStop(0.45, "rgba(91, 141, 239, 0.04)");
grad.addColorStop(1, "rgba(0, 0, 0, 0)");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
// stars
for (const s of stars) {
s.x += s.vx * s.z;
s.y += s.vy * s.z;
s.tw += s.twS;
if (s.x < 0) s.x = w; if (s.x > w) s.x = 0;
if (s.y < 0) s.y = h; if (s.y > h) s.y = 0;
const a = (Math.sin(s.tw) * 0.5 + 0.5) * 0.85 + 0.15;
const r = s.z * 1.4;
ctx.beginPath();
ctx.fillStyle = `rgba(${220 + Math.floor(s.z * 35)}, ${230}, 255, ${a * s.z})`;
ctx.arc(s.x, s.y, r, 0, Math.PI * 2);
ctx.fill();
}
// shooting stars
spawnShooter();
for (let i = shooters.length - 1; i >= 0; i--) {
const sh = shooters[i];
sh.x += sh.vx;
sh.y += sh.vy;
sh.life -= 0.012;
if (sh.life <= 0 || sh.x > w + 100 || sh.y > h + 100) {
shooters.splice(i, 1); continue;
}
const tailX = sh.x - sh.vx * (sh.len / 4);
const tailY = sh.y - sh.vy * (sh.len / 4);
const lg = ctx.createLinearGradient(sh.x, sh.y, tailX, tailY);
lg.addColorStop(0, `rgba(180, 210, 255, ${sh.life})`);
lg.addColorStop(1, "rgba(180, 210, 255, 0)");
ctx.strokeStyle = lg;
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.moveTo(sh.x, sh.y);
ctx.lineTo(tailX, tailY);
ctx.stroke();
}
raf = requestAnimationFrame(draw);
};
resize();
draw();
window.addEventListener("resize", resize);
return () => { window.removeEventListener("resize", resize); cancelAnimationFrame(raf); };
}, [intensity]);
return
{/* outer glow */}
{/* terminator shadow */}
{/* orbiting satellites */}
{[
{ r: 200, speed: 1.2, size: 4, color: "#8aafff", offset: 0 },
{ r: 235, speed: -0.7, size: 3, color: "#c9d4ee", offset: 1.5 },
{ r: 268, speed: 0.4, size: 2.5, color: "#5b8def", offset: 3 },
].map((s, i) => {
const a = t * s.speed + s.offset;
const x = Math.cos(a) * s.r;
const y = Math.sin(a) * s.r;
return (
);
})}
{/* tick marks ring */}
{Array.from({ length: 48 }).map((_, i) => {
const a = (i / 48) * Math.PI * 2;
const r1 = 185, r2 = i % 4 === 0 ? 195 : 190;
return (
{/* coordinate readout */}
ORBIT/01 · LUNAR
{`SYS · ${Math.floor((t * 12) % 360).toString().padStart(3, "0")}°`}
);
};
/* ============== HERO =============== */
const Hero = ({ tweaks }) => {
const headline = tweaks.headline;
const words = headline.split(" ");
return (
{words.map((w, i) => (
{w.replace(/\*/g, "")}{i < words.length - 1 ? "\u00A0" : ""}
))}
Construímos sistemas internos sob medida que substituem planilhas, automatizam processos e devolvem tempo ao seu time. Software pensado para resolver não só para existir.
2
Sistemas em produção
100%
Sob medida
24/7
Operação contínua
);
};
window.Hero = Hero;