From 67f5eaa18708ed76615b8d89fbaf0f25d83e81b3 Mon Sep 17 00:00:00 2001
From: Huzaifa Inam <ceo@huzaifainam.com>
Date: Sat, 22 Aug 2026 21:25:14 +0000
Subject: [PATCH] Add theme_3d_systems/static/src/js/widgets/widget_3d_hero.js

---
 .../static/src/js/widgets/widget_3d_hero.js   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 theme_3d_systems/static/src/js/widgets/widget_3d_hero.js

diff --git a/theme_3d_systems/static/src/js/widgets/widget_3d_hero.js b/theme_3d_systems/static/src/js/widgets/widget_3d_hero.js
new file mode 100644
index 0000000..0de806e
--- /dev/null
+++ b/theme_3d_systems/static/src/js/widgets/widget_3d_hero.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import publicWidget from '@web/legacy/js/public/public_widget';
+import { HeroNetworkScene } from '../three/hero_network_scene';
+
+publicWidget.registry.Theme3DHero = publicWidget.Widget.extend({
+    selector: '.s_3d_hero',
+    disabledInEditableMode: false,
+
+    start: function () {
+        this._super.apply(this, arguments);
+
+        // Do not initialize heavy WebGL on reduced-motion preference or low-end mobile
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) return;
+
+        const container = this.el.querySelector('.hero-canvas-container');
+        if (container) {
+            const density = this.el.dataset.particleDensity || 'normal';
+            let count = 65;
+            if (density === 'low') count = 30;
+            if (density === 'high') count = 110;
+
+            this.sceneInstance = new HeroNetworkScene(container, {
+                particleCount: count,
+            });
+        }
+    },
+
+    destroy: function () {
+        if (this.sceneInstance) {
+            this.sceneInstance.destroy();
+            this.sceneInstance = null;
+        }
+        this._super.apply(this, arguments);
+    },
+});
+
+export default publicWidget.registry.Theme3DHero;