diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index 9fb19b5f..f6e3b874 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -56,3 +56,14 @@ export type ForegroundPosition =
   | 'right'
   | 'left opposite'
   | 'right opposite';
+
+export type ScrollyVideoForegroundPosition =
+  | 'top center'
+  | 'top left'
+  | 'top right'
+  | 'bottom center'
+  | 'bottom left'
+  | 'bottom right'
+  | 'center center'
+  | 'center left'
+  | 'center right';
diff --git a/src/components/ScrollyVideo/Foreground.svelte b/src/components/ScrollyVideo/Foreground.svelte
index e13334a4..c38f0962 100644
--- a/src/components/ScrollyVideo/Foreground.svelte
+++ b/src/components/ScrollyVideo/Foreground.svelte
@@ -3,7 +3,14 @@
   import Block from '../Block/Block.svelte';
   import { fade } from 'svelte/transition';
   import { getContext } from 'svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  // Types
   import type { ScrollyVideoState } from './js/state.svelte';
+  import type {
+    ContainerWidth,
+    ScrollyVideoForegroundPosition,
+  } from '../@types/global';
 
   interface ForegroundProps {
     id?: string;
@@ -11,6 +18,10 @@
     startTime?: number;
     endTime?: number;
     children?: Snippet;
+    backgroundColor?: string;
+    width?: ContainerWidth;
+    position?: ScrollyVideoForegroundPosition | string;
+    text?: string | undefined;
   }
 
   let {
@@ -19,29 +30,57 @@
     startTime = 0,
     endTime = 1,
     children,
+    backgroundColor = '#000',
+    width = 'normal',
+    position = 'center center',
+    text,
   }: ForegroundProps = $props();
 
   let componentState: ScrollyVideoState = getContext('scrollyVideoState');
 </script>
 
-<Block width="fluid">
+<Block class={`scrolly-video-foreground ${cls}`} {id}>
   {#if componentState.generalData.currentTime >= startTime && componentState.generalData.currentTime <= endTime}
     <div
-      {id}
-      class={`scrolly-video-foreground ${cls}`}
+      class="scrolly-foreground"
       in:fade={{ delay: 100, duration: 200 }}
       out:fade={{ delay: 0, duration: 100 }}
     >
-      {@render children?.()}
+      <div class="scrolly-video-foreground-item">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+      {#if typeof text === 'string' && text.trim() !== ''}
+        <Block
+          class="scrolly-video-foreground-text {position.split(' ')[1]}"
+          {width}
+        >
+          <div
+            style="background-color: {backgroundColor};"
+            class="foreground-text {position.split(' ')[0]}"
+          >
+            <Markdown source={text} />
+          </div>
+        </Block>
+      {/if}
     </div>
   {/if}
 </Block>
 
 <style lang="scss">
-  .scrolly-video-foreground {
+  @use './../../scss/mixins' as mixins;
+
+  .scrolly-foreground {
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(.scrolly-video-foreground) {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     display: flex;
@@ -50,4 +89,68 @@
     justify-content: center;
     z-index: 2;
   }
+
+  .scrolly-video-foreground-item {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  :global {
+    .scrolly-video-foreground-text {
+      position: absolute;
+      width: 100%;
+      max-width: calc(mixins.$column-width-normal * 0.9);
+      height: 100%;
+
+      @media (max-width: 1200px) {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &.left {
+        left: 0;
+      }
+      &.right {
+        right: 0;
+      }
+      &.center {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .foreground-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 0.25rem;
+      background-color: white;
+      width: 100%;
+      @include mixins.fpy-5;
+      @include mixins.fpx-4;
+      @include mixins.fm-0;
+
+      :global(*) {
+        margin: 0;
+        padding: 0;
+      }
+
+      &.center {
+        top: 50%;
+      }
+      &.top {
+        top: 0;
+        transform: translate(-50%, 50%);
+      }
+      &.bottom {
+        top: 100%;
+        transform: translate(-50%, -150%);
+      }
+    }
+  }
 </style>
diff --git a/src/components/ScrollyVideo/ScrollyVideo.mdx b/src/components/ScrollyVideo/ScrollyVideo.mdx
index b6eb85af..d8f4e2d2 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.mdx
+++ b/src/components/ScrollyVideo/ScrollyVideo.mdx
@@ -365,6 +365,94 @@ The `ScrollyVideo` component can also be used to display different foregrounds b
 </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}
+      />
+    {/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 5daa4714..fbe9f181 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
@@ -3,6 +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';
 
   const { Story } = defineMeta({
     title: 'Components/Graphics/ScrollyVideo',
@@ -197,3 +198,11 @@
     {/key}
   {/snippet}
 </Story>
+
+<Story name="Basic text foreground" {args}>
+  {#snippet children(args)}
+    {#key args}
+      <BasicTextBoxes />
+    {/key}
+  {/snippet}
+</Story>
diff --git a/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte b/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
new file mode 100644
index 00000000..2f92105b
--- /dev/null
+++ b/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import ScrollyVideo from '../ScrollyVideo.svelte';
+  import Foreground from '../Foreground.svelte';
+  import Drone from '../videos/drone.mp4';
+  import Headline from '../../Headline/Headline.svelte';
+</script>
+
+<ScrollyVideo
+  id="alps-scrolly"
+  height="800svh"
+  src={Drone}
+  useWebCodecs={true}
+  showDebugInfo
+>
+  <Foreground startTime={0} endTime={2}>
+    <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={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
+    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
+    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>
+</ScrollyVideo>
+
+<style lang="scss">
+  :global(.custom-headline *) {
+    color: white;
+    text-shadow: 0 0 10px black;
+  }
+
+  :global {
+    #alps-scrolly .foreground-text {
+      * {
+        color: white;
+      }
+    }
+  }
+</style>
diff --git a/src/components/ScrollyVideo/demo/WithTimeline.svelte b/src/components/ScrollyVideo/demo/WithTimeline.svelte
index e4b734c3..3eb4f7cd 100644
--- a/src/components/ScrollyVideo/demo/WithTimeline.svelte
+++ b/src/components/ScrollyVideo/demo/WithTimeline.svelte
@@ -50,7 +50,13 @@
 {/snippet}
 
 {#snippet ScrollVideo(height: string, VideoSrc: string)}
-  <ScrollyVideo {height} src={VideoSrc} useWebCodecs={true} showDebugInfo>
+  <ScrollyVideo
+    class="surf-scrolly"
+    {height}
+    src={VideoSrc}
+    useWebCodecs={true}
+    showDebugInfo
+  >
     {@render ScrollForeground()}
   </ScrollyVideo>
 {/snippet}
@@ -68,7 +74,7 @@
     color: white;
   }
 
-  :global(.scrolly-video-foreground) {
+  :global(.surf-scrolly .scrolly-video-foreground) {
     filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
   }
 </style>
diff --git a/src/components/ScrollyVideo/videos/drone.mp4 b/src/components/ScrollyVideo/videos/drone.mp4
new file mode 100644
index 00000000..b5fdf747
Binary files /dev/null and b/src/components/ScrollyVideo/videos/drone.mp4 differ