/* eslint-disable no-undef */
/* bg.jsx — site-wide static parallax background with 5 variants
- Renders a fixed background layer behind everything.
- On non-home pages: owns its own Tweaks panel (just the bg picker).
- On the home page: hero.jsx merges bg controls into its panel and
sets `window.__BG_OWNED_BY_HERO = true` BEFORE this script runs.
*/
const { useState, useEffect, useRef } = React;
/* ──────────────────────────────────────────────────────────
Variant 1: Layered horizon — pale sand bottom → cream top
────────────────────────────────────────────────────────── */
function BgHorizon() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 2: Warm grain — flat cream + film grain
────────────────────────────────────────────────────────── */
function BgGrain() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 3: Enso brushstroke — single faint circle top-right
────────────────────────────────────────────────────────── */
function BgEnso() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 4: Sumi ink wash — diagonal cloud
────────────────────────────────────────────────────────── */
function BgSumi() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 5: Washi paper — fibers + warm paper tone
────────────────────────────────────────────────────────── */
function BgWashi() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 6: Mist — soft horizontal bands, foggy gradient
────────────────────────────────────────────────────────── */
function BgMist() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 7: Paper — off-white with deckle edges + speckle
────────────────────────────────────────────────────────── */
function BgPaper() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 8: Linen — woven cross-hatch fabric texture
────────────────────────────────────────────────────────── */
function BgLinen() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 9: Garden — abstract leaves/branches in low-contrast
────────────────────────────────────────────────────────── */
function BgGarden() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 10: Stone — mottled cool minerality (river rock)
────────────────────────────────────────────────────────── */
function BgStone() {
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 11: Dawn — pink/peach gradient (warm, not yellow)
────────────────────────────────────────────────────────── */
function BgDawn() {
// Deterministic scattered stars for ambient continuity across all sections.
// Subtle in light mode, slightly more visible in dark mode (CSS opacity hook).
const stars = [];
let s = 1234;
const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
for (let i = 0; i < 90; i++) {
stars.push({
x: rnd() * 1600,
y: rnd() * 1100,
r: 0.6 + rnd() * 1.6,
o: 0.25 + rnd() * 0.55,
});
}
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 12: Dusk — purple-blue gradient (cool, different mood)
────────────────────────────────────────────────────────── */
function BgDusk() {
const stars = [];
let s = 5678;
const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
for (let i = 0; i < 90; i++) {
stars.push({ x: rnd() * 1600, y: rnd() * 1100, r: 0.6 + rnd() * 1.6, o: 0.25 + rnd() * 0.55 });
}
return (
);
}
/* ──────────────────────────────────────────────────────────
Variant 13: Snow — flat white + single faint ridgeline
────────────────────────────────────────────────────────── */
function BgSnow() {
return (
);
}
const BG_VARIANTS = {
horizon: BgHorizon,
grain: BgGrain,
enso: BgEnso,
sumi: BgSumi,
washi: BgWashi,
mist: BgMist,
paper: BgPaper,
linen: BgLinen,
garden: BgGarden,
stone: BgStone,
dawn: BgDawn,
dusk: BgDusk,
snow: BgSnow,
none: null
};
/* ──────────────────────────────────────────────────────────
BackgroundLayer — fixed full-viewport, parallax drift
────────────────────────────────────────────────────────── */
function BackgroundLayer({ variant }) {
if (variant === "none") return null;
const V = BG_VARIANTS[variant] || BG_VARIANTS.horizon;
return (
);
}
const BG_DEFAULTS = /*EDITMODE-BEGIN*/{
"bgDark": "dusk",
"bgLight": "dawn"
}/*EDITMODE-END*/;
const BG_OPTIONS = [
{ value: "horizon", label: "Horizon" },
{ value: "grain", label: "Warm grain" },
{ value: "enso", label: "Enso" },
{ value: "sumi", label: "Sumi wash" },
{ value: "washi", label: "Washi" },
{ value: "mist", label: "Mist" },
{ value: "paper", label: "Paper" },
{ value: "linen", label: "Linen" },
{ value: "garden", label: "Garden" },
{ value: "stone", label: "Stone" },
{ value: "dawn", label: "Dawn" },
{ value: "dusk", label: "Dusk" },
{ value: "snow", label: "Snow" },
{ value: "none", label: "Off" }
];
/* Hook: returns 'dark' or 'light' and re-renders when html[data-theme] changes */
function useThemeMode() {
const get = () => document.documentElement.getAttribute('data-theme') || 'dark';
const [mode, setMode] = React.useState(get);
React.useEffect(() => {
const obs = new MutationObserver(() => setMode(get()));
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
return () => obs.disconnect();
}, []);
return mode;
}
/* ──────────────────────────────────────────────────────────
Standalone root: used on pages where hero.jsx is NOT loaded.
Skips its Tweaks panel if the host page already owns one.
────────────────────────────────────────────────────────── */
function BgStandaloneRoot() {
const ownedByHero = !!window.__BG_OWNED_BY_HERO;
const [tweaks, setTweak] = window.useTweaks
? window.useTweaks(BG_DEFAULTS)
: [BG_DEFAULTS, () => {}];
const mode = useThemeMode();
const variant = mode === 'light'
? (tweaks.bgLight || tweaks.bg || "dawn")
: (tweaks.bgDark || tweaks.bg || "dusk");
const TweaksPanel = window.TweaksPanel;
const TweakSection = window.TweakSection;
const TweakSelect = window.TweakSelect;
return (
<>
{!ownedByHero && TweaksPanel && (
setTweak("bgDark", v)}
/>
setTweak("bgLight", v)}
/>
)}
);
}
window.BackgroundLayer = BackgroundLayer;
window.BG_OPTIONS = BG_OPTIONS;
window.BG_DEFAULTS = BG_DEFAULTS;
const bgRoot = document.getElementById("bg-root");
if (bgRoot && !window.__BG_OWNED_BY_HERO) {
ReactDOM.createRoot(bgRoot).render();
}