9232f4c448
Add Build Manager with pin-to-dropper, Crucible multi-node terminal with SSH probe/wake, Command Deck chart balance and pretty stats, AetherForge logo and sacred geometry UI, Field Guide refresh, and LAUNCH.bat Cloudflare MSI + token service install flow.
80 lines
3.3 KiB
TypeScript
80 lines
3.3 KiB
TypeScript
import './AmbientBackground.css';
|
|
|
|
/** Slow-rotating sacred geometry SVG — Flower of Life circles inscribed in a pentagram ring */
|
|
function SacredGeometry() {
|
|
const cx = 50;
|
|
const cy = 50;
|
|
const R = 32; // outer circle radius
|
|
|
|
// Six-petal Flower of Life petal centres (offset by R from centre)
|
|
const petalAngles = [0, 60, 120, 180, 240, 300];
|
|
const petals = petalAngles.map((deg) => {
|
|
const rad = (deg * Math.PI) / 180;
|
|
return { x: cx + R * Math.cos(rad), y: cy + R * Math.sin(rad) };
|
|
});
|
|
|
|
// 5-pointed star vertices inscribed at radius R*1.15
|
|
const starR = R * 1.15;
|
|
const starPts = Array.from({ length: 5 }, (_, i) => {
|
|
const rad = ((i * 72 - 90) * Math.PI) / 180;
|
|
return { x: cx + starR * Math.cos(rad), y: cy + starR * Math.sin(rad) };
|
|
});
|
|
const starPath = starPts.map((p, i) => (i === 0 ? `M${p.x},${p.y}` : `L${p.x},${p.y}`)).join(' ') + ' Z';
|
|
|
|
// Inner triangles (upward + downward — Star of David inner ring)
|
|
const triR = R * 0.7;
|
|
const triUp = [0, 120, 240].map((d) => {
|
|
const rad = ((d - 90) * Math.PI) / 180;
|
|
return `${cx + triR * Math.cos(rad)},${cy + triR * Math.sin(rad)}`;
|
|
}).join(' ');
|
|
const triDown = [60, 180, 300].map((d) => {
|
|
const rad = ((d - 90) * Math.PI) / 180;
|
|
return `${cx + triR * Math.cos(rad)},${cy + triR * Math.sin(rad)}`;
|
|
}).join(' ');
|
|
|
|
return (
|
|
<svg className="ambient-sacred-geo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden>
|
|
<g opacity="0.55">
|
|
{/* Outer ring */}
|
|
<circle cx={cx} cy={cy} r={R * 1.35} fill="none" stroke="#c9a227" strokeWidth="0.18" strokeDasharray="1.2 1.8" />
|
|
{/* Middle ring */}
|
|
<circle cx={cx} cy={cy} r={R} fill="none" stroke="#c9a227" strokeWidth="0.22" />
|
|
{/* Inner ring */}
|
|
<circle cx={cx} cy={cy} r={R * 0.5} fill="none" stroke="#c9a227" strokeWidth="0.18" strokeDasharray="0.6 1.2" />
|
|
{/* Flower of Life petal circles */}
|
|
{petals.map((p, i) => (
|
|
<circle key={i} cx={p.x} cy={p.y} r={R} fill="none" stroke="#c9a227" strokeWidth="0.16" opacity="0.7" />
|
|
))}
|
|
{/* Pentagon star */}
|
|
<path d={starPath} fill="none" stroke="#ff8c00" strokeWidth="0.2" strokeLinejoin="round" opacity="0.6" />
|
|
{/* Merkaba triangles */}
|
|
<polygon points={triUp} fill="none" stroke="#c9a227" strokeWidth="0.2" opacity="0.8" />
|
|
<polygon points={triDown} fill="none" stroke="#c9a227" strokeWidth="0.2" opacity="0.8" />
|
|
{/* Centre dot */}
|
|
<circle cx={cx} cy={cy} r="0.6" fill="#c9a227" opacity="0.9" />
|
|
{/* Spoke lines to star points */}
|
|
{starPts.map((p, i) => (
|
|
<line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke="#c9a227" strokeWidth="0.1" opacity="0.35" />
|
|
))}
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function AmbientBackground() {
|
|
return (
|
|
<div className="ambient-bg" aria-hidden>
|
|
<div className="ambient-grid" />
|
|
<div className="ambient-vignette" />
|
|
<div className="ambient-orb ambient-orb-cyan" />
|
|
<div className="ambient-orb ambient-orb-magenta" />
|
|
<div className="ambient-orb ambient-orb-amber" />
|
|
<div className="ambient-scanline" />
|
|
<div className="ambient-gear ambient-gear-1" />
|
|
<div className="ambient-gear ambient-gear-2" />
|
|
{/* Sacred geometry watermark — centre of the main content area */}
|
|
<SacredGeometry />
|
|
</div>
|
|
);
|
|
}
|