better ux

README.md

@@ -1,12 +1,13 @@
 ---
 title: DeepSeek-R1 WebGPU
-emoji: 🧠
+emoji: 🧠🐳
 colorFrom: red
 colorTo: blue
 sdk: static
 pinned: false
+app_port: 7860
 license: apache-2.0
-short_description: Next-generation reasoning model that runs locally in-browser
+short_description: Small reasoning model running in browser 
 thumbnail: >-
   https://huggingface.co/spaces/webml-community/deepseek-r1-webgpu/resolve/main/banner.png
 ---

src/App.jsx

@@ -208,6 +208,11 @@ 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>
             <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.
             </h2>

tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
         'fade-in-up': 'fadeInUp 0.5s ease-out',
         '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',
       },
       keyframes: {
         gradient: {
@@ -35,6 +37,20 @@ module.exports = {
           '0%, 100%': { opacity: 1 },
           '50%': { opacity: 0.5 },
         },
+        float: {
+          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
+          '50%': { transform: 'translateY(-10px) rotate(5deg)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '200% 50%' },
+          '100%': { backgroundPosition: '-200% 50%' },
+        },
+      },
+      dropShadow: {
+        'glow': '0 0 10px rgba(56, 189, 248, 0.5)',
+      },
+      backgroundSize: {
+        '400%': '400% 100%',
       },
     },
   },