Update GradualSpacing.svelte

src/lib/magicui/text-animations/GradualSpacing/GradualSpacing.svelte

@@ -1,42 +1,42 @@
 <script lang="ts">
-  import { cn } from "$lib/utils";
-  import { AnimatePresence, Motion } from "svelte-motion";
+    import { cn } from "$lib/utils";
+    import { AnimatePresence, Motion } from "svelte-motion";
 
-  let className: any = "Gradual Spacing";
-  export { className as class };
+    // default prop values can be changed by passing a different value to component instance
+    let {
+        words = "Gradual Spacing",
+        duration = 0.5,
+        delayMultiple = 0.04,
+        framerProps = {hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0 },},
+        modifications
+    } = $props()
 
-  export let words = "Gradual Spacing";
-  export let duration = 0.5;
-  export let delayMultiple = 0.04;
-  export let framerProps = {
-    hidden: { opacity: 0, x: -20 },
-    visible: { opacity: 1, x: 0 },
-  };
-  let wordsspilit = words.split("");
+    // split words by space
+    let splitWords = words.split("");
 </script>
 
-<div class="flex justify-center space-x-1">
-  <AnimatePresence let:item list={[{ key: wordsspilit }]}>
-    {#each wordsspilit as char, i}
-      <Motion
-        initial="hidden"
-        animate="visible"
-        exit="hidden"
-        variants={framerProps}
-        transition={{
+<div class="flex justify-start space-x-1 {modifications}">
+    <AnimatePresence let:item list={[{ key: splitWords }]}>
+        {#each splitWords as char, i}
+            <Motion
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    variants={framerProps}
+                    transition={{
           duration: duration,
           delay: i * delayMultiple,
         }}
-        let:motion
-      >
-        <span use:motion class={cn("drop-shadow-sm", className)}>
+                    let:motion
+            >
+        <span use:motion class={cn("drop-shadow-sm", modifications)}>
           {#if char === " "}
             <span>&nbsp;</span>
           {:else}
             {char}
           {/if}
         </span>
-      </Motion>
-    {/each}
-  </AnimatePresence>
+            </Motion>
+        {/each}
+    </AnimatePresence>
 </div>