Create a component for scrolling huge titles

src/components/SplitText.svelte

@@ -35,4 +35,11 @@
             {/each}
         </span>
     {/if}
+
+{:else}
+    <span class={classes}>
+        {#each split as char, i}
+            <span class="char" style="--i-c: {i};">{char}</span>
+        {/each}
+    </span>
 {/if}

src/components/atoms/ScrollingTitle.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { map } from '$utils/functions'
+
+    export let tag: string
+    export let label: string = undefined
+    export let parallax: number = undefined
+    export let offset: number = 0
+
+    let scrollY: number
+    let titleEl: HTMLElement
+
+    $: if (titleEl) {
+        const start = titleEl.offsetTop + offset
+        const end = titleEl.offsetTop + (titleEl.offsetHeight + offset) * 0.9
+        parallax = map(scrollY, start, end, 0, 1, true)
+    }
+
+    const classes = [
+        'scrolling-title',
+        'title-huge',
+        $$props.class
+    ].join(' ').trim()
+</script>
+
+<svelte:window bind:scrollY />
+
+{#if tag === 'h1'}
+    <h1 class={classes} aria-label={label}
+        bind:this={titleEl}
+        style="--parallax-x: {parallax};"
+    >
+        <slot />
+    </h1>
+{:else if tag === 'p'}
+    <p class={classes} aria-label={label}
+        bind:this={titleEl}
+        style="--parallax-x: {parallax};"
+    >
+        <slot />
+    </p>
+{/if}