🚧 Switch to monorepo with Turbo

apps/website/src/components/atoms/SiteTitle.svelte

@@ -0,0 +1,37 @@
+<style lang="scss">
+    @import "../../style/atoms/site-title";
+</style>
+
+<script lang="ts">
+    import SplitText from '$components/SplitText.svelte'
+    import reveal from '$animations/reveal'
+    import { DURATION } from '$utils/constants'
+
+    export let variant: string = 'lines'
+    export let tag: string = 'h1'
+</script>
+
+{#if tag === 'h1'}
+    <h1 class="site-title site-title--{variant}"
+        use:reveal={{
+            children: '.char',
+            animation: { y: ['105%', 0] },
+            options: {
+                stagger: 0.04,
+                duration: 1,
+                delay: DURATION.PAGE_IN / 1000,
+                threshold: 0,
+            },
+        }}
+    >
+        <SplitText text="Houses" mode="chars" class="pink mask" />
+        <SplitText text="Of The" mode="chars" class="middle mask" />
+        <SplitText text="World" mode="chars" class="pink mask" />
+    </h1>
+{:else}
+    <div class="site-title site-title--{variant}">
+        <span class="word-1">Houses</span>
+        <span class="middle word-2">Of The</span>
+        <span class="word-3">World</span>
+    </div>
+{/if}