added some intro animations

src/App.tsx

@@ -53,7 +53,7 @@ function App() {
           <span className="font-bold flex items-center justify-center gap-1">
             <img
               src="hf-logo.svg"
-              alt="Gemma Logo"
+              alt="Transformers.js Logo"
               className="block"
               style={{
                 width: "1.2em",
@@ -73,14 +73,17 @@ function App() {
           isInitializing={isInitializing}
         />
       )}
-      <footer className="p-8 pt-0 text-center text-muted-foreground text-xs md:text-sm">
+      <footer
+        className="p-8 pt-0 text-center text-muted-foreground text-xs md:text-sm animate-fade-in"
+        style={{ animationDelay: "0.5s", opacity: 0 }}
+      >
         <p>
           High-quality translations across 56 languages powered by{" "}
           <a
             href="https://blog.google/technology/developers/gemma-open-models/"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-primary hover:underline"
+            className="text-primary hover:underline underline-offset-2 transition-all hover:underline-offset-4"
           >
             Google's TranslateGemma
           </a>{" "}
@@ -89,7 +92,7 @@ function App() {
             href="https://huggingface.co/docs/transformers.js"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-primary hover:underline"
+            className="text-primary hover:underline underline-offset-2 transition-all hover:underline-offset-4"
           >
             Transformers.js
           </a>{" "}

src/Initialize.tsx

@@ -17,12 +17,15 @@ export default function Initialize({
   className = "",
 }: InitializeProps) {
   return (
-    <div className={cn("max-w-2xl mx-auto px-8", className)}>
+    <div className={cn("max-w-2xl mx-auto px-8 animate-fade-in-up", className)}>
       <div className="bg-white rounded-lg shadow-md p-8 border border-border">
         <div className="flex flex-col items-center gap-6">
           {/* Description */}
           <div className="space-y-4 text-left w-full">
-            <div>
+            <div
+              className="animate-fade-in-up"
+              style={{ animationDelay: "0.1s", opacity: 0 }}
+            >
               <h3 className="font-semibold text-base mb-1">
                 About TranslateGemma 4B
               </h3>
@@ -35,14 +38,17 @@ export default function Initialize({
                   href="https://blog.google/innovation-and-ai/technology/developers-tools/translategemma/"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-primary hover:underline"
+                  className="text-primary hover:underline underline-offset-2 transition-all hover:underline-offset-4"
                 >
                   Learn more
                 </a>
               </p>
             </div>
 
-            <div>
+            <div
+              className="animate-fade-in-up"
+              style={{ animationDelay: "0.2s", opacity: 0 }}
+            >
               <h3 className="font-semibold text-base mb-1">
                 Completely private & offline-capable
               </h3>
@@ -53,7 +59,10 @@ export default function Initialize({
               </p>
             </div>
 
-            <div>
+            <div
+              className="animate-fade-in-up"
+              style={{ animationDelay: "0.3s", opacity: 0 }}
+            >
               <h3 className="font-semibold text-base mb-1">
                 Experimental — WebGPU required
               </h3>
@@ -66,20 +75,25 @@ export default function Initialize({
 
           {/* Initialize button or progress indicator */}
           {isInitializing ? (
-            <div className="w-full space-y-2">
+            <div
+              className="w-full space-y-2 animate-fade-in-up"
+              style={{ animationDelay: "0.4s", opacity: 0 }}
+            >
               <div className="flex justify-between items-center">
                 <span className="text-sm font-medium text-muted-foreground">
                   Loading model...
                 </span>
-                <span className="text-sm font-medium text-primary">
+                <span className="text-sm font-medium text-primary animate-pulse-soft">
                   {progress}%
                 </span>
               </div>
               <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
                 <div
-                  className="bg-primary h-full transition-all duration-300 ease-out"
+                  className="bg-primary h-full transition-all duration-300 ease-out relative overflow-hidden"
                   style={{ width: `${progress}%` }}
-                />
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_infinite]" />
+                </div>
               </div>
               <p className="text-xs text-muted-foreground text-center">
                 This may take a few moments. Please don't close the page.
@@ -90,7 +104,7 @@ export default function Initialize({
               variant="primary"
               onClick={onInitialize}
               disabled={isInitializing}
-              className="text-lg mt-8"
+              className="text-lg! mt-4"
             >
               {isInitializing
                 ? "Initializing..."

src/index.css

@@ -64,3 +64,69 @@ body {
 #root {
   min-height: 100vh;
 }
+
+/* Micro-animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes pulse-soft {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-pulse-soft {
+  animation: pulse-soft 2s ease-in-out infinite;
+}