Create a component for scrolling huge titles

src/routes/index.svelte

@@ -3,8 +3,10 @@
     import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
+    import SplitText from '$components/SplitText.svelte'
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
+    import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
     import DiscoverText from '$components/atoms/DiscoverText.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
@@ -17,8 +19,13 @@
 
     const { settings, locations }: any = getContext('global')
     const { path } = $page
+
+    let scrollY: number, innerHeight: number
+    let introTitleParallax = 0
 </script>
 
+<svelte:window bind:scrollY bind:innerHeight />
+
 <Metas
     title="Houses Of"
     description=""
@@ -27,15 +34,19 @@
 
 <main class="homepage">
     <section class="homepage__intro">
-        <h1 style="display: none;">Houses Of The World</h1>
-        <p class="homepage__title--houses title-huge">Houses</p>
-        <p class="homepage__description text-medium">
-            {settings.description}
-        </p>
+        <ScrollingTitle tag="h1" class="homepage__title--houses" label="Houses of the World" parallax={introTitleParallax} offsetTop={100}>
+            <SplitText text="Houses" mode="chars" />
+        </ScrollingTitle>
 
-        <Button text="Explore locations" url="{path}#locations">
-            <IconEarth animate={true} />
-        </Button>
+        <div class="homepage__headline">
+            <p class="text-medium">
+                {settings.description}
+            </p>
+
+            <Button text="Explore locations" url="{path}#locations">
+                <IconEarth animate={true} />
+            </Button>
+        </div>
     </section>
 
     <section class="homepage__photos">
@@ -79,7 +90,10 @@
 
     <section class="homepage__locations" id="locations">
         <InteractiveGlobe />
-        <p class="homepage__title--world title-huge">World</p>
+
+        <ScrollingTitle tag="p" class="homepage__title--world" parallax={introTitleParallax} offset={-1 * innerHeight / 2}>
+            <SplitText text="World" mode="chars" />
+        </ScrollingTitle>
 
         <Locations {locations} />
     </section>