diff --git a/src/components/Scroller/Scroller.mdx b/src/components/Scroller/Scroller.mdx
index 54994565..2b64a144 100644
--- a/src/components/Scroller/Scroller.mdx
+++ b/src/components/Scroller/Scroller.mdx
@@ -72,7 +72,7 @@ In your graphics kit project, import your ai2svelte graphics in `App.svelte` and
 </script>
 ```
 
-Then add the following structure to your ArchieML Doc, making sure that the names of your charts in the `aiCharts` object match the names of each step's `background` in the ArchieML doc:
+Then add the following structure to your ArchieML doc, making sure that the names of your charts in the `aiCharts` object match the names of each step's `background` in the ArchieML doc:
 
 ```yaml
 # ArchieML doc
@@ -217,7 +217,7 @@ In your graphics kit project's `App.svelte`, import your custom foregroud compon
 </script>
 ```
 
-Then add the following structure to your ArchieML Doc, making sure that the names of your charts in the `aiCharts` and `foregroundComponents` objects match the names of each step's `background` and `foreground` in the ArchieML doc:
+Then add the following structure to your ArchieML doc, making sure that the names of your charts in the `aiCharts` and `foregroundComponents` objects match the names of each step's `background` and `foreground` in the ArchieML doc:
 
 ```yaml
 # ArchieML doc
diff --git a/src/components/ScrollyVideo/ScrollyVideo.mdx b/src/components/ScrollyVideo/ScrollyVideo.mdx
index ba3f3a7a..6fd66e92 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.mdx
+++ b/src/components/ScrollyVideo/ScrollyVideo.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
 
 import * as ScrollyVideoStories from './ScrollyVideo.stories.svelte';
-
+ 
 <Meta of={ScrollyVideoStories} />
 
 # ScrollyVideo
@@ -116,11 +116,184 @@ The `autoplay` option combines the autoplay and scrollytelling experience. If se
 />
 ```
 
-## Using with ScrollerBase
+## Time-based foregrounds with ArchieML
 
-The `ScrollyVideo` component can also be used inside the `ScrollerBase` component to create a scroller-based layout. This allows for more complex interactions and layouts, such as combining ai2svelte components with scrolly video content.
+The `ScrollyVideo` component can also be used to display foregrounds, such as headlines, blurbs, or ai2svelte components, at specific times in the video. To do so, use the `Foreground` component.
 
-[Demo](?path=/story/components-graphics-scrollyvideo--inside-scroller-base)
+With the graphics kit, you'll likely get your text and prop values from an ArchieML doc...
+
+
+```yaml
+# ArchieML doc
+[blocks]
+  type: scrolly-video
+  src: videos/alps.mp4
+  height: 800svh
+
+  # Array of foregrounds
+  [.foregrounds]
+    startTime: 3
+    endTime: 7
+    text: #### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).
+    :end
+
+    startTime: 9
+    endTime: 12
+    text: Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies.
+    :end
+
+    startTime: 16
+    endTime: 20
+    text: #### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.
+    :end
+  []
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `Foreground` components.
+
+```svelte
+<script lang="ts">
+  import {
+    ScrollyVideo,
+    Foreground,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+</script>
+
+{#if block.type == 'scrolly-video'}
+  <ScrollyVideo id={block.id} src={block.src} height={block.height}>
+    <Foreground startTime={0} endTime={2}>
+      <Headline
+        class="custom-headline"
+        hed={content.hed}
+        dek={content.dek}
+        section={content.section}
+        sectionUrl={content.sectionUrl}
+        authors={content.authors}
+        publishTime={content.publishedDate}
+        updateTime={content.updatedDate}
+      />
+    </Foreground>
+    {#each block.foregrounds as foreground}
+      <Foreground
+        startTime={parseFloat(foreground.startTime)}
+        endTime={parseFloat(foreground.endTime)}
+        text={foreground.text}
+        backgroundColor="rgba(0, 0, 0, 0.8)"
+        position="bottom center"
+      />
+    {/each}
+  </ScrollyVideo>
+{/if}
+
+<style lang="scss">
+  :global {
+    .custom-headline * {
+      color: white;
+      text-shadow: 0 0 10px black;
+    }
+
+    #alps-scrolly .foreground-text {
+      * {
+        color: white;
+      }
+    }
+  }
+</style>
+```
+
+
+## Time based Foregrounds
+
+The `ScrollyVideo` component can also be used to display different foregrounds based on the current time in the video. This is useful for creating interactive experiences where the content changes as the video progresses. To throw off some ideas, one could add `Headline`, `GraphicBlock`, `FeaturePhoto` or any other component to the foreground based on the current time in the video. This can be achieved by adding `Foreground` components, along with their **startTime** and **endTime**, as a child to the main `ScrollyVideo` component.
+
+[Demo](?path=/story/components-graphics-scrollyvideo--time-based-foregrounds)
+
+```svelte
+<script lang="ts">
+  import { assets } from '$app/paths';
+
+  import {
+    Headline,
+    GraphicBlock,
+    ScrollyVideo,
+    Foreground,
+  } from '@reuters-graphics/graphics-components';
+  import Annotation1 from './ai2svelte/annotation1.svelte';
+  import Annotation2 from './ai2svelte/annotation2.svelte';
+  import Annotation3 from './ai2svelte/annotation3.svelte';
+  import Annotation4 from './ai2svelte/annotation4.svelte';
+
+  let width = $state(1);
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+{#snippet ScrollForeground()}
+  <Foreground startTime={0} endTime={0.3}>
+    <Headline
+      class="custom-headline"
+      hed="ScrollyVideo inside ScrollerBase"
+      dek="This is a demo of ScrollyVideo inside ScrollerBase component."
+      section={'Reuters Graphics'}
+      authors={['Jane Doe']}
+      publishTime={new Date('2020-01-01').toISOString()}
+    />
+  </Foreground>
+  <Foreground startTime={0.3} endTime={2.2}>
+    <GraphicBlock title="" description="" width="fluid">
+      <Annotation1 />
+    </GraphicBlock>
+  </Foreground>
+  <Foreground startTime={2.2} endTime={3.2}>
+    <GraphicBlock title="" description="" width="fluid">
+      <Annotation2 />
+    </GraphicBlock>
+  </Foreground>
+  <Foreground startTime={3.2} endTime={4.5}>
+    <GraphicBlock title="" description="" width="fluid">
+      <Annotation3 />
+    </GraphicBlock>
+  </Foreground>
+  <Foreground startTime={6.5} endTime={8}>
+    <GraphicBlock title="" description="" width="fluid">
+      <Annotation4 />
+    </GraphicBlock>
+  </Foreground>
+{/snippet}
+
+{#snippet ScrollVideo(height: string, VideoSrc: string)}
+  <ScrollyVideo {height} src={VideoSrc} useWebCodecs={true} showDebugInfo>
+    {@render ScrollForeground()}
+  </ScrollyVideo>
+{/snippet}
+
+{#if width < 600}
+  {@render ScrollVideo('800svh', `${assets}/videos/sm.mp4`)}
+{:else if width < 1200}
+  {@render ScrollVideo('800svh', `${assets}/videos/md.mp4`)}
+{:else}
+  {@render ScrollVideo('800svh', `${assets}/videos/lg.mp4`)}
+{/if}
+
+<style lang="scss">
+  :global(.custom-headline *) {
+    color: white;
+  }
+
+  :global(.scrolly-video-foreground) {
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
+  }
+</style>
+```
+
+
+## Using with `ScrollerBase`
+
+The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for more complex interactions and layouts, such as adding ai2svelte components in the foreground.
+
+[Demo](?path=/story/components-graphics-scrollyvideo--scroller-base)
 
 ```svelte
 <script lang="ts">
@@ -293,180 +466,6 @@ The `ScrollyVideo` component can also be used inside the `ScrollerBase` componen
 </style>
 ```
 
-## Time based Foregrounds
-
-The `ScrollyVideo` component can also be used to display different foregrounds based on the current time in the video. This is useful for creating interactive experiences where the content changes as the video progresses. To throw off some ideas, one could add `Headline`, `GraphicBlock`, `FeaturePhoto` or any other component to the foreground based on the current time in the video. This can be achieved by adding `Foreground` components, along with their **startTime** and **endTime**, as a child to the main `ScrollyVideo` component.
-
-[Demo](?path=/story/components-graphics-scrollyvideo--time-based-foregrounds)
-
-```svelte
-<script lang="ts">
-  import { assets } from '$app/paths';
-
-  import {
-    Headline,
-    GraphicBlock,
-    ScrollyVideo,
-    Foreground,
-  } from '@reuters-graphics/graphics-components';
-  import Annotation1 from './ai2svelte/annotation1.svelte';
-  import Annotation2 from './ai2svelte/annotation2.svelte';
-  import Annotation3 from './ai2svelte/annotation3.svelte';
-  import Annotation4 from './ai2svelte/annotation4.svelte';
-
-  let width = $state(1);
-</script>
-
-<svelte:window bind:innerWidth={width} />
-
-{#snippet ScrollForeground()}
-  <Foreground startTime={0} endTime={0.3}>
-    <Headline
-      class="custom-headline"
-      hed="ScrollyVideo inside ScrollerBase"
-      dek="This is a demo of ScrollyVideo inside ScrollerBase component."
-      section={'Reuters Graphics'}
-      authors={['Jane Doe']}
-      publishTime={new Date('2020-01-01').toISOString()}
-    />
-  </Foreground>
-  <Foreground startTime={0.3} endTime={2.2}>
-    <GraphicBlock title="" description="" width="fluid">
-      <Annotation1 />
-    </GraphicBlock>
-  </Foreground>
-  <Foreground startTime={2.2} endTime={3.2}>
-    <GraphicBlock title="" description="" width="fluid">
-      <Annotation2 />
-    </GraphicBlock>
-  </Foreground>
-  <Foreground startTime={3.2} endTime={4.5}>
-    <GraphicBlock title="" description="" width="fluid">
-      <Annotation3 />
-    </GraphicBlock>
-  </Foreground>
-  <Foreground startTime={6.5} endTime={8}>
-    <GraphicBlock title="" description="" width="fluid">
-      <Annotation4 />
-    </GraphicBlock>
-  </Foreground>
-{/snippet}
-
-{#snippet ScrollVideo(height: string, VideoSrc: string)}
-  <ScrollyVideo {height} src={VideoSrc} useWebCodecs={true} showDebugInfo>
-    {@render ScrollForeground()}
-  </ScrollyVideo>
-{/snippet}
-
-{#if width < 600}
-  {@render ScrollVideo('800svh', `${assets}/videos/sm.mp4`)}
-{:else if width < 1200}
-  {@render ScrollVideo('800svh', `${assets}/videos/md.mp4`)}
-{:else}
-  {@render ScrollVideo('800svh', `${assets}/videos/lg.mp4`)}
-{/if}
-
-<style lang="scss">
-  :global(.custom-headline *) {
-    color: white;
-  }
-
-  :global(.scrolly-video-foreground) {
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
-  }
-</style>
-```
-
-## With Captions
-
-The `ScrollyVideo` component can also be used to display captions at specific times in the video. This is useful for providing additional context or information to the viewer. To add captions, you can use the `Foreground` component and pass on the caption as **text** prop.
-
-To quickly set it up using ArchieML, you can use the following format on your RNGS doc or Google doc:
-
-```yaml
-# ArchieML doc
-[blocks]
-
-  type: scrolly-video
-  id: alps-scrolly
-  src: videos/alps.mp4
-  height: 800svh
-
-  # Array of foregrounds
-  [.foregrounds]
-    startTime: 3
-    endTime: 7
-    text: "#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles)."
-    :end
-
-    startTime: 9
-    endTime: 12
-    text: "Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies."
-    :end
-
-    startTime: 16
-    endTime: 20
-    text: "#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually."
-    :end
-  []
-  :end
-
-[]
-```
-
-Then add the following code to your App.svelte or the component where you want to display the scrolly video:
-
-```svelte
-<script lang="ts">
-  import {
-    ScrollyVideo,
-    Foreground,
-  } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-</script>
-
-{#if block.type == 'scrolly-video'}
-  <ScrollyVideo id={block.id} src={block.src} height={block.height}>
-    <Foreground startTime={0} endTime={2}>
-      <Headline
-        class="custom-headline"
-        hed={content.hed}
-        dek={content.dek}
-        section={content.section}
-        sectionUrl={content.sectionUrl}
-        authors={content.authors}
-        publishTime={content.publishedDate}
-        updateTime={content.updatedDate}
-      />
-    </Foreground>
-    {#each block.foregrounds as caption}
-      <Foreground
-        startTime={parseFloat(caption.startTime)}
-        endTime={parseFloat(caption.endTime)}
-        text={caption.text}
-        backgroundColor="rgba(0, 0, 0, 0.8)"
-        position="bottom center"
-      />
-    {/each}
-  </ScrollyVideo>
-{/if}
-
-<style lang="scss">
-  :global {
-    .custom-headline * {
-      color: white;
-      text-shadow: 0 0 10px black;
-    }
-
-    #alps-scrolly .foreground-text {
-      * {
-        color: white;
-      }
-    }
-  }
-</style>
-```
-
 ## Advanced usecases
 
 For advanced use cases such as looping a particular section of the video, or jumping to a specific time in the video, you can bind `scrollyVideo` prop and take benefits of methods such as `setVideoPercentage` or bindable methods such as `onReady` and `onChange`. This allows for fine-grained control over the video playback and interaction with the scroll position.
diff --git a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
index 22d51dc7..be8cdbb3 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
@@ -3,7 +3,7 @@
   import ScrollyVideo from './ScrollyVideo.svelte';
   import WithScrollerBase from './demo/WithScrollerBase.svelte';
   import WithTimeline from './demo/WithTimeline.svelte';
-  import BasicTextBoxes from './demo/BasicTextBoxes.svelte';
+  import WithTextForegrounds from './demo/WithTextForegrounds.svelte';
 
   const { Story } = defineMeta({
     title: 'Components/Graphics/ScrollyVideo',
@@ -194,5 +194,5 @@
 </Story>
 
 <Story name="Basic text foreground" {args}>
-  <BasicTextBoxes />
+  <WithTextForegrounds />
 </Story>
diff --git a/src/components/ScrollyVideo/Foreground.svelte b/src/components/ScrollyVideo/ScrollyVideoForeground.svelte
similarity index 100%
rename from src/components/ScrollyVideo/Foreground.svelte
rename to src/components/ScrollyVideo/ScrollyVideoForeground.svelte
diff --git a/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte b/src/components/ScrollyVideo/demo/WithTextForegrounds.svelte
similarity index 85%
rename from src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
rename to src/components/ScrollyVideo/demo/WithTextForegrounds.svelte
index 7d769fba..14497d91 100644
--- a/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
+++ b/src/components/ScrollyVideo/demo/WithTextForegrounds.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import ScrollyVideo from '../ScrollyVideo.svelte';
-  import Foreground from '../Foreground.svelte';
+  import ScrollyVideoForeground from '../ScrollyVideoForeground.svelte';
   import Drone from '../videos/drone.mp4';
   import Headline from '../../Headline/Headline.svelte';
 </script>
@@ -12,7 +12,7 @@
   useWebCodecs={true}
   showDebugInfo
 >
-  <Foreground startTime={0} endTime={2}>
+  <ScrollyVideoForeground startTime={0} endTime={2}>
     <Headline
       class="custom-headline"
       hed="The Alps"
@@ -22,28 +22,28 @@
       publishTime={new Date('2020-01-01').toISOString()}
       hedSize="bigger"
     />
-  </Foreground>
-  <Foreground
+  </ScrollyVideoForeground>
+  <ScrollyVideoForeground
     startTime={3}
     endTime={7}
     backgroundColor="rgba(0, 0, 0, 0.8)"
     text={'#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).'}
     position="bottom center"
-  ></Foreground>
-  <Foreground
+  ></ScrollyVideoForeground>
+  <ScrollyVideoForeground
     startTime={9}
     endTime={12}
     backgroundColor="rgba(0, 0, 0, 0.8)"
     text={"Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies."}
     position="bottom center"
-  ></Foreground>
-  <Foreground
+  ></ScrollyVideoForeground>
+  <ScrollyVideoForeground
     startTime={16}
     endTime={20}
     backgroundColor="rgba(0, 0, 0, 0.8)"
     text={'#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.'}
     position="bottom center"
-  ></Foreground>
+  ></ScrollyVideoForeground>
 </ScrollyVideo>
 
 <style lang="scss">
diff --git a/src/components/ScrollyVideo/demo/WithTimeline.svelte b/src/components/ScrollyVideo/demo/WithTimeline.svelte
index 1872c38d..68e63244 100644
--- a/src/components/ScrollyVideo/demo/WithTimeline.svelte
+++ b/src/components/ScrollyVideo/demo/WithTimeline.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import ScrollyVideo from '../ScrollyVideo.svelte';
-  import Foreground from '../Foreground.svelte';
+  import ScrollyVideoForeground from '../ScrollyVideoForeground.svelte';
   import SM from '../videos/waves_sm.mp4';
   import MD from '../videos/waves_md.mp4';
   import LG from '../videos/waves_lg.mp4';
@@ -17,7 +17,7 @@
 <svelte:window bind:innerWidth={width} />
 
 {#snippet ScrollForeground()}
-  <Foreground startTime={0} endTime={0.3}>
+  <ScrollyVideoForeground startTime={0} endTime={0.3}>
     <Headline
       class="custom-headline"
       hed="ScrollyVideo inside ScrollerBase"
@@ -26,27 +26,27 @@
       authors={['Jane Doe']}
       publishTime={new Date('2020-01-01').toISOString()}
     />
-  </Foreground>
-  <Foreground startTime={0.3} endTime={2.2}>
+  </ScrollyVideoForeground>
+  <ScrollyVideoForeground startTime={0.3} endTime={2.2}>
     <GraphicBlock title="" description="" width="fluid">
       <Annotation1 />
     </GraphicBlock>
-  </Foreground>
-  <Foreground startTime={2.2} endTime={3.2}>
+  </ScrollyVideoForeground>
+  <ScrollyVideoForeground startTime={2.2} endTime={3.2}>
     <GraphicBlock title="" description="" width="fluid">
       <Annotation2 />
     </GraphicBlock>
-  </Foreground>
-  <Foreground startTime={3.2} endTime={4.5}>
+  </ScrollyVideoForeground>
+  <ScrollyVideoForeground startTime={3.2} endTime={4.5}>
     <GraphicBlock title="" description="" width="fluid">
       <Annotation3 />
     </GraphicBlock>
-  </Foreground>
-  <Foreground startTime={6.5} endTime={8}>
+  </ScrollyVideoForeground>
+  <ScrollyVideoForeground startTime={6.5} endTime={8}>
     <GraphicBlock title="" description="" width="fluid">
       <Annotation4 />
     </GraphicBlock>
-  </Foreground>
+  </ScrollyVideoForeground>
 {/snippet}
 
 {#snippet ScrollVideo(height: string, VideoSrc: string)}
diff --git a/src/index.ts b/src/index.ts
index ecd9b870..09498412 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -43,6 +43,7 @@ export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
 export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
 export { default as ScrollyVideo } from './components/ScrollyVideo/ScrollyVideo.svelte';
+export { default as ScrollyVideoForeground } from './components/ScrollyVideo/ScrollyVideoForeground.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';