/* Sacred geometry SVG components — animate on mount + scroll-tied morph */
const { useEffect, useRef, useState } = React;
// Utility: stroke-dash-based "draw on" animation via CSS variable
function useDrawIn(delay = 0) {
const [drawn, setDrawn] = useState(false);
useEffect(() => {
const t = setTimeout(() => setDrawn(true), delay);
return () => clearTimeout(t);
}, [delay]);
return drawn;
}
// === Hero geometry: triangle + circles + axes, builds line by line ===
function HeroGeometry({ progress = 0, accent = '#c9bd9b' }) {
// progress 0..1 drives morph between triangle and hexagram
const drawn = useDrawIn(200);
const morph = Math.min(1, Math.max(0, progress));
// Triangle vertices (equilateral) on a circle radius R, rotated -90°
const cx = 200, cy = 200, R = 130;
const angles = [-90, 30, 150].map(a => a * Math.PI / 180);
const triPts = angles.map(a => [cx + R * Math.cos(a), cy + R * Math.sin(a)]);
// inverted triangle for hexagram
const angles2 = [90, 210, 330].map(a => a * Math.PI / 180);
const tri2Pts = angles2.map(a => [cx + R * Math.cos(a), cy + R * Math.sin(a)]);
const triPath = `M${triPts[0][0]},${triPts[0][1]} L${triPts[1][0]},${triPts[1][1]} L${triPts[2][0]},${triPts[2][1]} Z`;
const tri2Path = `M${tri2Pts[0][0]},${tri2Pts[0][1]} L${tri2Pts[1][0]},${tri2Pts[1][1]} L${tri2Pts[2][0]},${tri2Pts[2][1]} Z`;
return (
);
}
// === Small accent: orbit/circles inset for section markers ===
function OrbitMark({ accent = '#c9bd9b', variant = 0 }) {
const variants = [
// Concentric
,
// Triangle in circle
,
// Sunburst
{Array.from({ length: 24 }).map((_, i) => {
const a = (i / 24) * Math.PI * 2;
const r1 = 10, r2 = 10 + (i % 2 === 0 ? 22 : 14);
return ;
})}
,
// Hexagram
,
];
return (
);
}
// === Background dust / stars ===
function StarField({ count = 80 }) {
const stars = useRef(null);
if (!stars.current) {
stars.current = Array.from({ length: count }).map(() => ({
x: Math.random() * 100,
y: Math.random() * 100,
r: Math.random() * 1.1 + 0.2,
d: Math.random() * 4 + 2,
o: Math.random() * 0.6 + 0.2,
}));
}
return (
);
}
function EarthBg({ accent = '#c9bd9b' }) {
return (
);
}
Object.assign(window, { HeroGeometry, OrbitMark, StarField, EarthBg });