update

src/app.css

@@ -84,7 +84,7 @@
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
     --animate-caret-blink: caret-blink 1s ease-in-out infinite;
-    --animate-text:
+    --animate-enter:
         fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both;
     --animate-scroll: scroll 60s linear infinite;
     --animate-fade-in: fade-in 0.5s ease-in-out both;

src/lib/components/animated/Text.svelte

@@ -8,7 +8,7 @@
 <span class="relative">
     {#each words as word, i}
         <span
-            class="animate-text mr-2 inline-block"
+            class="animate-enter mr-2 inline-block"
             style:animation-delay="{i * 75}ms
             ">{word}</span
         >

src/lib/components/appwrite-network/map-nav.svelte

@@ -42,7 +42,7 @@
             <Tabs.Trigger
                 {value}
                 class={classNames(
-                    'text-caption animate-text text-primary bg-smooth border-smooth flex h-8 items-center justify-center gap-2 rounded-full border font-medium outline-0 transition-colors',
+                    'text-caption animate-enter text-primary bg-smooth border-smooth flex h-8 items-center justify-center gap-2 rounded-full border font-medium outline-0 transition-colors',
                     'group data-[state="active"]:bg-accent/4 data-[state="active"]:border-accent/36 data-[state="active"]:text-white'
                 )}
                 style="animation-delay:{index * 75}ms;"

src/lib/components/appwrite-network/map.svelte

@@ -95,7 +95,7 @@
         use:mousePosition
     >
         <div
-            class="map animate-text relative w-full origin-bottom overflow-scroll transition-all [scrollbar-width:none]"
+            class="map animate-enter relative w-full origin-bottom overflow-scroll transition-all [scrollbar-width:none]"
             bind:clientWidth={width}
             bind:clientHeight={height}
         >

src/routes/the-appwrite-network/+page.svelte

@@ -46,7 +46,7 @@
     <div class="container mt-20 flex flex-col items-center">
         <a
             href="/"
-            class="bg-accent/4 animate-text group border-accent/36 text-primary relative -mb-8 flex items-center gap-2 rounded-full border px-4 py-1 text-sm"
+            class="bg-accent/4 animate-enter group border-accent/36 text-primary relative -mb-8 flex items-center gap-2 rounded-full border px-4 py-1 text-sm"
             style:animation-delay="250ms"
             >Read the announcement <Icon
                 name="arrow-right"
@@ -56,7 +56,7 @@
         <h1 class="text-display font-aeonik-pro mx-auto inline-block py-12 text-center">
             {#each heading.split(' ') as word, i}
                 <GradientText
-                    class="animate-text mr-2 inline-block"
+                    class="animate-enter mr-2 inline-block"
                     style="animation-delay:{i * 75}ms">{word}</GradientText
                 >
             {/each}