Fix Page transitions by using a hacky FOUC trick

Seems to work though!

src/components/atoms/ScrollingTitle.svelte

@@ -5,19 +5,32 @@
     export let tag: string
     export let label: string = undefined
     export let parallax: number = undefined
-    export let offset: number = 0
+    export let offsetStart: number = undefined
+    export let offsetEnd: number = undefined
     export let animate: boolean = true
 
     let scrollY: number
+    let innerWidth: number
+    let innerHeight: number
     let titleEl: HTMLElement
+    let isLarger: boolean
 
-    $: if (titleEl) {
-        const start = titleEl.offsetTop + offset
-        const end = titleEl.offsetTop + (titleEl.offsetHeight + offset) * 0.9
-        parallax = map(scrollY, start, end, 0, 1, true)
+    // Define default values
+    $: if (titleEl && !offsetStart && !offsetEnd) {
+        offsetStart = titleEl.offsetTop - innerHeight * 0.75
+        offsetEnd = titleEl.offsetTop + innerHeight * 0.25
     }
 
-    const classes = [
+    // Check if title is larger than viewport to translate it
+    $: isLarger = titleEl && titleEl.offsetWidth >= innerWidth
+
+    // Calculate the parallax value
+    $: if (titleEl) {
+        const toTranslate = 100 - innerWidth / titleEl.offsetWidth * 100
+        parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
+    }
+
+    $: classes = [
         'scrolling-title',
         'title-huge',
         $$props.class
@@ -38,20 +51,31 @@
     } : {}
 </script>
 
-<svelte:window bind:scrollY />
+<svelte:window
+    bind:scrollY
+    bind:innerWidth bind:innerHeight
+/>
 
 {#if tag === 'h1'}
     <h1 bind:this={titleEl}
         class={classes} aria-label={label}
-        style="--parallax-x: {parallax};"
+        style="--parallax-x: {parallax}%;"
         use:reveal={revealOptions}
     >
         <slot />
     </h1>
+{:else if tag === 'h2'}
+    <h2 bind:this={titleEl}
+        class={classes} aria-label={label}
+        style="--parallax-x: {parallax}%;"
+        use:reveal={revealOptions}
+    >
+        <slot />
+    </h2>
 {:else if tag === 'p'}
     <p bind:this={titleEl}
         class={classes} aria-label={label}
-        style="--parallax-x: {parallax};"
+        style="--parallax-x: {parallax}%;"
         use:reveal={revealOptions}
     >
         <slot />