import TubesCursor from "https://cdn.jsdelivr.net/npm/threejs-components@0.0.19/build/cursors/tubes1.min.js";
function randomColors(count) {
return new Array(count).fill(0).map(() => {
return "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0");
});
}
function initTubes(root) {
const canvas = root.querySelector(".tubes-canvas");
if (!canvas) return;
const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const app = TubesCursor(canvas, {
tubes: {
colors: ["#f967fb", "#53bc28", "#6958d5"],
lights: {
intensity: 200,
colors: ["#83f36e", "#fe8a2e", "#ff008a", "#60aed5"]
}
}
});
function applyRandom() {
app.tubes.setColors(randomColors(3));
app.tubes.setLightsColors(randomColors(4));
}
root.addEventListener("click", () => {
if (reduceMotion) return;
applyRandom();
}, { passive: true });
}
function boot() {
document.querySelectorAll("[data-tubes]").forEach(initTubes);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot);
} else {
boot();
}
