Reveal inline SiteTitle

src/components/atoms/SiteTitle.svelte

@@ -1,13 +1,34 @@
 <script lang="ts">
+    import SplitText from '$components/SplitText.svelte'
+    import { reveal, fly } from '$animations/index'
+
     export let variant: string = 'lines'
     export let tag: string = 'h1'
 </script>
 
 {#if tag === 'h1'}
-    <h1 class="site-title site-title--{variant}">
-        <strong>Houses</strong>
-        <span>Of The</span>
-        <strong>World</strong>
+    <h1 class="site-title site-title--{variant}"
+        use:reveal={{
+            animation: fly,
+            options: {
+                children: '.char',
+                stagger: 40,
+                duration: 1000,
+                from: '110%',
+                opacity: false,
+            },
+            threshold: 0,
+        }}
+    >
+        <strong class="mask">
+            <SplitText text="Houses" mode="chars" />
+        </strong>
+        <span class="mask">
+            <SplitText text="Of The" mode="chars" />
+        </span>
+        <strong class="mask">
+            <SplitText text="World" mode="chars" />
+        </strong>
     </h1>
 {:else}
     <div class="site-title site-title--{variant}">