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}">

src/style/atoms/_site-title.scss

@@ -1,10 +1,10 @@
 .site-title {
     font-family: $font-serif;
 
-    strong {
+    & > strong {
         font-weight: 300;
     }
-    span {
+    & > span {
         position: relative;
         top: -4px;
         font-weight: 600;
@@ -63,12 +63,11 @@
             font-size: rem(96px);
         }
 
-        strong {
+        & > strong {
             color: $color-secondary;
         }
-
-        span {
-            display: block;
+        & > span {
+            // display: block;
             top: 0;
             margin: 10px 0;
             font-size: 0.3125em;