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

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

diff --git a/theme_3d_systems/static/src/js/widgets/widget_card_tilt.js b/theme_3d_systems/static/src/js/widgets/widget_card_tilt.js
new file mode 100644
index 0000000..ed678fc
--- /dev/null
+++ b/theme_3d_systems/static/src/js/widgets/widget_card_tilt.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+import publicWidget from '@web/legacy/js/public/public_widget';
+
+publicWidget.registry.ThemeCardTilt = publicWidget.Widget.extend({
+    selector: '.s_floating_cards, .s_odoo_modules_grid, .s_portfolio_showcase',
+
+    start: function () {
+        this._super.apply(this, arguments);
+        const cards = this.el.querySelectorAll('.card-3d-glass, .odoo-module-card');
+        
+        cards.forEach((card) => {
+            card.addEventListener('mousemove', (e) => {
+                const rect = card.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+
+                const rotateX = ((y - centerY) / centerY) * -8;
+                const rotateY = ((x - centerX) / centerX) * 8;
+
+                card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px)`;
+            });
+
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)';
+            });
+        });
+    },
+});
+
+export default publicWidget.registry.ThemeCardTilt;