// Abstract hero background — combines:
// · soft indigo color wells (blobs) — ambient base
// · a low perspective grid receding into the back — depth anchor
// · 3 particle layers (far, mid, front) with different sizes & speeds
// · a few thin geometric outline shapes at the mid layer for texture
//
// The Hero parallax (mouse + scroll) reads .iso-layer + data-depth and
// translates each layer at its own ratio — the grid stays nearly fixed,
// far stars drift gently, foreground particles move most. Clear depth read.
//
// Exposes window.IsoScene (kept for app wiring compatibility).
// Deterministic RNG so positions are stable across renders
function rngFactory(seed) {
return (n) => {
const v = Math.sin(n * 12.9898 + seed * 78.233) * 43758.5453;
return v - Math.floor(v);
};
}
function Blobs() {
// 3 large blurred indigo wells — the ambient backdrop color
return (
);
}
function PerspectiveGrid() {
// Vanishing-point grid in the lower 55% of the hero — provides a fixed
// depth reference (parallax of THIS layer is near zero).
const vpX = 600;
const vpY = 420; // vanishing point ~52% down the viewBox
const farY = 800; // bottom edge
const lines = [];
// Horizontal lines, spaced with perspective acceleration toward viewer
const rows = 14;
for (let i = 1; i <= rows; i++) {
const t = i / rows;
const y = vpY + Math.pow(t, 1.7) * (farY - vpY);
const op = 0.06 + Math.pow(t, 0.7) * 0.22;
lines.push(
);
}
// Radial lines fanning from the vanishing point, downward
const cols = 18;
for (let i = -cols; i <= cols; i++) {
const angle = (i / cols) * 0.62; // narrower spread feels more natural
const dx = Math.tan(angle) * (farY - vpY);
const op = 0.05 + (1 - Math.abs(i) / cols) * 0.10;
lines.push(
);
}
// Soft horizon glow on the vanishing-point line
return (
{lines}
);
}
// Particle layer — small filled dots scattered across the viewBox
function Particles({ count, w = 1200, h = 800, seed, palette, sizeRange, opacityRange, yLimit }) {
const rng = rngFactory(seed);
const items = [];
for (let i = 0; i < count; i++) {
const x = rng(i * 2) * w;
const y = rng(i * 2 + 1) * (yLimit || h);
const sz = sizeRange[0] + rng(i * 3) * (sizeRange[1] - sizeRange[0]);
const op = opacityRange[0] + rng(i * 5) * (opacityRange[1] - opacityRange[0]);
const pickColor = rng(i * 7);
const color = pickColor < 0.08 ? '#FBBF24' : palette[Math.floor(pickColor * palette.length)];
items.push(
);
}
return {items};
}
// A few thin geometric outline shapes — texture in the mid layer
function GeoShapes() {
return (
{/* Tilted diamond */}
{/* Small triangle, far right */}
{/* Thin horizontal accent line with a chevron */}
{/* Tiny crosshair */}
{/* Square outline floating left-mid */}
{/* Hex hint, lower right */}
);
}
function AbstractScene() {
return (
);
}
window.IsoScene = AbstractScene;