feat: implement 3D parallax effects and floating particles in the main app layout; enhance Tailwind CSS configuration with perspective utilities

2025-10-04 20:52:35 -07:00
parent 0393deeaa7
commit e1de9fa161
2 changed files with 222 additions and 23 deletions
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -62,9 +62,27 @@ module.exports = {
      backdropBlur: {
        xs: '2px',
      },
+      perspective: {
+        '300': '300px',
+        '500': '500px',
+        '1000': '1000px',
+        '2000': '2000px',
+      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
+    function({ addUtilities }) {
+      addUtilities({
+        '.perspective-300': { perspective: '300px' },
+        '.perspective-500': { perspective: '500px' },
+        '.perspective-1000': { perspective: '1000px' },
+        '.perspective-2000': { perspective: '2000px' },
+        '.transform-style-preserve-3d': { 'transform-style': 'preserve-3d' },
+        '.transform-style-flat': { 'transform-style': 'flat' },
+        '.backface-hidden': { 'backface-visibility': 'hidden' },
+        '.backface-visible': { 'backface-visibility': 'visible' },
+      })
+    }
  ],
 }