extras

src/App.jsx

@@ -208,10 +208,14 @@ function App() {
             <h1 className={`text-5xl font-bold mb-3 ${GRADIENT_CLASSES} bg-clip-text text-transparent transition-all duration-500`}>
               DeepSeek-R1 WebGPU
             </h1>
-            <div className="text-6xl mb-4 animate-float filter drop-shadow-glow hover:scale-110 transition-transform duration-300">
-              <span className="inline-block animate-shimmer bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
-                🐳
-              </span>
+            <div className="text-8xl mb-4 group perspective">
+              <div className="relative transform-gpu transition-all duration-500 animate-float group-hover:scale-110">
+                <span className="absolute inset-0 animate-shimmer-fast bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full blur-sm"></span>
+                <span className="relative inline-block animate-shimmer bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent filter drop-shadow-glow hover:drop-shadow-glow-strong">
+                  🐳
+                </span>
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 via-cyan-400/20 to-blue-500/20 rounded-full blur-md animate-pulse-slow"></div>
+              </div>
             </div>
             <h2 className="font-semibold text-slate-700 dark:text-slate-300">
               A next-generation reasoning model that runs locally in your browser with WebGPU acceleration.
@@ -226,7 +230,7 @@ function App() {
               >
                 Xenova & Deepseek-R1
               </a>
-              {" "}- Frontend crafted by{" "}
+              {" "}- Frontend by{" "}
               <a
                 href="https://github.com/Reidmen"
                 target="_blank"

tailwind.config.js

@@ -8,7 +8,9 @@ module.exports = {
         'bounce-slow': 'bounce 3s infinite',
         'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         'float': 'float 6s ease-in-out infinite',
-        'shimmer': 'shimmer 2s linear infinite',
+        'shimmer': 'shimmer 3s linear infinite',
+        'shimmer-fast': 'shimmer 2s linear infinite',
+        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       },
       keyframes: {
         gradient: {
@@ -38,20 +40,34 @@ module.exports = {
           '50%': { opacity: 0.5 },
         },
         float: {
-          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
-          '50%': { transform: 'translateY(-10px) rotate(5deg)' },
+          '0%, 100%': { 
+            transform: 'translateY(0) rotate(0deg) scale(1)',
+            filter: 'brightness(1)'
+          },
+          '50%': { 
+            transform: 'translateY(-10px) rotate(5deg) scale(1.05)',
+            filter: 'brightness(1.2)'
+          },
         },
         shimmer: {
-          '0%': { backgroundPosition: '200% 50%' },
-          '100%': { backgroundPosition: '-200% 50%' },
+          '0%': { backgroundPosition: '200% 50%', opacity: 0.5 },
+          '50%': { opacity: 1 },
+          '100%': { backgroundPosition: '-200% 50%', opacity: 0.5 },
         },
       },
       dropShadow: {
         'glow': '0 0 10px rgba(56, 189, 248, 0.5)',
+        'glow-strong': [
+          '0 0 10px rgba(56, 189, 248, 0.5)',
+          '0 0 20px rgba(56, 189, 248, 0.3)',
+        ],
       },
       backgroundSize: {
         '400%': '400% 100%',
       },
+      perspective: {
+        'default': '1000px',
+      },
     },
   },
 }