Add theme_3d_systems/static/src/js/widgets/widget_card_tilt.js

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;