diff --git a/src/components/Scroller/Scroller.mdx b/src/components/Scroller/Scroller.mdx
index 31c9de51..74b03d34 100644
--- a/src/components/Scroller/Scroller.mdx
+++ b/src/components/Scroller/Scroller.mdx
@@ -6,9 +6,9 @@ import * as ScrollerStories from './Scroller.stories.svelte';
 
 # Scroller
 
-The `Scroller` component creates a basic scrollytelling graphic with layout options.
+The `Scroller` component creates a basic scrollytelling graphic with layout options 
 
-> This component is designed to handle most common layouts for scrollytelling. To make something more complex, customise [ScrollerBase](https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Scroller/ScrollerBase/index.svelte), which is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
+This component is designed to handle most common layouts for scrollytelling. To make something more complex, customise [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs), which is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
 
 [Demo](?path=/story/components-graphics-scroller--demo)
 
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 777cef59..c9519cfb 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -1,6 +1,6 @@
 <!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
 <script lang="ts">
-  import ScrollerBase from './ScrollerBase/index.svelte';
+  import ScrollerBase from '../ScrollerBase/ScrollerBase.svelte';
   import Background from './Background.svelte';
   import Foreground from './Foreground.svelte';
   import Embedded from './Embedded/index.svelte';
diff --git a/src/components/SvelteScroller/SvelteScroller.mdx b/src/components/ScrollerBase/ScrollerBase.mdx
similarity index 60%
rename from src/components/SvelteScroller/SvelteScroller.mdx
rename to src/components/ScrollerBase/ScrollerBase.mdx
index 8dd2686c..4adc490f 100644
--- a/src/components/SvelteScroller/SvelteScroller.mdx
+++ b/src/components/ScrollerBase/ScrollerBase.mdx
@@ -1,31 +1,29 @@
 import { Meta } from '@storybook/blocks';
 
-import * as SvelteScrollerStories from './SvelteScroller.stories.svelte';
+import * as ScrollerBaseStories from './ScrollerBase.stories.svelte';
 
-<Meta of={SvelteScrollerStories} />
+<Meta of={ScrollerBaseStories} />
 
-# SvelteScroller
+# ScrollerBase
 
-The `SvelteScroller` component is the base Scroller component that powers the [`Scroller` component](?path=/story/components-graphics-scroller--docs). It is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
+The `ScrollerBase` component powers the [`Scroller` component](?path=/story/components-graphics-scroller--docs), which creates a basic storytelling graphic with preset layout options.  The `ScrollerBase` component contains the bare minimum code necessary for a scrollytelling section, and allows for customisation beyond what the [`Scroller` component](?path=/story/components-graphics-scroller--docs) allows.
 
-This component allows for customisation that the [`Scroller` component](?path=/story/components-graphics-scroller--docs) can't handle.
-
-> **Important❗:** Make sure each foreground step's container is a div with the class `step-foreground-container`. If you're modifying the class, pass the appropriate selector to the `query` prop.
+`ScrollerBase` is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
 
 
-[Demo](?path=/story/components-graphics-sveltescroller--demo)
+[Demo](?path=/story/components-graphics-scrollerbase--demo)
 
 ```svelte
 <!-- App.svelte -->
 <script>
-  import { SvelteScroller } from '@reuters-graphics/graphics-components';
+  import { ScrollerBase } from '@reuters-graphics/graphics-components';
 
   // Optional: Bind your own `index`, `progress`, and other bindable variables to use them in your code.
   let myIndex = $state(0);
   let myProgress = $state(0);
 </script>
 
- <SvelteScroller
+ <ScrollerBase
     bind:index={myIndex}
     bind:progress={myProgress}
     query="div.step-foreground-container"
@@ -51,9 +49,11 @@ This component allows for customisation that the [`Scroller` component](?path=/s
         <p>Index {myIndex}: This is the third section.</p>
       </div>
     {/snippet}
-  </SvelteScroller>
+  </ScrollerBase>
 ```
 
+> **Important❗:** Make sure the HTML element containing each foreground is a div with the class `step-foreground-container`. If you're modifying this to something else, pass the appropriate selector to the `query` prop.
+
 To add your own styling, you can write styles in a global SCSS stylesheet:
 
 ```scss
diff --git a/src/components/SvelteScroller/SvelteScroller.stories.svelte b/src/components/ScrollerBase/ScrollerBase.stories.svelte
similarity index 88%
rename from src/components/SvelteScroller/SvelteScroller.stories.svelte
rename to src/components/ScrollerBase/ScrollerBase.stories.svelte
index 30660c3f..28beac95 100644
--- a/src/components/SvelteScroller/SvelteScroller.stories.svelte
+++ b/src/components/ScrollerBase/ScrollerBase.stories.svelte
@@ -1,10 +1,10 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SvelteScroller from './SvelteScroller.svelte';
+  import ScrollerBase from './ScrollerBase.svelte';
 
   const { Story } = defineMeta({
-    title: 'Components/Graphics/SvelteScroller',
-    component: SvelteScroller,
+    title: 'Components/Graphics/ScrollerBase',
+    component: ScrollerBase,
   });
 </script>
 
@@ -14,7 +14,7 @@
 </script>
 
 <Story name="Demo">
-  <SvelteScroller
+  <ScrollerBase
     bind:index={myIndex}
     bind:progress={myProgress}
     query="div.step-foreground-container"
@@ -38,7 +38,7 @@
         <p>Index {myIndex}: This is the third section.</p>
       </div>
     {/snippet}
-  </SvelteScroller>
+  </ScrollerBase>
 </Story>
 
 <style lang="scss">
diff --git a/src/components/Scroller/ScrollerBase/index.svelte b/src/components/ScrollerBase/ScrollerBase.svelte
similarity index 100%
rename from src/components/Scroller/ScrollerBase/index.svelte
rename to src/components/ScrollerBase/ScrollerBase.svelte
diff --git a/src/components/SvelteScroller/SvelteScroller.svelte b/src/components/SvelteScroller/SvelteScroller.svelte
deleted file mode 100644
index 21c2d9f9..00000000
--- a/src/components/SvelteScroller/SvelteScroller.svelte
+++ /dev/null
@@ -1,270 +0,0 @@
-<!-- This is a Svelte 5 version of [svelte-scroller](https://github.com/sveltejs/svelte-scroller) -->
-<script module lang="ts">
-  const handlers: Array<() => void> = [];
-
-  interface ManagerParams {
-    outer: Element;
-    update: () => void;
-  }
-
-  let manager: {
-    add: (params: ManagerParams) => void;
-    remove: (params: ManagerParams) => void;
-  };
-
-  if (typeof window !== 'undefined') {
-    const run_all = () => handlers.forEach((fn) => fn());
-
-    window.addEventListener('scroll', run_all);
-    window.addEventListener('resize', run_all);
-  }
-
-  if (typeof IntersectionObserver !== 'undefined') {
-    const map = new Map();
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const update = map.get(entry.target);
-          const index = handlers.indexOf(update);
-
-          if (entry.isIntersecting) {
-            if (index === -1) handlers.push(update);
-          } else {
-            update();
-            if (index !== -1) handlers.splice(index, 1);
-          }
-        });
-      },
-      {
-        rootMargin: '400px 0px', // TODO why 400?
-      }
-    );
-
-    manager = {
-      add: ({ outer, update }) => {
-        const { top, bottom } = outer.getBoundingClientRect();
-
-        if (top < window.innerHeight && bottom > 0) handlers.push(update);
-
-        map.set(outer, update);
-        observer.observe(outer);
-      },
-
-      remove: ({ outer, update }) => {
-        const index = handlers.indexOf(update);
-        if (index !== -1) handlers.splice(index, 1);
-
-        map.delete(outer);
-        observer.unobserve(outer);
-      },
-    };
-  } else {
-    manager = {
-      add: ({ update }) => {
-        handlers.push(update);
-      },
-
-      remove: ({ update }) => {
-        const index = handlers.indexOf(update);
-        if (index !== -1) handlers.splice(index, 1);
-      },
-    };
-  }
-</script>
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { type Snippet } from 'svelte';
-
-  interface Props {
-    /** Config */
-    /** The vertical position that the top of the foreground must scroll past before the background becomes fixed, as a proportion of window height. **Value between 0 and 1.** */
-    top?: number;
-    /** The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed. **Value between 0 and 1.** */
-    bottom?: number;
-    /** Once a section crosses this point, it becomes 'active'. **Value between 0 and 1.** */
-    threshold?: number;
-    /** A CSS selector that describes the individual sections of your foreground. */
-    query?: string;
-    /** If `true`, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly. */
-    parallax?: boolean;
-    /** The background snippet. */
-    backgroundSnippet: Snippet;
-    /** The foreground snippet. */
-    foregroundSnippet: Snippet;
-    /** Bindings */
-    /** The currently active section. **Bindable** */
-    index?: number;
-    /**  How far the section has scrolled past the threshold, as a value between 0 and 1. **Bindable**. */
-    offset?: number;
-    /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom. **Bindable**. */
-    progress?: number;
-    /** Number of sections */
-    count?: number;
-    /** Whether the foreground is visible */
-    visible?: boolean;
-  }
-
-  let {
-    // Bindings
-    index = $bindable(0),
-    count = $bindable(0),
-    offset = $bindable(0),
-    progress = $bindable(0),
-    visible = $bindable(false),
-    // Config
-    top = 0,
-    bottom = 1,
-    threshold = 0.5,
-    query = 'div.step-foreground-container',
-    parallax = false,
-    backgroundSnippet,
-    foregroundSnippet,
-  }: Props = $props();
-
-  let outer: HTMLElement;
-  let foreground: HTMLElement;
-  let background: HTMLElement;
-  let left;
-  // Target compiler option to es6 or higher for NodeListOf<T> to be iterable.
-  let sections: ReturnType<typeof document.querySelectorAll> | undefined =
-    $state();
-  let wh = $state(0);
-  let fixed = $state(false);
-  let offset_top = 0;
-  let width = 1;
-
-  let top_px = $derived(Math.round(top * wh));
-  let bottom_px = $derived(Math.round(bottom * wh));
-  let threshold_px = $derived(Math.round(threshold * wh));
-
-  let style = $derived(`
-		position: ${fixed ? 'fixed' : 'absolute'};
-		transform: translate(0, ${offset_top}px);
-	`);
-
-  let widthStyle = $derived(fixed ? `width:${width}px;` : '');
-
-  onMount(() => {
-    sections = foreground.querySelectorAll(query);
-    count = sections.length;
-
-    update();
-
-    const scroller = { outer, update };
-
-    manager.add(scroller);
-    return () => manager.remove(scroller);
-  });
-
-  function update() {
-    if (!foreground) return;
-
-    // re-measure outer container
-    const bcr = outer.getBoundingClientRect();
-    left = bcr.left;
-    width = bcr.right - left;
-
-    // determine fix state
-    const fg = foreground.getBoundingClientRect();
-    const bg = background.getBoundingClientRect();
-
-    visible = fg.top < wh && fg.bottom > 0;
-
-    const foreground_height = fg.bottom - fg.top;
-    const background_height = bg.bottom - bg.top;
-
-    const available_space = bottom_px - top_px;
-    progress = (top_px - fg.top) / (foreground_height - available_space);
-
-    if (progress <= 0) {
-      offset_top = 0;
-      fixed = false;
-    } else if (progress >= 1) {
-      offset_top =
-        parallax ?
-          foreground_height - background_height
-        : foreground_height - available_space;
-      fixed = false;
-    } else {
-      offset_top =
-        parallax ?
-          Math.round(top_px - progress * (background_height - available_space))
-        : top_px;
-      fixed = true;
-    }
-
-    for (let i = 0; i < sections!.length; i++) {
-      const section = sections![i];
-      const { top } = section.getBoundingClientRect();
-
-      const next = sections![i + 1];
-      const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
-
-      offset = (threshold_px - top) / (bottom - top);
-      if (bottom >= threshold_px) {
-        index = i;
-        break;
-      }
-    }
-  }
-</script>
-
-<svelte:window bind:innerHeight={wh} />
-
-<svelte-scroller-outer bind:this={outer}>
-  <svelte-scroller-background-container
-    class="background-container"
-    style="{style}{widthStyle}"
-  >
-    <svelte-scroller-background bind:this={background}>
-      {@render backgroundSnippet()}
-    </svelte-scroller-background>
-  </svelte-scroller-background-container>
-
-  <svelte-scroller-foreground bind:this={foreground}>
-    {@render foregroundSnippet()}
-  </svelte-scroller-foreground>
-</svelte-scroller-outer>
-
-<style lang="scss">
-  svelte-scroller-outer {
-    display: block;
-    position: relative;
-  }
-
-  svelte-scroller-background {
-    display: block;
-    position: relative;
-    width: 100%;
-  }
-
-  svelte-scroller-foreground {
-    display: block;
-    position: relative;
-    z-index: 2;
-  }
-
-  svelte-scroller-foreground::after {
-    content: ' ';
-    display: block;
-    clear: both;
-  }
-
-  svelte-scroller-background-container {
-    display: block;
-    position: absolute;
-    width: 100%;
-    max-width: 100%;
-    pointer-events: none;
-    z-index: 1;
-    top: 0;
-
-    /* in theory this helps prevent jumping */
-    will-change: transform;
-    /* -webkit-transform: translate3d(0, 0, 0);
-		-moz-transform: translate3d(0, 0, 0);
-		transform: translate3d(0, 0, 0); */
-  }
-</style>
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/ai-foreground.svelte b/src/components/SvelteScroller/demo/components/ai2svelte/ai-foreground.svelte
deleted file mode 100644
index 6af40a5d..00000000
--- a/src/components/SvelteScroller/demo/components/ai2svelte/ai-foreground.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-  // Hard-coding for demo purposes only...
-  import stepXs from './images/Body-issues-key-xs.png';
-  let width = $state();
-</script>
-
-<div id="g-Body-issues-key-box" bind:clientWidth={width}>
-  <!-- Artboard: xs -->
-  {#if width && width >= 0}
-    <div id="g-Body-issues-key-xs" class="g-artboard" style="">
-      <div style="padding: 0 0 48.4848% 0;"></div>
-      <div
-        id="g-Body-issues-key-xs-img"
-        class="g-aiImg"
-        style="background-image: url({stepXs});"
-      ></div>
-      <div
-        id="g-ai0-1"
-        class="g-Layer_1 g-aiAbs g-aiPointText"
-        style="top:19.4775%;margin-top:-10.2px;left:8.1818%;width:276px;"
-      >
-        <p class="g-pstyle0">Likelihood of something happening</p>
-      </div>
-
-      <div
-        id="g-ai0-3"
-        class="g-Layer_1 g-aiAbs g-aiPointText"
-        style="top:55.1025%;margin-top:-10.2px;left:27.2727%;width:68px;"
-      >
-        <p class="g-pstyle1">0-25%</p>
-      </div>
-      <div
-        id="g-ai0-4"
-        class="g-Layer_1 g-aiAbs g-aiPointText"
-        style="top:55.1025%;margin-top:-10.2px;left:74.2424%;width:75px;"
-      >
-        <p class="g-pstyle1">50-75%</p>
-      </div>
-      <div
-        id="g-ai0-5"
-        class="g-Layer_1 g-aiAbs g-aiPointText"
-        style="top:79.4775%;margin-top:-10.2px;left:74.2424%;width:82px;"
-      >
-        <p class="g-pstyle1">75-100%</p>
-      </div>
-      <div
-        id="g-ai0-6"
-        class="g-Layer_1 g-aiAbs g-aiPointText"
-        style="top:83.2275%;margin-top:-10.2px;left:27.2727%;width:77px;"
-      >
-        <p class="g-pstyle1">25-50%</p>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<!-- End ai2html - 2025-03-17 09:52 -->
-
-<!-- Generated by ai2html v0.100.0 - 2025-03-17 09:52 -->
-<!-- ai file: Body-issues-key.ai -->
-<style lang="scss">
-  #g-Body-issues-key-box,
-  #g-Body-issues-key-box .g-artboard {
-    margin: 0 auto;
-  }
-  #g-Body-issues-key-box p {
-    margin: 0;
-  }
-  #g-Body-issues-key-box .g-aiAbs {
-    position: absolute;
-  }
-  #g-Body-issues-key-box .g-aiImg {
-    position: absolute;
-    top: 0;
-    display: block;
-    width: 100% !important;
-    height: 100%;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  #g-Body-issues-key-box .g-aiPointText p {
-    white-space: nowrap;
-  }
-  #g-Body-issues-key-xs {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-Body-issues-key-xs p {
-    font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
-    font-weight: 500;
-    line-height: 19px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(64, 64, 64);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-Body-issues-key-xs .g-pstyle0 {
-    height: 19px;
-  }
-  #g-Body-issues-key-xs .g-pstyle1 {
-    font-weight: 400;
-    height: 19px;
-  }
-</style>
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-1.svelte b/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-1.svelte
deleted file mode 100644
index df60d003..00000000
--- a/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-1.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-  // Hard-coding for demo purposes only...
-  import stepXl from './images/step-1-xl.png';
-  import stepLg from './images/step-1-lg.png';
-  import stepMd from './images/step-1-md.png';
-  import stepSm from './images/step-1-sm.png';
-  import stepXs from './images/step-1-xs.png';
-  let width = $state<number>();
-</script>
-
-<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:21 -->
-
-<div id="g-step-1-box" bind:clientWidth={width}>
-  <!-- Artboard: XL -->
-  {#if width && width >= 1200}
-    <div id="g-step-1-xl" class="g-artboard" style="">
-      <div style="padding: 0 0 50% 0;"></div>
-      <div
-        id="g-step-1-xl-img"
-        class="g-aiImg"
-        style="background-image: url({stepXl});"
-      ></div>
-    </div>
-  {/if}
-  <!-- Artboard: LG -->
-  {#if width && width >= 930 && width < 1200}
-    <div id="g-step-1-lg" class="g-artboard" style="">
-      <div style="padding: 0 0 55.3763% 0;"></div>
-      <div
-        id="g-step-1-lg-img"
-        class="g-aiImg"
-        style="background-image: url({stepLg});"
-      ></div>
-    </div>
-  {/if}
-  <!-- Artboard: MD -->
-  {#if width && width >= 660 && width < 930}
-    <div id="g-step-1-md" class="g-artboard" style="">
-      <div style="padding: 0 0 55.7576% 0;"></div>
-      <div
-        id="g-step-1-md-img"
-        class="g-aiImg"
-        style="background-image: url({stepMd});"
-      ></div>
-    </div>
-  {/if}
-  <!-- Artboard: SM -->
-  {#if width && width >= 510 && width < 660}
-    <div id="g-step-1-sm" class="g-artboard" style="">
-      <div style="padding: 0 0 49.6078% 0;"></div>
-      <div
-        id="g-step-1-sm-img"
-        class="g-aiImg"
-        style="background-image: url({stepSm});"
-      ></div>
-    </div>
-  {/if}
-  <!-- Artboard: XS -->
-  {#if width && width >= 0 && width < 510}
-    <div id="g-step-1-xs" class="g-artboard" style="">
-      <div style="padding: 0 0 55.4545% 0;"></div>
-      <div
-        id="g-step-1-xs-img"
-        class="g-aiImg"
-        style="background-image: url({stepXs});"
-      ></div>
-    </div>
-  {/if}
-</div>
-
-<!-- End ai2html - 2021-09-30 14:21 -->
-
-<!-- ai file: step-1.ai -->
-
-<!-- svelte-ignore css_unused_selector -->
-<style lang="scss">
-  #g-step-1-box,
-  #g-step-1-box .g-artboard {
-    margin: 0 auto;
-  }
-  #g-step-1-box p {
-    margin: 0;
-  }
-  #g-step-1-box .g-aiAbs {
-    position: absolute;
-  }
-  #g-step-1-box .g-aiImg {
-    position: absolute;
-    top: 0;
-    display: block;
-    width: 100% !important;
-    height: 100%;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  #g-step-1-box .g-aiPointText p {
-    white-space: nowrap;
-  }
-  #g-step-1-xl {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-1-lg {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-1-md {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-1-sm {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-1-xs {
-    position: relative;
-    overflow: hidden;
-  }
-
-  /* Custom CSS */
-</style>
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-2.svelte b/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-2.svelte
deleted file mode 100644
index 18a5870f..00000000
--- a/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-2.svelte
+++ /dev/null
@@ -1,310 +0,0 @@
-<script lang="ts">
-  // Hard-coding for demo purposes only...
-  // @ts-ignore img
-  import stepXl from './images/step-2-xl.png';
-  // @ts-ignore img
-  import stepLg from './images/step-2-lg.png';
-  // @ts-ignore img
-  import stepMd from './images/step-2-md.png';
-  // @ts-ignore img
-  import stepSm from './images/step-2-sm.png';
-  // @ts-ignore img
-  import stepXs from './images/step-2-xs.png';
-  let width = $state<null | number>(null);
-</script>
-
-<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->
-
-<div id="g-step-2-box" bind:clientWidth={width}>
-  <!-- Artboard: XL -->
-  {#if width && width >= 1200}
-    <div id="g-step-2-xl" class="g-artboard" style="">
-      <div style="padding: 0 0 50% 0;"></div>
-      <div
-        id="g-step-2-xl-img"
-        class="g-aiImg"
-        style="background-image: url({stepXl});"
-      ></div>
-      <div
-        id="g-ai0-1"
-        class="g-annotation g-aiAbs g-aiPointText"
-        style="top:26.183%;margin-top:-21.1px;left:55.6774%;width:180px;"
-      >
-        <p class="g-pstyle0">This thing here is</p>
-        <p class="g-pstyle0">particularly important</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: LG -->
-  {#if width && width >= 930 && width < 1200}
-    <div id="g-step-2-lg" class="g-artboard" style="">
-      <div style="padding: 0 0 55.3763% 0;"></div>
-      <div
-        id="g-step-2-lg-img"
-        class="g-aiImg"
-        style="background-image: url({stepLg});"
-      ></div>
-      <div
-        id="g-ai1-1"
-        class="g-annotation g-aiAbs g-aiPointText"
-        style="top:25.8206%;margin-top:-21px;left:56.2692%;width:162px;"
-      >
-        <p class="g-pstyle0">This thing here is</p>
-        <p class="g-pstyle0">particularly important</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: MD -->
-  {#if width && width >= 660 && width < 930}
-    <div id="g-step-2-md" class="g-artboard" style="">
-      <div style="padding: 0 0 55.7576% 0;"></div>
-      <div
-        id="g-step-2-md-img"
-        class="g-aiImg"
-        style="background-image: url({stepMd});"
-      ></div>
-      <div
-        id="g-ai2-1"
-        class="g-annotation g-aiAbs g-aiPointText"
-        style="top:47.5478%;margin-top:-21px;left:32.4915%;width:162px;"
-      >
-        <p class="g-pstyle0">This thing here is</p>
-        <p class="g-pstyle0">particularly important</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: SM -->
-  {#if width && width >= 510 && width < 660}
-    <div id="g-step-2-sm" class="g-artboard" style="">
-      <div style="padding: 0 0 49.6078% 0;"></div>
-      <div
-        id="g-step-2-sm-img"
-        class="g-aiImg"
-        style="background-image: url({stepSm});"
-      ></div>
-      <div
-        id="g-ai3-1"
-        class="g-annotation g-aiAbs g-aiPointText"
-        style="top:55.3265%;margin-top:-21px;left:30.7585%;width:162px;"
-      >
-        <p class="g-pstyle0">This thing here is</p>
-        <p class="g-pstyle0">particularly important</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: XS -->
-  {#if width && width >= 0 && width < 510}
-    <div id="g-step-2-xs" class="g-artboard" style="">
-      <div style="padding: 0 0 55.4545% 0;"></div>
-      <div
-        id="g-step-2-xs-img"
-        class="g-aiImg"
-        style="background-image: url({stepXs});"
-      ></div>
-      <div
-        id="g-ai4-1"
-        class="g-annotation g-aiAbs g-aiPointText"
-        style="top:22.3913%;margin-top:-21px;left:52.5519%;width:162px;"
-      >
-        <p class="g-pstyle0">This thing here is</p>
-        <p class="g-pstyle0">particularly important</p>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<!-- End ai2html - 2021-09-30 14:20 -->
-
-<!-- ai file: step-2.ai -->
-
-<style lang="scss">
-  #g-step-2-box,
-  #g-step-2-box .g-artboard {
-    margin: 0 auto;
-  }
-  #g-step-2-box p {
-    margin: 0;
-  }
-  #g-step-2-box .g-aiAbs {
-    position: absolute;
-  }
-  #g-step-2-box .g-aiImg {
-    position: absolute;
-    top: 0;
-    display: block;
-    width: 100% !important;
-    height: 100%;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  #g-step-2-box .g-aiPointText p {
-    white-space: nowrap;
-  }
-  #g-step-2-xl {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-2-xl p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 18px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-2-xl .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-2-lg {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-2-lg p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-2-lg .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-2-md {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-2-md p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-2-md .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-2-sm {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-2-sm p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-2-sm .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-2-xs {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-2-xs p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-2-xs .g-pstyle0 {
-    height: 20px;
-  }
-
-  /* Custom CSS */
-</style>
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-3.svelte b/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-3.svelte
deleted file mode 100644
index 33538e06..00000000
--- a/src/components/SvelteScroller/demo/components/ai2svelte/ai-scroller-3.svelte
+++ /dev/null
@@ -1,310 +0,0 @@
-<script lang="ts">
-  // Hard-coding for demo purposes only...
-  // @ts-ignore img
-  import stepXl from './images/step-3-xl.png';
-  // @ts-ignore img
-  import stepLg from './images/step-3-lg.png';
-  // @ts-ignore img
-  import stepMd from './images/step-3-md.png';
-  // @ts-ignore img
-  import stepSm from './images/step-3-sm.png';
-  // @ts-ignore img
-  import stepXs from './images/step-3-xs.png';
-  let width = $state<null | number>(null);
-</script>
-
-<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->
-
-<div id="g-step-3-box" bind:clientWidth={width}>
-  <!-- Artboard: XL -->
-  {#if width && width >= 1200}
-    <div id="g-step-3-xl" class="g-artboard" style="">
-      <div style="padding: 0 0 50% 0;"></div>
-      <div
-        id="g-step-3-xl-img"
-        class="g-aiImg"
-        style="background-image: url({stepXl});"
-      ></div>
-      <div
-        id="g-ai0-1"
-        class="g-step-3 g-aiAbs g-aiPointText"
-        style="top:19.683%;margin-top:-21.1px;left:54.3441%;width:130px;"
-      >
-        <p class="g-pstyle0">Something</p>
-        <p class="g-pstyle0">happened here</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: LG -->
-  {#if width && width >= 930 && width < 1200}
-    <div id="g-step-3-lg" class="g-artboard" style="">
-      <div style="padding: 0 0 55.3763% 0;"></div>
-      <div
-        id="g-step-3-lg-img"
-        class="g-aiImg"
-        style="background-image: url({stepLg});"
-      ></div>
-      <div
-        id="g-ai1-1"
-        class="g-step-3 g-aiAbs g-aiPointText"
-        style="top:27.5682%;margin-top:-21px;left:54.9127%;width:118px;"
-      >
-        <p class="g-pstyle0">Something</p>
-        <p class="g-pstyle0">happened here</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: MD -->
-  {#if width && width >= 660 && width < 930}
-    <div id="g-step-3-md" class="g-artboard" style="">
-      <div style="padding: 0 0 55.7576% 0;"></div>
-      <div
-        id="g-step-3-md-img"
-        class="g-aiImg"
-        style="background-image: url({stepMd});"
-      ></div>
-      <div
-        id="g-ai2-1"
-        class="g-step-3 g-aiAbs g-aiPointText"
-        style="top:23.3631%;margin-top:-21px;left:50.4963%;width:118px;"
-      >
-        <p class="g-pstyle0">Something</p>
-        <p class="g-pstyle0">happened here</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: SM -->
-  {#if width && width >= 510 && width < 660}
-    <div id="g-step-3-sm" class="g-artboard" style="">
-      <div style="padding: 0 0 49.6078% 0;"></div>
-      <div
-        id="g-step-3-sm-img"
-        class="g-aiImg"
-        style="background-image: url({stepSm});"
-      ></div>
-      <div
-        id="g-ai3-1"
-        class="g-step-3 g-aiAbs g-aiPointText"
-        style="top:20.1486%;margin-top:-21px;left:55.7925%;width:118px;"
-      >
-        <p class="g-pstyle0">Something</p>
-        <p class="g-pstyle0">happened here</p>
-      </div>
-    </div>
-  {/if}
-  <!-- Artboard: XS -->
-  {#if width && width >= 0 && width < 510}
-    <div id="g-step-3-xs" class="g-artboard" style="">
-      <div style="padding: 0 0 55.4545% 0;"></div>
-      <div
-        id="g-step-3-xs-img"
-        class="g-aiImg"
-        style="background-image: url({stepXs});"
-      ></div>
-      <div
-        id="g-ai4-1"
-        class="g-step-3 g-aiAbs g-aiPointText"
-        style="top:42.0634%;margin-top:-21px;left:27.3523%;width:118px;"
-      >
-        <p class="g-pstyle0">Something</p>
-        <p class="g-pstyle0">happened here</p>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<!-- End ai2html - 2021-09-30 14:28 -->
-
-<!-- ai file: step-3.ai -->
-
-<style lang="scss">
-  #g-step-3-box,
-  #g-step-3-box .g-artboard {
-    margin: 0 auto;
-  }
-  #g-step-3-box p {
-    margin: 0;
-  }
-  #g-step-3-box .g-aiAbs {
-    position: absolute;
-  }
-  #g-step-3-box .g-aiImg {
-    position: absolute;
-    top: 0;
-    display: block;
-    width: 100% !important;
-    height: 100%;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  #g-step-3-box .g-aiPointText p {
-    white-space: nowrap;
-  }
-  #g-step-3-xl {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-3-xl p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 18px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-3-xl .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-3-lg {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-3-lg p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-3-lg .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-3-md {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-3-md p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-3-md .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-3-sm {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-3-sm p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-3-sm .g-pstyle0 {
-    height: 20px;
-  }
-  #g-step-3-xs {
-    position: relative;
-    overflow: hidden;
-  }
-  #g-step-3-xs p {
-    font-family:
-      'Source Sans Pro',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-weight: 400;
-    line-height: 20px;
-    height: auto;
-    opacity: 1;
-    letter-spacing: 0em;
-    font-size: 16px;
-    text-align: left;
-    color: rgb(0, 0, 0);
-    text-transform: none;
-    padding-bottom: 0;
-    padding-top: 0;
-    mix-blend-mode: normal;
-    font-style: normal;
-    position: static;
-  }
-  #g-step-3-xs .g-pstyle0 {
-    height: 20px;
-  }
-
-  /* Custom CSS */
-</style>
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/Body-issues-key-xs.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/Body-issues-key-xs.png
deleted file mode 100644
index e03e5e19..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/Body-issues-key-xs.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-lg.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-lg.png
deleted file mode 100644
index de1888e1..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-lg.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-md.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-md.png
deleted file mode 100644
index ead091c1..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-md.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-sm.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-sm.png
deleted file mode 100644
index dada63ca..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-sm.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-xl.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-xl.png
deleted file mode 100644
index 55823fb4..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-xl.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-xs.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-xs.png
deleted file mode 100644
index 26e44491..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-1-xs.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-lg.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-lg.png
deleted file mode 100644
index 96196438..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-lg.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-md.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-md.png
deleted file mode 100644
index 37450dcb..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-md.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-sm.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-sm.png
deleted file mode 100644
index e2368628..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-sm.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-xl.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-xl.png
deleted file mode 100644
index fa157444..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-xl.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-xs.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-xs.png
deleted file mode 100644
index 0fef62ac..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-2-xs.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-lg.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-lg.png
deleted file mode 100644
index 9e4f0377..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-lg.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-md.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-md.png
deleted file mode 100644
index 91cfa1a1..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-md.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-sm.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-sm.png
deleted file mode 100644
index 876a388d..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-sm.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-xl.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-xl.png
deleted file mode 100644
index 03e47dde..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-xl.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-xs.png b/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-xs.png
deleted file mode 100644
index 26223ca8..00000000
Binary files a/src/components/SvelteScroller/demo/components/ai2svelte/images/step-3-xs.png and /dev/null differ
diff --git a/src/components/SvelteScroller/demo/components/basic/InteractiveForeground.svelte b/src/components/SvelteScroller/demo/components/basic/InteractiveForeground.svelte
deleted file mode 100644
index 769ec63b..00000000
--- a/src/components/SvelteScroller/demo/components/basic/InteractiveForeground.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-  interface Props {
-    count?: number;
-  }
-
-  let { count = $bindable(0) }: Props = $props();
-</script>
-
-<h4>Interactive step</h4>
-
-<p class="font-sans">The count is <strong>{count}</strong></p>
-
-<button
-  onclick={() => {
-    count += 1;
-  }}>Click Me</button
->
diff --git a/src/components/SvelteScroller/demo/components/basic/Step.svelte b/src/components/SvelteScroller/demo/components/basic/Step.svelte
deleted file mode 100644
index d914ec8a..00000000
--- a/src/components/SvelteScroller/demo/components/basic/Step.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-  interface Props {
-    colour?: string;
-  }
-
-  let { colour = 'lightblue' }: Props = $props();
-</script>
-
-<div class="step" style={`background: ${colour};`}></div>
-
-<style lang="scss">
-  .step {
-    width: 100vw;
-    max-width: 100%;
-    margin: 0 auto;
-    height: 400px;
-  }
-</style>
diff --git a/src/index.ts b/src/index.ts
index 67eb9f22..93f06e4f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -40,7 +40,7 @@ export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
-export { default as SvelteScroller } from './components/SvelteScroller/SvelteScroller.svelte';
+export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
 export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as Theme, themes } from './components/Theme/Theme.svelte';