diff --git a/src/components/ScrollerLottie/ScrollerLottie.mdx b/src/components/ScrollerLottie/ScrollerLottie.mdx
index 8a7e8ef2..3bcd8678 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.mdx
+++ b/src/components/ScrollerLottie/ScrollerLottie.mdx
@@ -9,6 +9,10 @@ import CompositionMarkerImage from './assets/marker.png?url';
 
 The `ScrollerLottie` component plays Lottie animations. It uses the [dotLottie-web](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/) library to render the animations.
 
+## How to use .lottie files
+
+LottieFiles is the official platform for creating and editing Lottie animations, and exporting them in the dotLottie format for smaller file sizes. The free version of LottieFiles has limited features, so [Bodymovin](https://exchange.adobe.com/apps/cc/12557/bodymovin) remains a popular, free way to export animations as JSON files. You can use the [LottieFiles converter](https://lottiefiles.com/tools/lottie-to-dotlottie) to convert JSON files to dotLottie or optimized dotLottie formats. This component is flexible and supports both dotLottie and JSON animation files.
+
 ## Basic demo
 
 To use the `ScrollerLottie` component, import it and provide the animation source. The height defaults to `100lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop.
@@ -27,7 +31,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile
+  src: LottieFile.lottie
   :end
 []
 ```
@@ -37,13 +41,14 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 ```svelte
 <script lang="ts">
   import { ScrollerLottie } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
 </script>
 
 {#each content.blocks as block}
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <ScrollerLottie
-      src={`./data/${block.src}.lottie?url`}
+      src={`${assets}/animations/${block.src}`}
       autoplay
       loop
       showDebugInfo
@@ -70,7 +75,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile
+  src: LottieFile.lottie
   marker: myMarker
   :end
 []
@@ -81,13 +86,14 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 ```svelte
 <script lang="ts">
   import { ScrollerLottie } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
 </script>
 
 {#each content.blocks as block}
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <ScrollerLottie
-      src={`./data/${block.src}.lottie?url`}
+      src={`${assets}/animations/${block.src}`}
       marker={block.marker}
       autoplay
       loop
@@ -109,7 +115,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile
+  src: LottieFile.lottie
   [.segment]
     start: 0
     end: 20
@@ -123,13 +129,14 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 ```svelte
 <script lang="ts">
   import { ScrollerLottie } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
 </script>
 
 {#each content.blocks as block}
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <ScrollerLottie
-      src={`./data/${block.src}.lottie?url`}
+      src={`${assets}/animations/${block.src}`}
       segment={[block.segment.start, block.segment.end]}
       autoplay
       loop
@@ -151,7 +158,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile
+  src: LottieFile.lottie
   theme: myTheme
   :end
 []
@@ -162,13 +169,14 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 ```svelte
 <script lang="ts">
   import { ScrollerLottie } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
 </script>
 
 {#each content.blocks as block}
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <ScrollerLottie
-      src={`./data/${block.src}.lottie?url`}
+      src={`${assets}/animations/${block.src}`}
       theme={block.theme}
       autoplay
       loop
@@ -270,7 +278,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile
+  src: LottieFile.lottie
 
   # Array of foregrounds
   [.foregrounds]
@@ -303,7 +311,11 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 
 ```svelte
 <script lang="ts">
-  import { ScrollerLottie } from '@reuters-graphics/graphics-components';
+  import {
+    ScrollerLottie,
+    ScrollerLottieForeground,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
 
   const Components = $state({
     Headline,
@@ -315,7 +327,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <ScrollerLottie
-      src={`./data/${block.src}.lottie?url`}
+      src={`${assets}/animations/${block.src}`}
       theme={block.theme}
       autoplay
       loop
diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte
index 33987ce7..36772dcb 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottie.svelte
@@ -27,7 +27,7 @@
     speed?: Config['speed'];
     src?: Config['src'];
     useFrameInterpolation?: Config['useFrameInterpolation'];
-    marker?: Config['marker'] | null | undefined;
+    marker?: Config['marker'] | undefined;
     layout?: Config['layout'];
     animationId?: Config['animationId'];
     themeId?: Config['themeId'];
@@ -56,8 +56,8 @@
   let canvas: HTMLCanvasElement;
   let canvasWidth: number = $state(1);
   let canvasHeight: number = $state(1);
-  let prevSrc = void 0;
-  let prevData = void 0;
+  let prevSrc: undefined | string = void 0;
+  let prevData: undefined | unknown = void 0;
   let progressTween = new Tween(0, { duration: 100 });
   let start: number = $state(0);
   let end: number = $state(0);
@@ -77,7 +77,7 @@
     themeId = '',
     themeData = '',
     playOnHover = false,
-    marker = '',
+    marker = undefined,
     layout = { fit: 'contain', align: [0.5, 0.5] },
     animationId = '',
     lottiePlayer = $bindable(undefined),
@@ -99,8 +99,7 @@
   setContext('lottieState', lottieState);
 
   function onLoadEvent() {
-    if (showDebugInfo) {
-      // set layout
+    if (lottiePlayer) {
       lottiePlayer.setLayout(layout);
 
       lottieState.allMarkers = lottiePlayer.markers().map((x) => x.name);
@@ -116,13 +115,13 @@
         start = segment ? segment[0] : 0;
         end = segment ? segment[1] : lottiePlayer.totalFrames - 1;
       }
+
+      // set to frame 1 to trigger initial render
+      // helpful especially when themeId is set
+      lottiePlayer.setFrame(1);
+
+      onLoad(); // call user-defined onLoad function
     }
-
-    // set to frame 1 to trigger initial render
-    // helpful especially when themeId is set
-    lottiePlayer.setFrame(1);
-
-    onLoad(); // call user-defined onLoad function
   }
 
   function onCompleteEvent() {
@@ -152,23 +151,73 @@
 
     if (lottiePlayer && lottieState) {
       keys.forEach((key) => {
-        lottieState[key] = lottiePlayer[key];
+        switch (key) {
+          case 'currentFrame':
+            lottieState.currentFrame = lottiePlayer!.currentFrame;
+            break;
+          case 'totalFrames':
+            lottieState.totalFrames = lottiePlayer!.totalFrames;
+            break;
+          case 'duration':
+            lottieState.duration = lottiePlayer!.duration;
+            break;
+          case 'loop':
+            lottieState.loop = lottiePlayer!.loop;
+            break;
+          case 'speed':
+            lottieState.speed = lottiePlayer!.speed;
+            break;
+          case 'loopCount':
+            lottieState.loopCount = lottiePlayer!.loopCount;
+            break;
+          case 'mode':
+            lottieState.mode = lottiePlayer!.mode;
+            break;
+          case 'isPaused':
+            lottieState.isPaused = lottiePlayer!.isPaused;
+            break;
+          case 'isPlaying':
+            lottieState.isPlaying = lottiePlayer!.isPlaying;
+            break;
+          case 'isStopped':
+            lottieState.isStopped = lottiePlayer!.isStopped;
+            break;
+          case 'isLoaded':
+            lottieState.isLoaded = lottiePlayer!.isLoaded;
+            break;
+          case 'isFrozen':
+            lottieState.isFrozen = lottiePlayer!.isFrozen;
+            break;
+          case 'segment':
+            lottieState.segment = lottiePlayer!.segment ?? null;
+            break;
+          case 'autoplay':
+            lottieState.autoplay = lottiePlayer!.autoplay ?? false;
+            break;
+          case 'layout':
+            lottieState.layout = lottiePlayer!.layout ?? null;
+            break;
+          case 'activeThemeId':
+            lottieState.activeThemeId = lottiePlayer!.activeThemeId ?? null;
+            break;
+          case 'marker':
+            lottieState.marker = lottiePlayer!.marker ?? undefined;
+            break;
+        }
       });
+
+      progress = (lottiePlayer.currentFrame + 1) / lottiePlayer.totalFrames;
+      lottieState.progress = progress;
+      onRender(); // call user-defined onRender function
     }
-
-    progress = (lottiePlayer.currentFrame + 1) / lottiePlayer.totalFrames;
-
-    lottieState.progress = progress;
-
-    onRender(); // call user-defined onRender function
   }
 
-  const hoverHandler = (event) => {
-    if (!playOnHover || !lottiePlayer.isLoaded) return;
+  const hoverHandler = (event: MouseEvent) => {
+    if (!playOnHover || !lottiePlayer?.isLoaded) return;
     if (event.type === 'mouseenter') {
-      lottiePlayer.play();
+      lottiePlayer?.play();
     } else if (event.type === 'mouseleave') {
-      lottiePlayer.pause();
+      lottiePlayer?.pause();
     }
   };
 
@@ -216,7 +265,7 @@
     return () => {
       canvas.removeEventListener('mouseenter', hoverHandler);
       canvas.removeEventListener('mouseleave', hoverHandler);
-      lottiePlayer.destroy();
+      lottiePlayer?.destroy();
     };
   });
 
@@ -232,12 +281,12 @@
   $effect(() => {
     if (lottieState.isLoaded && lottieState.progress !== progress) {
       autoplay = false;
-      lottiePlayer.pause();
+      lottiePlayer?.pause();
       loop = false;
 
       if (progress >= 0 && progress <= 1) {
         if (lottieState.isFrozen) {
-          lottiePlayer.unfreeze();
+          lottiePlayer?.unfreeze();
           lottieState.isFrozen = false;
         }
         const targetFrame = map(
@@ -258,7 +307,7 @@
         } else {
           progressTween.target = progress < 0 ? start : end;
         }
-        lottiePlayer.freeze();
+        lottiePlayer?.freeze();
         lottieState.isFrozen = true;
       }
     }
@@ -267,7 +316,7 @@
   // Tweens to progress value
   $effect(() => {
     if (progressTween.current >= 0) {
-      lottiePlayer.setFrame(progressTween.current);
+      lottiePlayer?.setFrame(progressTween.current);
     }
   });
 
@@ -275,7 +324,7 @@
   $effect(() => {
     if (
       typeof layout === 'object' &&
-      lottiePlayer.isLoaded &&
+      lottiePlayer?.isLoaded &&
       !isEqual(layout, lottiePlayer.layout)
     ) {
       lottiePlayer.setLayout(layout);
@@ -284,15 +333,15 @@
 
   // Handles marker change
   $effect(() => {
-    if (lottieState.isLoaded && lottiePlayer.marker !== marker) {
+    if (lottieState.isLoaded && lottiePlayer?.marker !== marker) {
       if (typeof marker === 'string') {
-        lottiePlayer.setMarker(marker);
+        lottiePlayer?.setMarker(marker);
 
         start =
-          lottiePlayer.markers().find((m) => m.name === marker)?.time ?? 0;
+          lottiePlayer?.markers().find((m) => m.name === marker)?.time ?? 0;
         end =
           start +
-          (lottiePlayer.markers().find((m) => m.name === marker)?.duration ??
+          (lottiePlayer?.markers().find((m) => m.name === marker)?.duration ??
             0);
 
         // change lottieState marker because
@@ -301,7 +350,7 @@
           lottieState.marker = marker;
         }
       } else if (marker === null || marker === undefined) {
-        lottiePlayer.setMarker('');
+        lottiePlayer?.setMarker('');
       } else {
         console.warn('Invalid marker type:', marker);
       }
@@ -313,9 +362,9 @@
     if (
       lottieState.isLoaded &&
       typeof speed == 'number' &&
-      lottiePlayer.speed !== speed
+      lottiePlayer?.speed !== speed
     ) {
-      lottiePlayer.setSpeed(speed);
+      lottiePlayer?.setSpeed(speed);
     }
   });
 
@@ -324,15 +373,15 @@
     if (
       lottieState.isLoaded &&
       typeof useFrameInterpolation == 'boolean' &&
-      lottiePlayer.useFrameInterpolation !== useFrameInterpolation
+      lottiePlayer?.useFrameInterpolation !== useFrameInterpolation
     ) {
-      lottiePlayer.setUseFrameInterpolation(useFrameInterpolation);
+      lottiePlayer?.setUseFrameInterpolation(useFrameInterpolation);
     }
   });
 
   // Handles segment change
   $effect(() => {
-    if (lottieState.isLoaded && !isEqual(lottiePlayer.segment, segment)) {
+    if (lottieState.isLoaded && !isEqual(lottiePlayer?.segment, segment)) {
       if (
         Array.isArray(segment) &&
         segment.length === 2 &&
@@ -340,9 +389,9 @@
         typeof segment[1] === 'number'
       ) {
         let [start, end] = segment;
-        lottiePlayer.setSegment(start, end);
+        lottiePlayer?.setSegment(start, end);
       } else if (segment === null || segment === undefined) {
-        lottiePlayer.setSegment(0, lottiePlayer.totalFrames);
+        lottiePlayer?.setSegment(0, lottiePlayer?.totalFrames);
       }
     }
   });
@@ -352,9 +401,9 @@
     if (
       lottieState.isLoaded &&
       typeof loop == 'boolean' &&
-      lottiePlayer.loop !== loop
+      lottiePlayer?.loop !== loop
     ) {
-      lottiePlayer.setLoop(loop);
+      lottiePlayer?.setLoop(loop);
     }
   });
 
@@ -373,9 +422,9 @@
   $effect(() => {
     if (
       lottieState.isLoaded &&
-      lottiePlayer.backgroundColor !== backgroundColor
+      lottiePlayer?.backgroundColor !== backgroundColor
     ) {
-      lottiePlayer.setBackgroundColor(backgroundColor || '');
+      lottiePlayer?.setBackgroundColor(backgroundColor || '');
     }
   });
 
@@ -384,16 +433,16 @@
     if (
       lottieState.isLoaded &&
       typeof mode == 'string' &&
-      lottiePlayer.mode !== mode
+      lottiePlayer?.mode !== mode
     ) {
-      lottiePlayer.setMode(mode);
+      lottiePlayer?.setMode(mode);
     }
   });
 
   // Handles src change
   $effect(() => {
     if (lottieState && src !== prevSrc) {
-      lottiePlayer.load({
+      lottiePlayer?.load({
         src,
         autoplay,
         loop,
@@ -441,23 +490,23 @@
   $effect(() => {
     if (
       lottieState.isLoaded &&
-      lottiePlayer.activeAnimationId !== animationId
+      lottiePlayer?.activeAnimationId !== animationId
     ) {
-      lottiePlayer.loadAnimation(animationId);
+      lottiePlayer?.loadAnimation(animationId);
     }
   });
 
   // Handles themeId change
   $effect(() => {
-    if (lottieState.isLoaded && lottiePlayer.activeThemeId !== themeId) {
-      lottiePlayer.setTheme(themeId);
+    if (lottieState.isLoaded && lottiePlayer?.activeThemeId !== themeId) {
+      lottiePlayer?.setTheme(themeId);
     }
   });
 
   // Handles themeData change
   $effect(() => {
-    if (lottieState.isLoaded && lottiePlayer.isLoaded) {
-      lottiePlayer.setThemeData(themeData);
+    if (lottieState.isLoaded && lottiePlayer?.isLoaded) {
+      lottiePlayer?.setThemeData(themeData);
     }
   });
 </script>
@@ -495,27 +544,4 @@
       display: block;
     }
   }
-
-  .debug-info {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    z-index: 3;
-    margin: 0;
-    min-width: 25vmin;
-
-    .title {
-      width: 100%;
-      padding: 4px 0 0 8px;
-      margin: 0;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    p {
-      color: white;
-      margin: 0;
-      padding: 4px 8px 8px 8px;
-    }
-  }
 </style>
diff --git a/src/components/ScrollerLottie/ScrollerLottieForeground.svelte b/src/components/ScrollerLottie/ScrollerLottieForeground.svelte
index 1f777e85..6df8ac08 100644
--- a/src/components/ScrollerLottie/ScrollerLottieForeground.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottieForeground.svelte
@@ -6,7 +6,7 @@
 
   // Types
   import type { Component, Snippet } from 'svelte';
-  import type { LottieState } from './lottieState.svelte';
+  import type { LottieState } from './ts/lottieState.svelte';
   import type {
     ContainerWidth,
     ScrollerLottieForegroundPosition,
diff --git a/src/components/ScrollerLottie/ts/lottieState.svelte.ts b/src/components/ScrollerLottie/ts/lottieState.svelte.ts
index e0a026ed..2b8e9712 100644
--- a/src/components/ScrollerLottie/ts/lottieState.svelte.ts
+++ b/src/components/ScrollerLottie/ts/lottieState.svelte.ts
@@ -1,4 +1,16 @@
+import type { Layout } from '@lottiefiles/dotlottie-web';
+
 export interface LottieState {
+  [key: string]:
+    | number
+    | boolean
+    | string
+    | null
+    | Array<string>
+    | Array<number>
+    | [number, number]
+    | Layout
+    | undefined;
   progress: number;
   currentFrame: number;
   totalFrames: number;
@@ -14,9 +26,9 @@ export interface LottieState {
   isFrozen: boolean;
   segment: null | [number, number];
   autoplay: boolean;
-  layout: null | string;
+  layout: null | Layout;
   allMarkers: Array<string>;
-  marker: null | string;
+  marker: undefined | string;
   allThemes: Array<string>;
   activeThemeId: null | string;
 }
@@ -40,7 +52,7 @@ export function createLottieState(): LottieState {
     autoplay: false,
     layout: null,
     allMarkers: [],
-    marker: null,
+    marker: undefined,
     allThemes: [],
     activeThemeId: null,
   });
diff --git a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
index 184bada1..6c0874c2 100644
--- a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
+++ b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
@@ -34,37 +34,6 @@
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
-  #progress-bar {
-    background-color: rgba(0, 0, 0, 0.8);
-    position: absolute;
-    z-index: 2;
-    right: 0;
-    padding: 1rem;
-
-    progress {
-      height: 6px;
-      background-color: #ff000044; /* Background color of the entire bar */
-    }
-
-    progress::-webkit-progress-value {
-      background-color: white;
-      border-radius: 10px;
-    }
-
-    progress::-webkit-progress-bar {
-      background-color: #444444;
-      border-radius: 10px;
-    }
-
-    p {
-      font-family: var(--theme-font-family-sans-serif);
-      color: white;
-      font-size: var(--theme-font-size-xs);
-      padding: 0;
-      margin: 0;
-    }
-  }
-
   .step-foreground-container {
     height: 100lvh;
     width: 50%;