https://petezahgames.com/pz-vanta.js

1import * as THREE from "/vendor/three/three.module.min.js";
2
3const SPACE = {
4  highlightColor: 0x2f5a8a,
5  midtoneColor: 0x14304f,
6  lowlightColor: 0x071022,
7  baseColor: 0x020810,
8  backgroundColor: 0x020810,
9};
10
11function loadScript(src) {
12  return new Promise((resolve, reject) => {
13    if (document.querySelector(`script[src="${src}"]`)) {
14      resolve();
15      return;
16    }
17    const s = document.createElement("script");
18    s.src = src;
19    s.async = true;
20    s.onload = () => resolve();
21    s.onerror = () => reject(new Error("Failed to load " + src));
22    document.head.appendChild(s);
23  });
24}
25
26function viewportSize() {
27  const w = Math.max(
28    window.innerWidth || 0,
29    document.documentElement?.clientWidth || 0,
30    document.body?.clientWidth || 0
31  );
32  const h = Math.max(
33    window.innerHeight || 0,
34    document.documentElement?.clientHeight || 0,
35    document.body?.clientHeight || 0
36  );
37  return { w: Math.ceil(w + 2), h: Math.ceil(h + 2) };
38}
39
40function fit(el, effect) {
41  if (!el) return;
42  const { w, h } = viewportSize();
43  el.style.width = w + "px";
44  el.style.height = h + "px";
45  el.style.left = "0";
46  el.style.top = "0";
47  try {
48    effect?.resize?.();
49  } catch {}
50  const canvas = el.querySelector("canvas");
51  if (canvas) {
52    canvas.style.width = w + "px";
53    canvas.style.height = h + "px";
54    canvas.style.maxWidth = "none";
55    canvas.style.maxHeight = "none";
56    canvas.style.display = "block";
57    canvas.style.position = "absolute";
58    canvas.style.left = "0";
59    canvas.style.top = "0";
60  }
61  try {
62    effect?.resize?.();
63  } catch {}
64}
65
66async function boot() {
67  const el = document.getElementById("vanta-bg");
68  if (!el) return;
69
70  el.style.background = "#020810";
71  window.THREE = THREE;
72
73  try {
74    await loadScript("/vendor/vanta/vanta.fog.min.js");
75  } catch {
76    try {
77      await loadScript("/vendor/vanta.fog.min.js");
78    } catch {
79      return;
80    }
81  }
82
83  if (!window.VANTA || typeof window.VANTA.FOG !== "function") return;
84
85  let effect = null;
86  try {
87    effect = window.VANTA.FOG({
88      el,
89      THREE,
90      mouseControls: true,
91      touchControls: true,
92      gyroControls: false,
93      minHeight: 200,
94      minWidth: 200,
95      blurFactor: 0.85,
96      speed: 1.35,
97      zoom: 1.3,
98      scale: 1,
99      scaleMobile: 1,
100      ...SPACE,
101    });
102    try {
103      effect?.setOptions?.(SPACE);
104      effect?.updateUniforms?.();
105    } catch {}
106  } catch {
107    return;
108  }
109
110  window.__pzVanta = effect;
111
112  const sync = () => fit(el, effect);
113  sync();
114  window.addEventListener("resize", sync);
115  window.addEventListener("orientationchange", sync);
116  window.visualViewport?.addEventListener("resize", sync);
117  setTimeout(sync, 50);
118  setTimeout(sync, 250);
119  setTimeout(sync, 800);
120  setTimeout(sync, 1600);
121}
122
123boot();