diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index 5dfd180e..97075269 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -1,4 +1,4 @@
-import type { ComponentType } from 'svelte';
+import type { Component } from 'svelte';
 
 /**
  * Used for the list of <option> tags nested in a <select> input.
@@ -28,23 +28,31 @@ export type HeadlineSize = 'small' | 'normal' | 'big' | 'bigger' | 'biggest';
  * A step in the Scroller component.
  */
 export interface ScrollerStep {
-  altText?: string;
   /**
    * A background component
-   * @required
    */
-  background: ComponentType;
+  background: Component;
   /**
    * Optional props for background component
    */
   backgroundProps?: object;
   /**
-   * Foreground can either be a component or markdown-formatted string.
-   * @required
+   * A component or markdown-formatted string
    */
-  foreground: ComponentType | string;
+  foreground: Component | string;
   /**
    * Optional props for foreground component
    */
   foregroundProps?: object;
+  /**
+   * Optional alt text for the background, read aloud after the foregroud text. You can add it to each step or just to the first step to describe the entire scroller graphic.
+   */
+  altText?: string;
 }
+
+export type ForegroundPosition =
+  | 'middle'
+  | 'left'
+  | 'right'
+  | 'left opposite'
+  | 'right opposite';
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 67906ce6..434133cc 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -1,111 +1,103 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
 <script lang="ts">
-  import type { ContainerWidth, ScrollerStep } from '../@types/global';
-
-  /**
-   * ID of the scroller container
-   * @type {string}
-   */
-  export let id: string = '';
-  /**
-   * An array of step objects that define the steps in your scroller.
-   *
-   * Each step object in the array can have:
-   *
-   * - `background` A background component. **REQUIRED**
-   * - `backgroundProps` An object of props given to the background component
-   * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
-   * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
-   * - `foregroundProps` An object of props given to the foreground component
-   *
-   * @required
-   */
-  export let steps: ScrollerStep[] = [];
-  /**
-   * Width of the background
-   */
-  export let backgroundWidth: ContainerWidth = 'fluid';
-
-  type ForegroundPosition =
-    | 'middle'
-    | 'left'
-    | 'right'
-    | 'left opposite'
-    | 'right opposite';
-
-  /**
-   * Position of the foreground. One of: middle, left, right, left opposite or right opposite.
-   *
-   * "opposite" options push the background to the other side on larger viewports.
-   *
-   * @type {string}
-   */
-  export let foregroundPosition: ForegroundPosition = 'middle';
-  /**
-   * Whether previous background steps should stack below the current one.
-   *
-   * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
-   * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
-   */
-  export let stackBackground: boolean = true;
-  /**
-   * How many background steps to load before and after the currently active one, effectively lazy-loading them.
-   *
-   * Setting to `0` disables lazy-loading and loads all backgrounds at once.
-   */
-  export let preload: number = 1;
-  /**
-   * Setting to `true` will unroll the scroll experience into a flat layout.
-   */
-  export let embedded: boolean = false;
-
-  type EmbeddedLayout = 'fb' | 'bf';
-
-  /**
-   * Layout order when `embedded` is `true`.
-   *
-   * - `fb` _default_ Foreground then background
-   * - `bf` Background then foreground
-   *
-   * @type {string}
-   */
-  export let embeddedLayout: EmbeddedLayout = 'fb';
-  /**
-   * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-   */
-  export let threshold: number = 0.5;
-  /**
-   * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-   */
-  export let top: number = 0;
-  /**
-   * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-   */
-  export let bottom: number = 1;
-  /**
-   * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-   */
-  export let parallax: boolean = false;
-
-  /**
-   * Set a class to target with SCSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-
   // @ts-ignore no types
   import SvelteScroller from '@sveltejs/svelte-scroller';
   import Background from './Background.svelte';
   import Foreground from './Foreground.svelte';
   import Embedded from './Embedded/index.svelte';
-
   import Block from '../Block/Block.svelte';
 
-  let index = 0;
-  let offset;
-  let progress;
+  // Types
+  import type {
+    ContainerWidth,
+    ForegroundPosition,
+    ScrollerStep,
+  } from '../@types/global';
+
+  interface Props {
+    /** ID of the scroller container */
+    id?: string;
+
+    /**
+     * An array of step objects that define the steps in your scroller.
+     *
+     * Each step object in the array can have:
+     *
+     * - `background` A background component. **REQUIRED**
+     * - `backgroundProps` Optional props for background component.
+     * - `foreground` A component or markdown-formatted string. **REQUIRED**
+     * - `foregroundProps` Optional props for foreground component.
+     * - `altText` Optional alt text for the background, read aloud after the foregroud text. You can add it to each step or just to the first step to describe the entire scroller graphic. **RECOMMENDED**
+     *
+     */
+    steps: ScrollerStep[];
+    /** Width of the background */
+    backgroundWidth?: ContainerWidth;
+    /** Position of the foreground */
+    foregroundPosition?: ForegroundPosition;
+    /**
+     * Whether previous background steps should stack below the current one.
+     *
+     * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
+     * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
+     */
+    stackBackground?: boolean;
+    /**
+     * How many background steps to load before and after the currently active one, effectively lazy-loading them.
+     *
+     * Setting to `0` disables lazy-loading and loads all backgrounds at once.
+     */
+    preload?: number;
+    /** Setting to `true` will unroll the scroll experience into a flat layout */
+    embedded?: boolean;
+    /**
+     * Layout order when `embedded` is `true`.
+     *
+     * - `fb` _default_ Foreground then background
+     * - `bf` Background then foreground
+     *
+     */
+    embeddedLayout?: 'fb' | 'bf';
+    /**
+     * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    threshold?: number;
+    /**
+     * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    top?: number;
+    /**
+     * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    bottom?: number;
+    /**
+     * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    parallax?: boolean;
+    /** Set a class to target with SCSS */
+    class?: string;
+  }
+
+  let {
+    id = '',
+    steps,
+    backgroundWidth = 'fluid',
+    foregroundPosition = 'middle',
+    stackBackground = true,
+    preload = 1,
+    embedded = false,
+    embeddedLayout = 'fb',
+    threshold = 0.5,
+    top = 0,
+    bottom = 1,
+    parallax = false,
+    class: cls = '',
+  }: Props = $props();
+
+  let index = $state(0);
+  let offset = $state(0);
+  let progress = $state(0);
 </script>
 
 {#if !embedded}
@@ -123,13 +115,13 @@
       <div
         slot="background"
         class="background min-h-screen relative p-0 flex justify-center"
-        class:right="{foregroundPosition === 'left opposite'}"
-        class:left="{foregroundPosition === 'right opposite'}"
+        class:right={foregroundPosition === 'left opposite'}
+        class:left={foregroundPosition === 'right opposite'}
         aria-hidden="true"
       >
         <div class="scroller-graphic-well w-full">
           <Block
-            width="{backgroundWidth}"
+            width={backgroundWidth}
             class="background-container step-{index +
               1} my-0 min-h-screen flex justify-center items-center relative"
           >