feat: add animations

frontend/src/components/ai-elements/suggestion.tsx

@@ -5,7 +5,10 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 import { Icon } from "@radix-ui/react-select";
 import type { LucideIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import { Children, type ComponentProps } from "react";
+
+const STAGGER_DELAY_MS = 60;
+const STAGGER_DELAY_MS_OFFSET = 200;
 
 export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
 
@@ -16,7 +19,20 @@ export const Suggestions = ({
 }: SuggestionsProps) => (
   <ScrollArea className="overflow-x-auto whitespace-nowrap" {...props}>
     <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
-      {children}
+      {Children.map(children, (child, index) =>
+        child != null ? (
+          <span
+            className="animate-fade-in-up inline-block opacity-0"
+            style={{
+              animationDelay: `${STAGGER_DELAY_MS_OFFSET + index * STAGGER_DELAY_MS}ms`,
+            }}
+          >
+            {child}
+          </span>
+        ) : (
+          child
+        ),
+      )}
     </div>
     <ScrollBar className="hidden" orientation="horizontal" />
   </ScrollArea>

frontend/src/styles/globals.css

@@ -85,6 +85,17 @@
     }
   }
 
+  --animate-fade-in-up: fade-in-up 0.15s ease-in-out forwards;
+  @keyframes fade-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(1rem) scale(1.2);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
   --animate-bouncing: bouncing 0.5s infinite alternate;
   @keyframes bouncing {
     to {
@@ -104,6 +115,18 @@
       transform: scaleX(1);
     }
   }
+
+  --animate-suggestion-in: suggestion-in 0.2s ease-out forwards;
+  @keyframes suggestion-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-1.25rem);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
 
 @theme inline {
@@ -145,57 +168,42 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --animate-aurora:
-    aurora 8s ease-in-out infinite alternate;
+  --animate-aurora: aurora 8s ease-in-out infinite alternate;
   @keyframes aurora {
-  0% {
-    background-position:
-    0% 50%;
-    transform:
-    rotate(-5deg) scale(0.9);
+    0% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
     }
-  25% {
-    background-position:
-    50% 100%;
-    transform:
-    rotate(5deg) scale(1.1);
+    25% {
+      background-position: 50% 100%;
+      transform: rotate(5deg) scale(1.1);
     }
-  50% {
-    background-position:
-    100% 50%;
-    transform:
-    rotate(-3deg) scale(0.95);
+    50% {
+      background-position: 100% 50%;
+      transform: rotate(-3deg) scale(0.95);
     }
-  75% {
-    background-position:
-    50% 0%;
-    transform:
-    rotate(3deg) scale(1.05);
+    75% {
+      background-position: 50% 0%;
+      transform: rotate(3deg) scale(1.05);
     }
-  100% {
-    background-position:
-    0% 50%;
-    transform:
-    rotate(-5deg) scale(0.9);
+    100% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
     }
   }
-  --animate-shine:
-    shine var(--duration) infinite linear
-;
+  --animate-shine: shine var(--duration) infinite linear;
   @keyframes shine {
-  0% {
-    background-position:
-    0% 0%;
+    0% {
+      background-position: 0% 0%;
     }
-  50% {
-    background-position:
-    100% 100%;
+    50% {
+      background-position: 100% 100%;
     }
-  to {
-    background-position:
-    0% 0%;
+    to {
+      background-position: 0% 0%;
     }
-  }}
+  }
+}
 
 :root {
   --radius: 0.625rem;
@@ -297,4 +305,4 @@
   --container-width-sm: calc(var(--spacing) * 144);
   --container-width-md: calc(var(--spacing) * 204);
   --container-width-lg: calc(var(--spacing) * 256);
-}
+}