1 files changed, 20 insertions, 7 deletions
diff --git a/src/lib/Layout/TextTransition.svelte b/src/lib/Layout/TextTransition.svelte
index 35cfe1ea..5f5bd036 100644
--- a/src/lib/Layout/TextTransition.svelte
+++ b/src/lib/Layout/TextTransition.svelte
@@ -1,24 +1,37 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { tweened } from 'svelte/motion';
   import { cubicOut } from 'svelte/easing';
 
-  export let text = '';
-  export let opacityTransitionDuration = 50;
-  export let blurTransitionDuration = opacityTransitionDuration;
-  export let easing = cubicOut;
+  /**
+   * @typedef {Object} Props
+   * @property {string} [text]
+   * @property {number} [opacityTransitionDuration]
+   * @property {any} [blurTransitionDuration]
+   * @property {any} [easing]
+   */
+
+  /** @type {Props} */
+  let {
+    text = '',
+    opacityTransitionDuration = 50,
+    blurTransitionDuration = opacityTransitionDuration,
+    easing = cubicOut
+  } = $props();
 
-  let previousValue = '';
+  let previousValue = $state('');
   let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
   let blur = tweened(0, { duration: blurTransitionDuration, easing });
 
-  $: {
+  run(() => {
     if (text !== previousValue)
       Promise.all([opacity.set(0), blur.set(10)]).then(() => {
         previousValue = text;
 
         Promise.all([opacity.set(1), blur.set(0)]);
       });
-  }
+  });
 </script>
 
 <span