From 7c696049df9f1ad24cfab46e199a82f2fef573b4 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Fri, 20 Jun 2025 14:00:40 +1000
Subject: [PATCH 01/14] update VideoPlayer to allow for always visible button

---
 .../BrandMomentCaptureIntro.tsx               |  2 +
 .../_docs/BrandMomentCaptureIntro.mdx         |  6 +++
 .../_docs/BrandMomentCaptureIntro.stories.tsx | 41 +++++++++++++++++++
 .../subcomponents/Base/Base.module.scss       | 23 +++++------
 .../subcomponents/VideoPlayer/VideoPlayer.tsx | 26 +++++++++---
 .../src/Illustration/utils/usePausePlay.tsx   | 18 +++++++-
 6 files changed, 95 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
index 2ca1da82f98..48860a69478 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
@@ -32,6 +32,7 @@ export const BrandMomentCaptureIntro = ({
     return (
       <VideoPlayer
         {...otherProps}
+        hasVisiblePlayButton
         aspectRatio={aspectRatio}
         fallback="illustrations/heart/scene/brand-moments-capture-intro-loop"
         source="illustrations/heart/scene/brand-moments-capture-intro-loop"
@@ -44,6 +45,7 @@ export const BrandMomentCaptureIntro = ({
     <VideoPlayer
       {...otherProps}
       aspectRatio={aspectRatio}
+      hasVisiblePlayButton
       fallback="illustrations/heart/scene/brand-moments-capture-intro"
       source="illustrations/heart/scene/brand-moments-capture-intro"
       onEnded={(): void => setFirstAnimationComplete(true)}
diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx
index e6fcdd98c9f..e14c4d2a8d7 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx
@@ -45,3 +45,9 @@ Will render the a looped animation. Should be used with `isAnimated` to render t
 If false will render the animation paused. This can be re-enabled clicking the pause sign on hover.
 
 <Canvas of={BrandMomentCaptureIntroStories.Autoplay} />
+
+## Example
+
+This is not an exact template, rather an example of the component in use with a looping animation.
+
+<Canvas of={BrandMomentCaptureIntroStories.CaptureExample} />
diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
index 0917f224399..be2fdf40e34 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
@@ -1,4 +1,9 @@
+import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { Link } from '~components/Link'
+import { Text } from '~components/Text'
+import { Button, Icon } from '~components/__next__'
 import { BrandMomentCaptureIntro } from '../index'
 
 const meta = {
@@ -41,3 +46,39 @@ export const Autoplay: Story = {
     autoplay: false,
   },
 }
+
+// This is an example that provides a closer representation of how the component is used in the product.
+export const CaptureExample: Story = {
+  args: {
+    isAnimated: true,
+    loop: true,
+    autoplay: true,
+  },
+  render: (args) => (
+    <div className="bg-blue-200 flex justify-center gap-24 p-16">
+      <div className="flex justify-center items-center w-[50%]">
+        <BrandMomentCaptureIntro {...args} />
+      </div>
+      <div className="flex flex-col justify-center w-[50%]">
+        <Heading classNameOverride="mb-64" variant="display-0">
+          Survey Title
+        </Heading>
+        <Text classNameOverride="mb-32" variant="body">
+          You have been asked to provide feedback for Demonstration Employee.
+        </Text>
+        <Text classNameOverride="mb-32" variant="body">
+          The setting for this survey control how your responses can be used by Hooli.
+        </Text>
+        <Text classNameOverride="mb-32" variant="body">
+          Your information will be stored and processed in accordance with Culture Amp’s{' '}
+          <Link href="#">Privacy Policy</Link>. <Link href="#">More on managing information</Link>.
+        </Text>
+        <div>
+          <Button icon={<Icon name={'arrow_forward'} isPresentational />} iconPosition="end">
+            Take survey
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+}
diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss b/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
index 509eef1c0c4..0560111225c 100644
--- a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
+++ b/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
@@ -1,6 +1,3 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/animation';
-
 @layer kz-components {
   .wrapper {
     width: 100%;
@@ -18,24 +15,16 @@
     position: absolute;
     right: 1rem;
     bottom: 1rem;
-    /* stylelint-disable declaration-no-important */
-    background-color: $color-white !important;
-    border: 1px solid $color-gray-400;
-    transition: all $animation-duration-immediate;
+    border-width: 1px;
+    transition: opacity var(--animation-duration-immediate);
 
     @media (hover: none) and (pointer: coarse) {
       opacity: 100%;
     }
 
-    svg {
-      color: $color-purple-800;
-      opacity: 70%;
-    }
-
     &:hover,
     &:focus {
       opacity: 100%;
-      background-color: $color-gray-200 !important;
 
       svg {
         opacity: 100%;
@@ -43,6 +32,14 @@
     }
   }
 
+  .figure .pausePlayButton.hasVisiblePlayButton {
+    opacity: 100%;
+
+    svg {
+      opacity: 100%;
+    }
+  }
+
   .figure:hover {
     .pausePlayButton {
       opacity: 100%;
diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
index 33c4478ceb7..65a151dedab 100644
--- a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
+++ b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import { IconButton } from '~components/Button'
+import { VisuallyHidden } from '~components/VisuallyHidden'
+import { Button } from '~components/__next__'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { canPlayWebm } from '../../utils/canPlayWebm'
 import { usePausePlay } from '../../utils/usePausePlay'
@@ -37,9 +38,15 @@ export type VideoPlayerProps = {
    */
   aspectRatio?: 'landscape' | 'portrait' | 'square'
 
+  /**
+   * This render the play/pause button with 100% visibility, instead of relying on hover/focus interactions. This is useful for satisfying the a11y requirements for animations that last longer than 5 seconds. @default false.
+   */
+  hasVisiblePlayButton?: boolean
   onEnded?: () => void
 }
 
+// hasVisiblePlayButton is an interim solution to resolve an a11y issue with the animation player only showing the play/pause button on hover/focus. This ideally will be resolved through a design solution or updated pattern.
+
 export const VideoPlayer = ({
   autoplay = true,
   loop = false,
@@ -47,6 +54,7 @@ export const VideoPlayer = ({
   source,
   aspectRatio,
   onEnded,
+  hasVisiblePlayButton = false, //
 }: VideoPlayerProps): JSX.Element => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [prefersReducedMotion, setPrefersReducedMotion] = React.useState<boolean>(true)
@@ -181,12 +189,18 @@ export const VideoPlayer = ({
         {isWebmCompatible && <source src={assetUrl(`${source}.webm`)} type="video/webm" />}
         <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />
       </video>
-      <IconButton
-        onClick={(): void => pausePlay.toggle()}
+      <Button
+        className={classnames(
+          styles.pausePlayButton,
+          hasVisiblePlayButton && styles.hasVisiblePlayButton,
+        )}
+        variant="secondary"
         icon={pausePlay.icon}
-        label={pausePlay.label}
-        classNameOverride={styles.pausePlayButton}
-      />
+        onPress={(): void => pausePlay.toggle()}
+        hasHiddenLabel
+      >
+        <VisuallyHidden>{pausePlay.label}</VisuallyHidden>
+      </Button>
     </figure>
   )
 }
diff --git a/packages/components/src/Illustration/utils/usePausePlay.tsx b/packages/components/src/Illustration/utils/usePausePlay.tsx
index 9a1b3e36f66..00228909393 100644
--- a/packages/components/src/Illustration/utils/usePausePlay.tsx
+++ b/packages/components/src/Illustration/utils/usePausePlay.tsx
@@ -1,4 +1,5 @@
 import React, { useState, type RefObject } from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Icon } from '~components/__next__/Icon'
 
 export type usePausePlayHook = {
@@ -8,8 +9,21 @@ export type usePausePlayHook = {
 }
 
 export const usePausePlay = (videoRef: RefObject<HTMLVideoElement>): usePausePlayHook => {
+  const { formatMessage } = useIntl()
   const [isPaused, setPaused] = useState(false)
 
+  const playAnimationLabel = formatMessage({
+    id: 'videoPlayer.pausePlayBtn.playLabel',
+    defaultMessage: 'Play animation',
+    description: 'Label for the starting / playing an animation',
+  })
+
+  const pauseAnimationLabel = formatMessage({
+    id: 'videoPlayer.pausePlayBtn.pauseLabel',
+    defaultMessage: 'Play animation',
+    description: 'Label for the pausing / stopping an animation',
+  })
+
   return {
     toggle: (): void => {
       if (!videoRef.current) return
@@ -22,7 +36,7 @@ export const usePausePlay = (videoRef: RefObject<HTMLVideoElement>): usePausePla
         videoRef.current.pause()
       }
     },
-    icon: <Icon name={isPaused ? 'play_circle' : 'pause'} isPresentational isFilled />,
-    label: isPaused ? 'Play animation' : 'Pause animation',
+    icon: <Icon name={isPaused ? 'play_circle' : 'pause_circle'} isPresentational isFilled />,
+    label: isPaused ? playAnimationLabel : pauseAnimationLabel,
   }
 }

From b4c263071e37096b8e3969c0700516f125898b83 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Fri, 20 Jun 2025 14:02:00 +1000
Subject: [PATCH 02/14] update scene documentation to showcase animatable
 scenes

---
 .../src/Illustration/Scene/_docs/Scene.mdx    |  6 +++
 .../Scene/_docs/Scene.stories.tsx             | 46 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.mdx b/packages/components/src/Illustration/Scene/_docs/Scene.mdx
index 5f24a922fdb..09acb28b5a5 100644
--- a/packages/components/src/Illustration/Scene/_docs/Scene.mdx
+++ b/packages/components/src/Illustration/Scene/_docs/Scene.mdx
@@ -20,3 +20,9 @@ import * as SceneStories from './Scene.stories'
 <Controls of={SceneStories.Playground} />
 
 <Canvas of={Stickersheets.StickerSheetDefault} />
+
+### Animated scenes
+
+Some Scene illustrations have animated versions. Looped animation should be used sparingly as it can be distracting for users, especially those with motion sensitivity. Consider also the WCAG spec for [non-essential animations](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html).
+
+<Canvas of={SceneStories.AnimatedScenes} />
diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx b/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
index b30b737a7df..47cb4d22c64 100644
--- a/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
+++ b/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
@@ -1,6 +1,16 @@
+import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 
-import { BrandMomentPositiveOutro } from '../index'
+import {
+  BrandMomentError,
+  BrandMomentLogin,
+  BrandMomentPositiveOutro,
+  EmptyStatesAction,
+  EmptyStatesInformative,
+  EmptyStatesNegative,
+  EmptyStatesNeutral,
+  EmptyStatesPositive,
+} from '../index'
 
 const meta = {
   title: 'Components/Illustrations/Scene',
@@ -20,3 +30,37 @@ export const Playground: Story = {
     },
   },
 }
+
+export const AnimatedScenes: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+  args: {
+    isAnimated: true,
+    loop: true,
+    autoplay: true,
+  },
+  render: (args) => (
+    <>
+      <EmptyStatesAction {...args} />
+      <EmptyStatesInformative {...args} />
+      <EmptyStatesNegative {...args} />
+      <EmptyStatesNeutral {...args} />
+      <EmptyStatesPositive {...args} />
+      <BrandMomentPositiveOutro {...args} />
+      <BrandMomentLogin {...args} />
+      <BrandMomentError {...args} />
+    </>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col justify-center gap-16 max-w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+}

From 3a9e2ba80907f5068d0ee884c635b6dc30b5d15b Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Fri, 20 Jun 2025 14:14:19 +1000
Subject: [PATCH 03/14] rename prop to hasVisibleAnimationToggle

---
 .../BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx   | 4 ++--
 .../src/Illustration/subcomponents/Base/Base.module.scss  | 2 +-
 .../subcomponents/VideoPlayer/VideoPlayer.tsx             | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
index 48860a69478..3e3768837ca 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
@@ -32,7 +32,7 @@ export const BrandMomentCaptureIntro = ({
     return (
       <VideoPlayer
         {...otherProps}
-        hasVisiblePlayButton
+        hasVisibleAnimationToggle
         aspectRatio={aspectRatio}
         fallback="illustrations/heart/scene/brand-moments-capture-intro-loop"
         source="illustrations/heart/scene/brand-moments-capture-intro-loop"
@@ -45,7 +45,7 @@ export const BrandMomentCaptureIntro = ({
     <VideoPlayer
       {...otherProps}
       aspectRatio={aspectRatio}
-      hasVisiblePlayButton
+      hasVisibleAnimationToggle
       fallback="illustrations/heart/scene/brand-moments-capture-intro"
       source="illustrations/heart/scene/brand-moments-capture-intro"
       onEnded={(): void => setFirstAnimationComplete(true)}
diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss b/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
index 0560111225c..e78d29a78ee 100644
--- a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
+++ b/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
@@ -32,7 +32,7 @@
     }
   }
 
-  .figure .pausePlayButton.hasVisiblePlayButton {
+  .figure .pausePlayButton.hasVisibleAnimationToggle {
     opacity: 100%;
 
     svg {
diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
index 65a151dedab..22d7db40208 100644
--- a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
+++ b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
@@ -41,11 +41,11 @@ export type VideoPlayerProps = {
   /**
    * This render the play/pause button with 100% visibility, instead of relying on hover/focus interactions. This is useful for satisfying the a11y requirements for animations that last longer than 5 seconds. @default false.
    */
-  hasVisiblePlayButton?: boolean
+  hasVisibleAnimationToggle?: boolean
   onEnded?: () => void
 }
 
-// hasVisiblePlayButton is an interim solution to resolve an a11y issue with the animation player only showing the play/pause button on hover/focus. This ideally will be resolved through a design solution or updated pattern.
+// hasVisibleAnimationToggle is an interim solution to resolve an a11y issue with the animation player only showing the play/pause button on hover/focus. This ideally will be resolved through a design solution or updated pattern.
 
 export const VideoPlayer = ({
   autoplay = true,
@@ -54,7 +54,7 @@ export const VideoPlayer = ({
   source,
   aspectRatio,
   onEnded,
-  hasVisiblePlayButton = false, //
+  hasVisibleAnimationToggle = false,
 }: VideoPlayerProps): JSX.Element => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [prefersReducedMotion, setPrefersReducedMotion] = React.useState<boolean>(true)
@@ -192,7 +192,7 @@ export const VideoPlayer = ({
       <Button
         className={classnames(
           styles.pausePlayButton,
-          hasVisiblePlayButton && styles.hasVisiblePlayButton,
+          hasVisibleAnimationToggle && styles.hasVisibleAnimationToggle,
         )}
         variant="secondary"
         icon={pausePlay.icon}

From cab9326f6f4e1f6e8ea93b01ea3fc39d613dfe47 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Fri, 20 Jun 2025 14:14:44 +1000
Subject: [PATCH 04/14] add changeset and run i18n extract

---
 .changeset/sweet-news-search.md     | 10 ++++++++++
 packages/components/locales/en.json |  8 ++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 .changeset/sweet-news-search.md

diff --git a/.changeset/sweet-news-search.md b/.changeset/sweet-news-search.md
new file mode 100644
index 00000000000..38beaf67119
--- /dev/null
+++ b/.changeset/sweet-news-search.md
@@ -0,0 +1,10 @@
+---
+'@kaizen/components': patch
+---
+
+Add optional prop to `VideoPlayer` and update `BrandMomentCaptureIntro` to always display the animation toggle.
+
+- Add `hasVisibleAnimationToggle` prop to `VideoPlayer`
+- Update VideoPlayer to next `Button` component
+- Remove redundant styles from button migration
+- Add i18n strings for play/pause labels
diff --git a/packages/components/locales/en.json b/packages/components/locales/en.json
index b18eaf5985a..36e210cd2c7 100644
--- a/packages/components/locales/en.json
+++ b/packages/components/locales/en.json
@@ -188,5 +188,13 @@
   "splitButton.dropdownButton.label": {
     "description": "Label for a dropdown menu holding additional actions",
     "message": "Additional actions"
+  },
+  "videoPlayer.pausePlayBtn.pauseLabel": {
+    "description": "Label for the pausing / stopping an animation",
+    "message": "Play animation"
+  },
+  "videoPlayer.pausePlayBtn.playLabel": {
+    "description": "Label for the starting / playing an animation",
+    "message": "Play animation"
   }
 }

From 812ddd5589714184a1f2a113a77ac090464fcb84 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Fri, 20 Jun 2025 15:34:16 +1000
Subject: [PATCH 05/14] update Story bg color to correct background

---
 .../_docs/BrandMomentCaptureIntro.stories.tsx                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
index be2fdf40e34..cd9b731ff64 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
@@ -55,7 +55,7 @@ export const CaptureExample: Story = {
     autoplay: true,
   },
   render: (args) => (
-    <div className="bg-blue-200 flex justify-center gap-24 p-16">
+    <div className="bg-blue-100 flex justify-center gap-24 p-16">
       <div className="flex justify-center items-center w-[50%]">
         <BrandMomentCaptureIntro {...args} />
       </div>

From 160195648cfc9ab520741b9436ff925762470b4d Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Mon, 23 Jun 2025 09:53:35 +1000
Subject: [PATCH 06/14] update button to large like previous implementation

---
 .../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
index 22d7db40208..10b253a3a86 100644
--- a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
+++ b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
@@ -195,6 +195,7 @@ export const VideoPlayer = ({
           hasVisibleAnimationToggle && styles.hasVisibleAnimationToggle,
         )}
         variant="secondary"
+        size="large"
         icon={pausePlay.icon}
         onPress={(): void => pausePlay.toggle()}
         hasHiddenLabel

From d1412e8c35e50b93132f19cc06195c5c36075b66 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Thu, 26 Jun 2025 16:28:39 +1000
Subject: [PATCH 07/14] update styles to latest designs

---
 .../Scene/_docs/Scene.stories.tsx             | 26 ++++++---
 .../{Base.module.scss => Base.module.css}     | 56 +++++--------------
 .../Illustration/subcomponents/Base/Base.tsx  |  2 +-
 .../subcomponents/VideoPlayer/VideoPlayer.tsx |  7 ++-
 4 files changed, 38 insertions(+), 53 deletions(-)
 rename packages/components/src/Illustration/subcomponents/Base/{Base.module.scss => Base.module.css} (52%)

diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx b/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
index 47cb4d22c64..b88c8f30871 100644
--- a/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
+++ b/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
@@ -32,13 +32,6 @@ export const Playground: Story = {
 }
 
 export const AnimatedScenes: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-  },
   args: {
     isAnimated: true,
     loop: true,
@@ -64,3 +57,22 @@ export const AnimatedScenes: Story = {
     ),
   ],
 }
+
+export const AnimatedScenesHover: Story = {
+  ...AnimatedScenes,
+  parameters: {
+    pseudo: {
+      hover: ['[data-sb-pseudo-styles="hover"]', '[data-sb-pseudo-styles="hover"] figure'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        className="flex flex-col justify-center gap-16 max-w-[400px]"
+        data-sb-pseudo-styles="hover"
+      >
+        <Story />
+      </div>
+    ),
+  ],
+}
diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss b/packages/components/src/Illustration/subcomponents/Base/Base.module.css
similarity index 52%
rename from packages/components/src/Illustration/subcomponents/Base/Base.module.scss
rename to packages/components/src/Illustration/subcomponents/Base/Base.module.css
index e78d29a78ee..e074d66bb78 100644
--- a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss
+++ b/packages/components/src/Illustration/subcomponents/Base/Base.module.css
@@ -9,41 +9,29 @@
     position: relative;
   }
 
-  // nested to get more specificity, beat out the generic button styles
-  .figure .pausePlayButton {
-    opacity: 0%;
+  .pausePlayButton {
+    opacity: 0;
     position: absolute;
-    right: 1rem;
-    bottom: 1rem;
+    left: var(--spacing-16);
+    bottom: var(--spacing-16);
     border-width: 1px;
-    transition: opacity var(--animation-duration-immediate);
+    transition: all var(--animation-duration-immediate) ease;
 
     @media (hover: none) and (pointer: coarse) {
-      opacity: 100%;
-    }
-
-    &:hover,
-    &:focus {
-      opacity: 100%;
-
-      svg {
-        opacity: 100%;
-      }
+      opacity: 1;
     }
   }
 
-  .figure .pausePlayButton.hasVisibleAnimationToggle {
-    opacity: 100%;
-
-    svg {
-      opacity: 100%;
-    }
+  .pausePlayButton:hover,
+  .pausePlayButton:focus,
+  .figure:hover .pausePlayButton {
+    opacity: 1;
+    background: var(--color-blue-200);
+    color: var(--color-purple-900);
   }
 
-  .figure:hover {
-    .pausePlayButton {
-      opacity: 100%;
-    }
+  .hasVisibleAnimationToggle {
+    opacity: 1;
   }
 
   .aspectRatioWrapper {
@@ -105,20 +93,4 @@
       }
     }
   }
-
-  // If the .visually-hidden class is applied to natively focusable elements
-  // (such as a, button, input, etc) they must become visible when they receive
-  // keyboard focus. Otherwise, a sighted keyboard user would have to try and
-  // figure out where their visible focus indicator had gone to.
-  .visuallyHidden:not(:focus, :active) {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    border: 0;
-  }
 }
diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.tsx b/packages/components/src/Illustration/subcomponents/Base/Base.tsx
index 2c86079d79f..7c614cb69e1 100644
--- a/packages/components/src/Illustration/subcomponents/Base/Base.tsx
+++ b/packages/components/src/Illustration/subcomponents/Base/Base.tsx
@@ -2,7 +2,7 @@ import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
-import styles from './Base.module.scss'
+import styles from './Base.module.css'
 
 export type BaseProps = {
   /**
diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
index 10b253a3a86..cd82bb46c1d 100644
--- a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
+++ b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
@@ -5,7 +5,7 @@ import { Button } from '~components/__next__'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { canPlayWebm } from '../../utils/canPlayWebm'
 import { usePausePlay } from '../../utils/usePausePlay'
-import styles from '../Base/Base.module.scss'
+import styles from '../Base/Base.module.css'
 
 export type VideoPlayerProps = {
   /**
@@ -185,6 +185,7 @@ export const VideoPlayer = ({
         autoPlay={prefersReducedMotion ? false : autoplay}
         playsInline={true}
         tabIndex={-1}
+        onClick={(): void => pausePlay.toggle()}
       >
         {isWebmCompatible && <source src={assetUrl(`${source}.webm`)} type="video/webm" />}
         <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />
@@ -194,8 +195,8 @@ export const VideoPlayer = ({
           styles.pausePlayButton,
           hasVisibleAnimationToggle && styles.hasVisibleAnimationToggle,
         )}
-        variant="secondary"
-        size="large"
+        variant="tertiary"
+        size="small"
         icon={pausePlay.icon}
         onPress={(): void => pausePlay.toggle()}
         hasHiddenLabel

From ad8e2dbc911947c95c470b93023d83ac58d07bbc Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 14:25:32 +1000
Subject: [PATCH 08/14] fix play pause button hook to update toggle properly

---
 .../src/Illustration/utils/usePausePlay.tsx   | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/Illustration/utils/usePausePlay.tsx b/packages/components/src/Illustration/utils/usePausePlay.tsx
index 00228909393..21805094ea3 100644
--- a/packages/components/src/Illustration/utils/usePausePlay.tsx
+++ b/packages/components/src/Illustration/utils/usePausePlay.tsx
@@ -1,4 +1,4 @@
-import React, { useState, type RefObject } from 'react'
+import React, { useEffect, useState, type RefObject } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Icon } from '~components/__next__/Icon'
 
@@ -10,7 +10,25 @@ export type usePausePlayHook = {
 
 export const usePausePlay = (videoRef: RefObject<HTMLVideoElement>): usePausePlayHook => {
   const { formatMessage } = useIntl()
-  const [isPaused, setPaused] = useState(false)
+  const [isPaused, setPaused] = useState(true)
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    setPaused(video.paused)
+
+    const handlePlay = (): void => setPaused(false)
+    const handlePause = (): void => setPaused(true)
+
+    video.addEventListener('play', handlePlay)
+    video.addEventListener('pause', handlePause)
+
+    return () => {
+      video.removeEventListener('play', handlePlay)
+      video.removeEventListener('pause', handlePause)
+    }
+  }, [videoRef])
 
   const playAnimationLabel = formatMessage({
     id: 'videoPlayer.pausePlayBtn.playLabel',
@@ -20,7 +38,7 @@ export const usePausePlay = (videoRef: RefObject<HTMLVideoElement>): usePausePla
 
   const pauseAnimationLabel = formatMessage({
     id: 'videoPlayer.pausePlayBtn.pauseLabel',
-    defaultMessage: 'Play animation',
+    defaultMessage: 'Pause animation',
     description: 'Label for the pausing / stopping an animation',
   })
 
@@ -29,10 +47,8 @@ export const usePausePlay = (videoRef: RefObject<HTMLVideoElement>): usePausePla
       if (!videoRef.current) return
 
       if (videoRef.current.paused) {
-        setPaused(false)
         videoRef.current.play()
       } else {
-        setPaused(true)
         videoRef.current.pause()
       }
     },

From f37dc527e62012dc6cddd5e2f972238e56b3ddce Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 14:54:42 +1000
Subject: [PATCH 09/14] update VideoPlayer to secondary variant

---
 .../subcomponents/VideoPlayer/VideoPlayer.tsx         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
index cd82bb46c1d..6ee76ddbac0 100644
--- a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
+++ b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx
@@ -39,22 +39,20 @@ export type VideoPlayerProps = {
   aspectRatio?: 'landscape' | 'portrait' | 'square'
 
   /**
-   * This render the play/pause button with 100% visibility, instead of relying on hover/focus interactions. This is useful for satisfying the a11y requirements for animations that last longer than 5 seconds. @default false.
+   * Controls whether the animation toggle is always visible or will only be visible on hover. This will supersede the default behavior of always being visible if `loop` and `autoplay` are `true` - note that this can have accessibility implications. @default undefined
    */
   hasVisibleAnimationToggle?: boolean
   onEnded?: () => void
 }
 
-// hasVisibleAnimationToggle is an interim solution to resolve an a11y issue with the animation player only showing the play/pause button on hover/focus. This ideally will be resolved through a design solution or updated pattern.
-
 export const VideoPlayer = ({
   autoplay = true,
   loop = false,
+  hasVisibleAnimationToggle,
   fallback,
   source,
   aspectRatio,
   onEnded,
-  hasVisibleAnimationToggle = false,
 }: VideoPlayerProps): JSX.Element => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [prefersReducedMotion, setPrefersReducedMotion] = React.useState<boolean>(true)
@@ -163,6 +161,7 @@ export const VideoPlayer = ({
   }, [windowIsAvailable])
 
   const pausePlay = usePausePlay(videoRef)
+  const shouldAlwaysShowAnimationToggle = hasVisibleAnimationToggle ?? (autoplay && loop)
 
   return (
     <figure
@@ -193,9 +192,9 @@ export const VideoPlayer = ({
       <Button
         className={classnames(
           styles.pausePlayButton,
-          hasVisibleAnimationToggle && styles.hasVisibleAnimationToggle,
+          shouldAlwaysShowAnimationToggle && styles.hasVisibleAnimationToggle,
         )}
-        variant="tertiary"
+        variant="secondary"
         size="small"
         icon={pausePlay.icon}
         onPress={(): void => pausePlay.toggle()}

From 7f6b0d9755281c6e301eb82140701bef23329e26 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 15:04:18 +1000
Subject: [PATCH 10/14] update scene illustration stories and types

---
 .../src/Illustration/Scene/Scene.tsx          |  3 ++-
 .../Scene/_docs/Scene.stories.tsx             | 22 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/Illustration/Scene/Scene.tsx b/packages/components/src/Illustration/Scene/Scene.tsx
index 6ea4866305d..7a5fc5fe2c9 100644
--- a/packages/components/src/Illustration/Scene/Scene.tsx
+++ b/packages/components/src/Illustration/Scene/Scene.tsx
@@ -10,7 +10,7 @@ export type SceneProps = {
 type BaseAnimatedSceneProps = {
   isAnimated?: boolean
 } & SceneProps &
-  Pick<VideoPlayerProps, 'autoplay' | 'loop'>
+  Pick<VideoPlayerProps, 'autoplay' | 'loop' | 'hasVisibleAnimationToggle'>
 
 type AnimatedProps = {
   isAnimated: true
@@ -21,6 +21,7 @@ type NotAnimatedProps = {
   isAnimated?: false
   autoplay?: never
   loop?: never
+  hasVisibleAnimationToggle?: never
 } & BaseAnimatedSceneProps
 
 export type AnimatedSceneProps = AnimatedProps | NotAnimatedProps
diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx b/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
index b88c8f30871..586d810145f 100644
--- a/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
+++ b/packages/components/src/Illustration/Scene/_docs/Scene.stories.tsx
@@ -13,7 +13,7 @@ import {
 } from '../index'
 
 const meta = {
-  title: 'Components/Illustrations/Scene',
+  title: 'Components/illustrations/Scene',
   component: BrandMomentPositiveOutro,
 } satisfies Meta<typeof BrandMomentPositiveOutro>
 
@@ -32,6 +32,7 @@ export const Playground: Story = {
 }
 
 export const AnimatedScenes: Story = {
+  name: 'Animated Scene illustration autoplay and loop',
   args: {
     isAnimated: true,
     loop: true,
@@ -57,6 +58,25 @@ export const AnimatedScenes: Story = {
     ),
   ],
 }
+export const AnimatedScenesWithAutoPlayNoLoop: Story = {
+  name: 'Animated Scene illustration with autoplay but no loop',
+  ...AnimatedScenes,
+  args: {
+    isAnimated: true,
+    loop: false,
+    autoplay: true,
+  },
+}
+
+export const AnimatedScenesLoopedWithoutAutoplay: Story = {
+  name: 'Animated Scene illustration without autoplay but with loop',
+  ...AnimatedScenes,
+  args: {
+    isAnimated: true,
+    loop: true,
+    autoplay: false,
+  },
+}
 
 export const AnimatedScenesHover: Story = {
   ...AnimatedScenes,

From 97bee314deb4a1b0c584edbfcdff26d6dcaa4736 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 15:05:56 +1000
Subject: [PATCH 11/14] update BrandMomentCaptureIntro animation button
 visibility and stories

---
 .../BrandMomentCaptureIntro.tsx                       | 11 ++++++++---
 .../_docs/BrandMomentCaptureIntro.stories.tsx         |  5 ++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
index 3e3768837ca..fada50176dc 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx
@@ -12,10 +12,13 @@ export const BrandMomentCaptureIntro = ({
   isAnimated,
   alt,
   enableAspectRatio,
+  autoplay,
+  loop,
   ...otherProps
 }: AnimatedSceneProps): JSX.Element => {
   const [firstAnimationComplete, setFirstAnimationComplete] = useState<boolean>(false)
   const aspectRatio = enableAspectRatio ? 'landscape' : undefined
+  const shouldAlwaysShowAnimationToggle = autoplay && loop
 
   if (!isAnimated) {
     return (
@@ -32,11 +35,12 @@ export const BrandMomentCaptureIntro = ({
     return (
       <VideoPlayer
         {...otherProps}
-        hasVisibleAnimationToggle
         aspectRatio={aspectRatio}
         fallback="illustrations/heart/scene/brand-moments-capture-intro-loop"
         source="illustrations/heart/scene/brand-moments-capture-intro-loop"
-        autoplay={firstAnimationComplete ? otherProps.autoplay : false}
+        autoplay={firstAnimationComplete ? autoplay : false}
+        loop={loop}
+        hasVisibleAnimationToggle={shouldAlwaysShowAnimationToggle}
       />
     )
   }
@@ -45,11 +49,12 @@ export const BrandMomentCaptureIntro = ({
     <VideoPlayer
       {...otherProps}
       aspectRatio={aspectRatio}
-      hasVisibleAnimationToggle
       fallback="illustrations/heart/scene/brand-moments-capture-intro"
       source="illustrations/heart/scene/brand-moments-capture-intro"
       onEnded={(): void => setFirstAnimationComplete(true)}
+      autoplay={autoplay}
       loop={false}
+      hasVisibleAnimationToggle={shouldAlwaysShowAnimationToggle}
     />
   )
 }
diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
index cd9b731ff64..49b7ba40133 100644
--- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
+++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx
@@ -26,6 +26,7 @@ export const Playground: Story = {
 }
 
 export const Animated: Story = {
+  name: 'Animated Capture illustration on toggle',
   args: {
     loop: false,
     isAnimated: true,
@@ -33,6 +34,7 @@ export const Animated: Story = {
 }
 
 export const Looped: Story = {
+  name: 'Animated Capture illustration looped without autoplay',
   args: {
     isAnimated: true,
     loop: true,
@@ -40,10 +42,11 @@ export const Looped: Story = {
 }
 
 export const Autoplay: Story = {
+  name: 'Animated Capture illustration looped with autoplay',
   args: {
     isAnimated: true,
     loop: true,
-    autoplay: false,
+    autoplay: true,
   },
 }
 

From 4179090cc2198e91d3f0c02a3ce37c76a3309980 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 15:07:44 +1000
Subject: [PATCH 12/14] update VideoPlayer Base interaction styles

---
 .../Illustration/subcomponents/Base/Base.module.css   | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.module.css b/packages/components/src/Illustration/subcomponents/Base/Base.module.css
index e074d66bb78..de638c32393 100644
--- a/packages/components/src/Illustration/subcomponents/Base/Base.module.css
+++ b/packages/components/src/Illustration/subcomponents/Base/Base.module.css
@@ -12,12 +12,13 @@
   .pausePlayButton {
     opacity: 0;
     position: absolute;
-    left: var(--spacing-16);
-    bottom: var(--spacing-16);
+    left: 0;
+    bottom: 0;
     border-width: 1px;
     transition: all var(--animation-duration-immediate) ease;
 
     @media (hover: none) and (pointer: coarse) {
+      background: var(--color-gray-200);
       opacity: 1;
     }
   }
@@ -26,12 +27,12 @@
   .pausePlayButton:focus,
   .figure:hover .pausePlayButton {
     opacity: 1;
-    background: var(--color-blue-200);
-    color: var(--color-purple-900);
+    background: var(--color-gray-200);
+    border-color: var(--color-gray-600);
   }
 
   .hasVisibleAnimationToggle {
-    opacity: 1;
+    opacity: 1 !important;
   }
 
   .aspectRatioWrapper {

From 6513287208345179029f9136e506e9ab28e13e47 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 15:12:51 +1000
Subject: [PATCH 13/14] update Scene illustration docs

---
 packages/components/src/Illustration/Scene/_docs/Scene.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.mdx b/packages/components/src/Illustration/Scene/_docs/Scene.mdx
index 09acb28b5a5..23f95573264 100644
--- a/packages/components/src/Illustration/Scene/_docs/Scene.mdx
+++ b/packages/components/src/Illustration/Scene/_docs/Scene.mdx
@@ -25,4 +25,8 @@ import * as SceneStories from './Scene.stories'
 
 Some Scene illustrations have animated versions. Looped animation should be used sparingly as it can be distracting for users, especially those with motion sensitivity. Consider also the WCAG spec for [non-essential animations](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html).
 
+Note that all Scene illustration with `autoplay` and `loop` set to `true` will render the animation toggle.
+
+This can be overridden by setting `hasVisibleAnimationToggle` to `false`, which will render the toggle only on hover or focus. Note that this can have accessibility implications, so use with caution.
+
 <Canvas of={SceneStories.AnimatedScenes} />

From 5190a7c4b25eebb4f54fa283e997f58bf97438cf Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 1 Jul 2025 16:13:03 +1000
Subject: [PATCH 14/14] re-add specifier

---
 .../src/Illustration/subcomponents/Base/Base.module.css     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.module.css b/packages/components/src/Illustration/subcomponents/Base/Base.module.css
index de638c32393..db09a7d61cf 100644
--- a/packages/components/src/Illustration/subcomponents/Base/Base.module.css
+++ b/packages/components/src/Illustration/subcomponents/Base/Base.module.css
@@ -9,7 +9,7 @@
     position: relative;
   }
 
-  .pausePlayButton {
+  .figure .pausePlayButton {
     opacity: 0;
     position: absolute;
     left: 0;
@@ -23,8 +23,8 @@
     }
   }
 
-  .pausePlayButton:hover,
-  .pausePlayButton:focus,
+  .figure .pausePlayButton:hover,
+  .figure .pausePlayButton:focus,
   .figure:hover .pausePlayButton {
     opacity: 1;
     background: var(--color-gray-200);