diff --git a/.changeset/hero-banner-asset.md b/.changeset/hero-banner-asset.md
new file mode 100644
index 00000000000..eb2ffaea3cf
--- /dev/null
+++ b/.changeset/hero-banner-asset.md
@@ -0,0 +1,16 @@
+---
+'@graphcommerce/next-ui': minor
+---
+
+`HeroBanner` gains an `asset?: React.ReactNode` prop, and `videoSrc` is deprecated.
+
+The banner rendered a `<video>` itself, from a raw URL — so it could only ever hold a video, and left nowhere to hang a poster, the one place a poster matters most (a full-bleed autoplaying video above the fold). It now takes a node and renders it, the way its sibling `SpecialBanner` already does; positioning stays with the banner, stretching whatever is passed to fill via `& img, & video`.
+
+```diff
+- <HeroBanner videoSrc={asset.filename} … />
++ <HeroBanner asset={<Asset asset={asset} poster={poster} />} … />
+```
+
+Taking a node rather than a source also keeps `next-ui` free of any CMS: the Storyblok and Hygraph examples each pass their own `<Asset>`, both of which already render images and video.
+
+`videoSrc` still works but is deprecated: when set (and `asset` is not) it renders a bare autoplaying video, keeping the `HeroBanner-video` class. The only behavioural change on that path is that the scroll parallax is gone, along with the `framer-motion`, `useScrollY` and `clientSize` machinery it needed. Migrate to `asset` to regain images, posters, and control over how the media is rendered.
diff --git a/.changeset/storyblok-asset-poster.md b/.changeset/storyblok-asset-poster.md
new file mode 100644
index 00000000000..dc8b271a254
--- /dev/null
+++ b/.changeset/storyblok-asset-poster.md
@@ -0,0 +1,23 @@
+---
+'@graphcommerce/storyblok-ui': minor
+'@graphcommerce/image': minor
+---
+
+Let a Storyblok video asset show a poster.
+
+A `<video>` paints nothing until it has buffered enough for its first frame, and nothing at all when autoplay is blocked (iOS Low Power Mode) — so an autoplaying video banner starts out black, and can stay black. `Asset` now takes a `poster` prop, rendered as `<video poster>`.
+
+Storyblok's own `type: asset` has no room for a poster, so `assetWithPoster()` is added to read the convention of an asset value carrying an extra `poster` key:
+
+```jsonc
+{ "fieldtype": "asset", "id": 1, "filename": "…", "poster": { "filename": "…" } }
+```
+
+Keeping the poster beside the asset rather than nesting both under a wrapper means a custom field type storing that shape is a drop-in for a plain asset field: existing content stays valid and `value.filename` keeps working for consumers that ignore the poster. The narrowing is unavoidable — Storyblok has no JSONSchema for custom field types, so its type generator emits `unknown` for them.
+
+```tsx
+const { asset, poster } = assetWithPoster(blok.asset)
+return asset && <Asset asset={asset} poster={poster} />
+```
+
+`@graphcommerce/image` gains `imageUrl(src, { width, quality })`, which builds an optimized URL outside of a React tree — for the places that need a bare URL string rather than an `<Image>`, such as `<video poster>`, a CSS `background-image` or an `og:image`. It routes through the configured loader exactly like `<Image>` does, so the bytes are served and cached by your own deployment rather than fetched from the origin host by every visitor, which matters when the origin meters bandwidth. `width` is snapped up to the nearest configured size, since the optimizer rejects any width outside `imageSizes`/`deviceSizes`.
diff --git a/examples/magento-graphcms/components/GraphCMS/RowHeroBanner/RowHeroBanner.tsx b/examples/magento-graphcms/components/GraphCMS/RowHeroBanner/RowHeroBanner.tsx
index 1f531bd47f5..cd9c6e13dcf 100644
--- a/examples/magento-graphcms/components/GraphCMS/RowHeroBanner/RowHeroBanner.tsx
+++ b/examples/magento-graphcms/components/GraphCMS/RowHeroBanner/RowHeroBanner.tsx
@@ -1,10 +1,19 @@
-import { RichText } from '@graphcommerce/hygraph-ui'
+import type { AssetProps } from '@graphcommerce/hygraph-ui'
+import { Asset, RichText } from '@graphcommerce/hygraph-ui'
 import { breakpointVal, HeroBanner } from '@graphcommerce/next-ui'
 import { Button } from '@mui/material'
 import { RowHeroBannerFragment } from './RowHeroBanner.gql'
 
-export function RowHeroBanner(props: RowHeroBannerFragment) {
-  const { copy, heroAsset, pageLinks } = props
+export type RowHeroBannerProps = RowHeroBannerFragment & {
+  /**
+   * Only applies to an image asset — a video is never lazy-loaded. Pass
+   * `'eager'` where the banner is the LCP element.
+   */
+  loading?: AssetProps['loading']
+}
+
+export function RowHeroBanner(props: RowHeroBannerProps) {
+  const { copy, heroAsset, pageLinks, loading } = props
 
   return (
     <HeroBanner
@@ -13,7 +22,7 @@ export function RowHeroBanner(props: RowHeroBannerFragment) {
           {title}
         </Button>
       ))}
-      videoSrc={heroAsset.url}
+      asset={heroAsset && <Asset asset={heroAsset} loading={loading} sizes='100vw' />}
       sx={(theme) => ({
         '& .HeroBanner-copy': {
           minHeight: { xs: 'min(70vh,600px)', md: 'min(70vh,1080px)' },
diff --git a/examples/magento-storyblok/components/Blog/BlogItem.tsx b/examples/magento-storyblok/components/Blog/BlogItem.tsx
index 3049e0a02f5..79fc7eaf600 100644
--- a/examples/magento-storyblok/components/Blog/BlogItem.tsx
+++ b/examples/magento-storyblok/components/Blog/BlogItem.tsx
@@ -1,8 +1,8 @@
 import { BlogListItem } from '@graphcommerce/next-ui'
-import { Asset } from '@graphcommerce/storyblok-ui'
+import { Asset, assetWithPoster } from '@graphcommerce/storyblok-ui'
+import type { StoryblokStory } from '@graphcommerce/storyblok-ui'
 import { Trans } from '@lingui/react/macro'
 import { Typography, useTheme } from '@mui/material'
-import type { StoryblokStory } from '@graphcommerce/storyblok-ui'
 import type { StoryblokPage } from '../Storyblok/types'
 
 export type BlogItemProps = { story: StoryblokStory }
@@ -10,14 +10,15 @@ export type BlogItemProps = { story: StoryblokStory }
 export function BlogItem({ story }: BlogItemProps) {
   const theme = useTheme()
   const content = story.content as StoryblokPage
-  const asset = content?.asset
+  const { asset, poster } = assetWithPoster(content?.asset)
 
   return (
     <BlogListItem
       asset={
-        asset?.filename ? (
+        asset ? (
           <Asset
             asset={asset}
+            poster={poster}
             sizes={{
               0: '48vw',
               [theme.breakpoints.values.md]: '30vw',
diff --git a/examples/magento-storyblok/components/Storyblok/RowHeroBanner/RowHeroBanner.tsx b/examples/magento-storyblok/components/Storyblok/RowHeroBanner/RowHeroBanner.tsx
index 77feba0ca3c..d61e0c102ab 100644
--- a/examples/magento-storyblok/components/Storyblok/RowHeroBanner/RowHeroBanner.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowHeroBanner/RowHeroBanner.tsx
@@ -1,9 +1,28 @@
 import { breakpointVal, HeroBanner } from '@graphcommerce/next-ui'
-import { multilinkHref, RichText, storyblokEditable } from '@graphcommerce/storyblok-ui'
+import type { AssetProps } from '@graphcommerce/storyblok-ui'
+import {
+  Asset,
+  assetWithPoster,
+  multilinkHref,
+  RichText,
+  storyblokEditable,
+} from '@graphcommerce/storyblok-ui'
 import { Button } from '@mui/material'
 import type { StoryblokRowHeroBanner as RowHeroBannerBlok } from '../types'
 
-export function RowHeroBanner({ blok }: { blok: RowHeroBannerBlok }) {
+export type RowHeroBannerProps = {
+  blok: RowHeroBannerBlok
+  /**
+   * Only applies to an image asset — a video is never lazy-loaded. Pass
+   * `'eager'` where the banner is the LCP element, via `RowRenderer`'s
+   * `renderer`.
+   */
+  loading?: AssetProps['loading']
+}
+
+export function RowHeroBanner({ blok, loading }: RowHeroBannerProps) {
+  const { asset, poster } = assetWithPoster(blok.asset)
+
   return (
     <HeroBanner
       {...storyblokEditable(blok)}
@@ -18,7 +37,7 @@ export function RowHeroBanner({ blok }: { blok: RowHeroBannerBlok }) {
           {link.title}
         </Button>
       ))}
-      videoSrc={blok.asset?.filename ?? ''}
+      asset={asset && <Asset asset={asset} poster={poster} loading={loading} />}
       sx={(theme) => ({
         '& .HeroBanner-copy': {
           minHeight: { xs: 'min(70vh,600px)', md: 'min(70vh,1080px)' },
diff --git a/examples/magento-storyblok/components/Storyblok/RowLinks/variant/ImageLabelSwiper.tsx b/examples/magento-storyblok/components/Storyblok/RowLinks/variant/ImageLabelSwiper.tsx
index a96885462ac..ecdb2a1a526 100644
--- a/examples/magento-storyblok/components/Storyblok/RowLinks/variant/ImageLabelSwiper.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowLinks/variant/ImageLabelSwiper.tsx
@@ -1,5 +1,11 @@
 import { responsiveVal, VariantImageLabelSwiper } from '@graphcommerce/next-ui'
-import { Asset, multilinkHref, RichText, storyblokEditable } from '@graphcommerce/storyblok-ui'
+import {
+  Asset,
+  assetWithPoster,
+  multilinkHref,
+  RichText,
+  storyblokEditable,
+} from '@graphcommerce/storyblok-ui'
 import { Box, ButtonBase, Typography } from '@mui/material'
 import type { RowLinksVariantProps } from '../RowLinks'
 
@@ -12,40 +18,45 @@ export function ImageLabelSwiper(props: RowLinksVariantProps) {
       copy={copy ? <RichText content={copy} /> : undefined}
       sx={{ '& .Scroller-root': { alignItems: 'start' } }}
     >
-      {page_links?.map((pageLink) => (
-        <ButtonBase
-          {...storyblokEditable(pageLink)}
-          href={multilinkHref(pageLink.url)}
-          key={pageLink._uid}
-          sx={(theme) => ({
-            display: 'flex',
-            flexDirection: 'column',
-            textAlign: 'center',
-            rowGap: theme.spacings.xs,
-            '& img, & video': { display: 'block' },
-          })}
-        >
-          <>
-            {pageLink.asset && (
-              <Asset
-                asset={pageLink.asset}
-                sx={{
-                  width: responsiveVal(260, 400),
-                  maxWidth: responsiveVal(260, 400),
-                  borderRadius: 3,
-                }}
-                sizes={responsiveVal(260, 400)}
-              />
-            )}
-            <Box sx={{ maxWidth: responsiveVal(260, 400) }}>
-              <Typography variant='h6' component='h3'>
-                {pageLink.title}
-              </Typography>
-              {pageLink.description && <RichText content={pageLink.description} />}
-            </Box>
-          </>
-        </ButtonBase>
-      ))}
+      {page_links?.map((pageLink) => {
+        const { asset, poster } = assetWithPoster(pageLink.asset)
+
+        return (
+          <ButtonBase
+            {...storyblokEditable(pageLink)}
+            href={multilinkHref(pageLink.url)}
+            key={pageLink._uid}
+            sx={(theme) => ({
+              display: 'flex',
+              flexDirection: 'column',
+              textAlign: 'center',
+              rowGap: theme.spacings.xs,
+              '& img, & video': { display: 'block' },
+            })}
+          >
+            <>
+              {asset && (
+                <Asset
+                  asset={asset}
+                  poster={poster}
+                  sx={{
+                    width: responsiveVal(260, 400),
+                    maxWidth: responsiveVal(260, 400),
+                    borderRadius: 3,
+                  }}
+                  sizes={responsiveVal(260, 400)}
+                />
+              )}
+              <Box sx={{ maxWidth: responsiveVal(260, 400) }}>
+                <Typography variant='h6' component='h3'>
+                  {pageLink.title}
+                </Typography>
+                {pageLink.description && <RichText content={pageLink.description} />}
+              </Box>
+            </>
+          </ButtonBase>
+        )
+      })}
     </VariantImageLabelSwiper>
   )
 }
diff --git a/examples/magento-storyblok/components/Storyblok/RowLinks/variant/LogoSwiper.tsx b/examples/magento-storyblok/components/Storyblok/RowLinks/variant/LogoSwiper.tsx
index 51c39ef1576..7764a868db5 100644
--- a/examples/magento-storyblok/components/Storyblok/RowLinks/variant/LogoSwiper.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowLinks/variant/LogoSwiper.tsx
@@ -1,6 +1,7 @@
 import { VariantLogoSwiper } from '@graphcommerce/next-ui'
 import {
   Asset,
+  assetWithPoster,
   multilinkHref,
   parseDimensions,
   storyblokEditable,
@@ -17,42 +18,45 @@ export function LogoSwiper(props: RowLinksVariantProps) {
       maxWidth={false}
       sx={(theme) => ({ my: `calc(${theme.spacings.xxl} + ${theme.spacings.md})` })}
     >
-      {page_links?.map((pageLink) => (
-        <Link
-          {...storyblokEditable(pageLink)}
-          href={multilinkHref(pageLink.url)}
-          key={pageLink._uid}
-          color='inherit'
-          underline='hover'
-          sx={{ '& img, & video': { display: 'block' } }}
-        >
-          {pageLink.asset && (
-            <Asset
-              asset={pageLink.asset}
-              sizes={{ 0: '120px', 960: '240px' }}
-              sx={(theme) => {
-                const dimensions = pageLink.asset?.filename
-                  ? parseDimensions(pageLink.asset.filename)
-                  : null
+      {page_links?.map((pageLink) => {
+        const { asset, poster } = assetWithPoster(pageLink.asset)
 
-                return {
-                  ...(dimensions && {
-                    width: () => {
-                      const widthBase = 60
-                      const scaleFactor = 0.525
-                      const imageRatio = dimensions.width / dimensions.height
-                      const w = imageRatio ** scaleFactor * widthBase
-                      return { xs: w * 0.65, sm: w * 0.8, md: w * 0.9, lg: w }
-                    },
-                  }),
-                  filter: 'none',
-                  ...theme.applyStyles('dark', { filter: 'invert(100%)' }),
-                }
-              }}
-            />
-          )}
-        </Link>
-      ))}
+        return (
+          <Link
+            {...storyblokEditable(pageLink)}
+            href={multilinkHref(pageLink.url)}
+            key={pageLink._uid}
+            color='inherit'
+            underline='hover'
+            sx={{ '& img, & video': { display: 'block' } }}
+          >
+            {asset && (
+              <Asset
+                asset={asset}
+                poster={poster}
+                sizes={{ 0: '120px', 960: '240px' }}
+                sx={(theme) => {
+                  const dimensions = parseDimensions(asset.filename ?? '')
+
+                  return {
+                    ...(dimensions && {
+                      width: () => {
+                        const widthBase = 60
+                        const scaleFactor = 0.525
+                        const imageRatio = dimensions.width / dimensions.height
+                        const w = imageRatio ** scaleFactor * widthBase
+                        return { xs: w * 0.65, sm: w * 0.8, md: w * 0.9, lg: w }
+                      },
+                    }),
+                    filter: 'none',
+                    ...theme.applyStyles('dark', { filter: 'invert(100%)' }),
+                  }
+                }}
+              />
+            )}
+          </Link>
+        )
+      })}
     </VariantLogoSwiper>
   )
 }
diff --git a/examples/magento-storyblok/components/Storyblok/RowPdp/variant/Feature/Feature.tsx b/examples/magento-storyblok/components/Storyblok/RowPdp/variant/Feature/Feature.tsx
index bd567524feb..932ccc27168 100644
--- a/examples/magento-storyblok/components/Storyblok/RowPdp/variant/Feature/Feature.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowPdp/variant/Feature/Feature.tsx
@@ -1,6 +1,6 @@
 import { Image } from '@graphcommerce/image'
 import { ImageText, responsiveVal, useContainerSpacing } from '@graphcommerce/next-ui'
-import { Asset, RichText } from '@graphcommerce/storyblok-ui'
+import { Asset, assetWithPoster, RichText } from '@graphcommerce/storyblok-ui'
 import { Typography, useTheme } from '@mui/material'
 import type { RowPdpVariantProps } from '../../RowPdp'
 
@@ -9,12 +9,13 @@ export function Feature(props: RowPdpVariantProps) {
   const theme = useTheme()
   const item = media_gallery?.[2] ?? media_gallery?.[0]
   const { size, breakpoint } = useContainerSpacing({ sizing: 'content' })
+  const { asset, poster } = assetWithPoster(blok.asset)
 
   return (
     <ImageText
       item={
-        blok.asset?.filename ? (
-          <Asset asset={blok.asset} sizes={responsiveVal(100, 600)} />
+        asset ? (
+          <Asset asset={asset} poster={poster} sizes={responsiveVal(100, 600)} />
         ) : item?.__typename === 'ProductImage' && item.url ? (
           <Image
             alt={item.label ?? 'Product Image'}
diff --git a/examples/magento-storyblok/components/Storyblok/RowPdp/variant/FeatureBoxed/FeatureBoxed.tsx b/examples/magento-storyblok/components/Storyblok/RowPdp/variant/FeatureBoxed/FeatureBoxed.tsx
index 5a4d33dcdf2..3bd79ee43fa 100644
--- a/examples/magento-storyblok/components/Storyblok/RowPdp/variant/FeatureBoxed/FeatureBoxed.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowPdp/variant/FeatureBoxed/FeatureBoxed.tsx
@@ -1,6 +1,6 @@
 import { Image } from '@graphcommerce/image'
 import { ImageTextBoxed, responsiveVal } from '@graphcommerce/next-ui'
-import { Asset, RichText } from '@graphcommerce/storyblok-ui'
+import { Asset, assetWithPoster, RichText } from '@graphcommerce/storyblok-ui'
 import { Typography, useTheme } from '@mui/material'
 import type { RowPdpVariantProps } from '../../RowPdp'
 
@@ -8,12 +8,13 @@ export function FeatureBoxed(props: RowPdpVariantProps) {
   const { blok, media_gallery } = props
   const theme = useTheme()
   const item = media_gallery?.[1] ?? media_gallery?.[0]
+  const { asset, poster } = assetWithPoster(blok.asset)
 
   return (
     <ImageTextBoxed
       item={
-        blok.asset?.filename ? (
-          <Asset asset={blok.asset} sizes='50vw' />
+        asset ? (
+          <Asset asset={asset} poster={poster} sizes='50vw' />
         ) : item?.__typename === 'ProductImage' && item.url ? (
           <Image
             alt={item.label ?? 'Product Image'}
diff --git a/examples/magento-storyblok/components/Storyblok/RowProduct/variant/Backstory/Backstory.tsx b/examples/magento-storyblok/components/Storyblok/RowProduct/variant/Backstory/Backstory.tsx
index 2e0d5739d8c..c9e9cda045d 100644
--- a/examples/magento-storyblok/components/Storyblok/RowProduct/variant/Backstory/Backstory.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowProduct/variant/Backstory/Backstory.tsx
@@ -1,6 +1,6 @@
-import { Asset, RichText } from '@graphcommerce/storyblok-ui'
 import { AddProductsToCartForm } from '@graphcommerce/magento-product'
 import { ParagraphWithSidebarSlide, RenderType } from '@graphcommerce/next-ui'
+import { Asset, assetWithPoster, RichText } from '@graphcommerce/storyblok-ui'
 import { useTheme } from '@mui/material'
 import { productListRenderer } from '../../../../ProductListItems/productListRenderer'
 import type { RowProductVariantProps } from '../../RowProduct'
@@ -9,6 +9,7 @@ export function Backstory(props: RowProductVariantProps) {
   const { blok, items } = props
   const theme = useTheme()
   const singleItem = items?.[(items.length ?? 1) - 1]
+  const { asset, poster } = assetWithPoster(blok.asset)
 
   if (!singleItem) return null
 
@@ -16,9 +17,10 @@ export function Backstory(props: RowProductVariantProps) {
     <AddProductsToCartForm>
       <ParagraphWithSidebarSlide
         background={
-          blok.asset?.filename ? (
+          asset ? (
             <Asset
-              asset={blok.asset}
+              asset={asset}
+              poster={poster}
               sizes={{ 0: '50vw', [theme.breakpoints.values.md]: '72vw' }}
             />
           ) : undefined
diff --git a/examples/magento-storyblok/components/Storyblok/RowSpecialBanner/RowSpecialBanner.tsx b/examples/magento-storyblok/components/Storyblok/RowSpecialBanner/RowSpecialBanner.tsx
index 87c165db391..59d51ebd3c6 100644
--- a/examples/magento-storyblok/components/Storyblok/RowSpecialBanner/RowSpecialBanner.tsx
+++ b/examples/magento-storyblok/components/Storyblok/RowSpecialBanner/RowSpecialBanner.tsx
@@ -1,14 +1,22 @@
 import { breakpointVal, SpecialBanner } from '@graphcommerce/next-ui'
-import { Asset, multilinkHref, RichText, storyblokEditable } from '@graphcommerce/storyblok-ui'
+import {
+  Asset,
+  assetWithPoster,
+  multilinkHref,
+  RichText,
+  storyblokEditable,
+} from '@graphcommerce/storyblok-ui'
 import { Link } from '@mui/material'
 import type { StoryblokRowSpecialBanner as RowSpecialBannerBlok } from '../types'
 
 export function RowSpecialBanner({ blok }: { blok: RowSpecialBannerBlok }) {
+  const { asset, poster } = assetWithPoster(blok.asset)
+
   return (
     <SpecialBanner
       {...storyblokEditable(blok)}
       topic={blok.topic}
-      asset={blok.asset?.filename ? <Asset asset={blok.asset} sizes='50vw' /> : undefined}
+      asset={asset ? <Asset asset={asset} poster={poster} sizes='50vw' /> : undefined}
       pageLinks={blok.page_links?.map((link) => (
         <Link
           {...storyblokEditable(link)}
diff --git a/examples/magento-storyblok/components/Usps/Usps.tsx b/examples/magento-storyblok/components/Usps/Usps.tsx
index 9fc0fe8a80c..eede0397c91 100644
--- a/examples/magento-storyblok/components/Usps/Usps.tsx
+++ b/examples/magento-storyblok/components/Usps/Usps.tsx
@@ -1,7 +1,13 @@
 import { UspList, UspListItem, type UspListProps } from '@graphcommerce/next-ui'
-import { Asset, RichText, storyblokEditable } from '@graphcommerce/storyblok-ui'
+import { Asset, assetWithPoster, RichText, storyblokEditable } from '@graphcommerce/storyblok-ui'
 import type { StoryblokPageLink } from '../Storyblok/types'
 
+function UspIcon({ usp }: { usp: StoryblokPageLink }) {
+  const { asset, poster } = assetWithPoster(usp.asset)
+  if (!asset) return null
+  return <Asset asset={asset} poster={poster} sizes='50px' unoptimized />
+}
+
 export type UspsProps = {
   usps?: StoryblokPageLink[] | null
 } & Pick<UspListProps, 'size'>
@@ -18,7 +24,7 @@ export function Usps(props: UspsProps) {
           {...storyblokEditable(usp)}
           key={usp._uid}
           text={usp.description ? <RichText content={usp.description} /> : (usp.title ?? '')}
-          icon={usp.asset?.filename ? <Asset asset={usp.asset} sizes='50px' unoptimized /> : null}
+          icon={<UspIcon usp={usp} />}
           size={size}
         />
       ))}
diff --git a/examples/magento-storyblok/pages/[...url].tsx b/examples/magento-storyblok/pages/[...url].tsx
index 4e2b7057a3f..5ca707b518e 100644
--- a/examples/magento-storyblok/pages/[...url].tsx
+++ b/examples/magento-storyblok/pages/[...url].tsx
@@ -35,7 +35,12 @@ import {
 } from '@graphcommerce/next-config/config'
 import { Container, LayoutHeader, LayoutTitle, revalidate } from '@graphcommerce/next-ui'
 import type { GetStaticProps } from '@graphcommerce/next-ui'
-import { Asset, fetchStory, type StoryblokStory } from '@graphcommerce/storyblok-ui'
+import {
+  Asset,
+  assetWithPoster,
+  fetchStory,
+  type StoryblokStory,
+} from '@graphcommerce/storyblok-ui'
 import { t } from '@lingui/core/macro'
 import type { GetStaticPaths } from 'next'
 import type { LayoutNavigationProps } from '../components'
@@ -73,6 +78,7 @@ function CategoryPage(props: CategoryProps) {
     category: categories?.items?.[0],
   })
   const { products, params, category } = productList
+  const { asset, poster } = assetWithPoster(story?.content?.asset)
 
   const isLanding = category?.display_mode === 'PAGE'
   const isCategory = params && category && products?.items
@@ -102,11 +108,7 @@ function CategoryPage(props: CategoryProps) {
           )}
           <CategoryHeroNav
             {...category}
-            asset={
-              story?.content?.asset?.filename && (
-                <Asset asset={story.content.asset} loading='eager' />
-              )
-            }
+            asset={asset && <Asset asset={asset} poster={poster} loading='eager' />}
             title={<CategoryHeroNavTitle>{category?.name}</CategoryHeroNavTitle>}
           />
         </>
diff --git a/examples/magento-storyblok/pages/blog/[...url].tsx b/examples/magento-storyblok/pages/blog/[...url].tsx
index 360d8417922..1a6152430fb 100644
--- a/examples/magento-storyblok/pages/blog/[...url].tsx
+++ b/examples/magento-storyblok/pages/blog/[...url].tsx
@@ -18,6 +18,7 @@ import {
 } from '@graphcommerce/next-ui'
 import {
   Asset,
+  assetWithPoster,
   fetchAllStories,
   fetchStories,
   fetchStory,
@@ -43,6 +44,7 @@ function BlogPostPage(props: Props) {
   const content = story?.content
   const title = story?.name ?? ''
   const slug = story?.full_slug ?? ''
+  const { asset, poster } = assetWithPoster(content?.asset)
 
   return (
     <>
@@ -83,9 +85,7 @@ function BlogPostPage(props: Props) {
         {content?.author && content?.date && (
           <BlogAuthor author={content.author} date={content.date} />
         )}
-        {content?.asset?.filename && (
-          <BlogHeader asset={<Asset asset={content.asset} loading='eager' />} />
-        )}
+        {asset && <BlogHeader asset={<Asset asset={asset} poster={poster} loading='eager' />} />}
         {content?.body && <RowRenderer content={content.body} />}
         {story?.tag_list && story.tag_list.length > 0 && (
           <BlogTags>
diff --git a/packages/image/config/config.ts b/packages/image/config/config.ts
index 9fd08e6d250..284d459e00d 100644
--- a/packages/image/config/config.ts
+++ b/packages/image/config/config.ts
@@ -130,3 +130,44 @@ export function customLoader({ src }: ImageLoaderProps): string {
       '\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader',
   )
 }
+
+const urlLoaders = {
+  default: defaultLoader,
+  imgix: imgixLoader,
+  cloudinary: cloudinaryLoader,
+  akamai: akamaiLoader,
+}
+
+/**
+ * Build an optimized image URL outside of a React tree, for the places that
+ * need a bare URL string rather than an `<Image>` — `<video poster>`, a CSS
+ * `background-image`, an `og:image`.
+ *
+ * Routes through the configured loader exactly like `<Image>` does, so the
+ * bytes are served and cached by your own deployment rather than fetched from
+ * the origin host by every visitor. That matters when the origin meters
+ * bandwidth.
+ *
+ * `width` is snapped up to the nearest configured size: the optimizer rejects
+ * any width outside `imageSizes`/`deviceSizes` with a 400. Format is negotiated
+ * by the optimizer on the request's `Accept` header and can't be pinned here.
+ *
+ * Returns `src` untouched under a `custom` loader, which exists only as a
+ * per-`<Image>` prop and so can't be resolved from here.
+ */
+export function imageUrl(src: string, options: { width: number; quality?: number }): string {
+  const { width, quality = 75 } = options
+  if (configLoader === 'custom') return src
+
+  const config =
+    (process.env.__NEXT_IMAGE_OPTS as unknown as ImageConfigComplete) || imageConfigDefault
+  const allSizes = [...configImageSizes, ...configDeviceSizes].sort((a, b) => a - b)
+  const snapped = allSizes.find((size) => size >= width) ?? allSizes[allSizes.length - 1]
+
+  return (urlLoaders[configLoader] ?? defaultLoader)({
+    config: { ...config, allSizes },
+    src,
+    width: snapped,
+    quality,
+  })
+}
diff --git a/packages/image/index.ts b/packages/image/index.ts
index 081f914d8f6..723b4758da4 100644
--- a/packages/image/index.ts
+++ b/packages/image/index.ts
@@ -1 +1,2 @@
 export * from './components/Image'
+export { imageUrl } from './config/config'
diff --git a/packages/next-ui/Row/HeroBanner/HeroBanner.tsx b/packages/next-ui/Row/HeroBanner/HeroBanner.tsx
index 377fb4ef5a3..646a44df5bf 100644
--- a/packages/next-ui/Row/HeroBanner/HeroBanner.tsx
+++ b/packages/next-ui/Row/HeroBanner/HeroBanner.tsx
@@ -1,32 +1,37 @@
-import { clientSize } from '@graphcommerce/framer-utils'
-import { sxx } from '@graphcommerce/next-ui'
 import type { ContainerProps, SxProps, Theme } from '@mui/material'
-import { Box, styled } from '@mui/material'
-import { m, useTransform } from 'framer-motion'
+import { Box } from '@mui/material'
 import React from 'react'
-import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { extendableComponent, responsiveVal } from '../../Styles'
 import { Row } from '../Row'
 
 export type HeroBannerProps = ContainerProps & {
   pageLinks: React.ReactNode
-  videoSrc: string
+  /**
+   * Rendered full-bleed behind the copy. Takes a node rather than a source, so
+   * the banner is agnostic about what fills it — an image, a video, a CMS
+   * component. See `SpecialBanner`, which takes its asset the same way.
+   */
+  asset?: React.ReactNode
+  /**
+   * @deprecated Pass an `asset` node instead — e.g. `<Asset asset={…} />`,
+   * which also renders images and can carry a poster. When set (and `asset`
+   * is not), it renders a bare autoplaying video, without the scroll parallax
+   * earlier versions applied.
+   */
+  videoSrc?: string
   children: React.ReactNode
   sx?: SxProps<Theme>
 }
 
 const compName = 'HeroBanner'
+// `video` and `animated` are unused since the banner stopped rendering its own
+// motion video, but stay in the parts list so the generated class names remain
+// available to consumers targeting them in global CSS.
 const parts = ['root', 'wrapper', 'copy', 'asset', 'animated', 'video'] as const
 const { classes } = extendableComponent(compName, parts)
 
-const MotionVideo = styled(m.video)({})
-
 export function HeroBanner(props: HeroBannerProps) {
-  const { pageLinks, videoSrc, children, sx = [], ...containerProps } = props
-  const scrollY = useScrollY()
-  const scale = useTransform([scrollY, clientSize.y], ([scrollYCurr, clientSizeYCurr]: number[]) =>
-    clientSizeYCurr ? (scrollYCurr / clientSizeYCurr) * 1.7 + 1 : 1,
-  )
+  const { pageLinks, asset, videoSrc, children, sx = [], ...containerProps } = props
 
   return (
     <Row maxWidth={false} {...containerProps} className={classes.root} sx={sx}>
@@ -60,25 +65,28 @@ export function HeroBanner(props: HeroBannerProps) {
           sx={{
             gridArea: '1 / 1',
             position: 'relative',
-          }}
-        >
-          <MotionVideo
-            src={videoSrc}
-            autoPlay
-            muted
-            loop
-            playsInline
-            disableRemotePlayback
-            className={classes.video}
-            style={{ scale }}
-            sx={{
+            // The banner sizes itself from its copy, so whatever is passed has
+            // to fill the box rather than dictate it.
+            '& img, & video': {
               position: 'absolute',
-              transition: 'transform 0.5s cubic-bezier(0.33, 1, 0.68, 1)',
               objectFit: 'cover',
               width: '100%',
               height: '100%',
-            }}
-          />
+            },
+          }}
+        >
+          {asset ??
+            (videoSrc ? (
+              <video
+                src={videoSrc}
+                autoPlay
+                muted
+                loop
+                playsInline
+                disableRemotePlayback
+                className={classes.video}
+              />
+            ) : null)}
         </Box>
       </Box>
     </Row>
diff --git a/packages/storyblok-ui/assetWithPoster.ts b/packages/storyblok-ui/assetWithPoster.ts
new file mode 100644
index 00000000000..3e05751563a
--- /dev/null
+++ b/packages/storyblok-ui/assetWithPoster.ts
@@ -0,0 +1,56 @@
+import type { StoryblokAssetData } from './types'
+
+export type AssetWithPoster = {
+  asset: StoryblokAssetData | undefined
+  /** Only meaningful when `asset` is a video; see `Asset`'s `poster` prop. */
+  poster: StoryblokAssetData | undefined
+}
+
+/**
+ * A usable `filename` is the only thing `StoryblokAssetData` actually requires,
+ * and the only thing an empty asset field lacks — Storyblok stores that as an
+ * object with a null `filename` rather than as null. So this checks exactly
+ * that and passes the value through whole, rather than projecting it onto a
+ * subset: `focus`, `width`, `title` and the rest have to survive for consumers
+ * that read them.
+ */
+function coerceAsset(value: unknown): StoryblokAssetData | undefined {
+  if (typeof value !== 'object' || value === null) return undefined
+  const asset = value as StoryblokAssetData
+  return typeof asset.filename === 'string' && asset.filename !== '' ? asset : undefined
+}
+
+/**
+ * Narrow an asset field's value into an asset and an optional poster.
+ *
+ * A video shows nothing until it has buffered enough to paint its first frame,
+ * and nothing at all when autoplay is blocked (iOS Low Power Mode) — so a
+ * video-bearing asset field wants a still alongside it. Storyblok's own
+ * `type: asset` has no room for one, so this reads the convention of an asset
+ * value carrying an extra `poster` key:
+ *
+ * ```jsonc
+ * { "fieldtype": "asset", "id": 1, "filename": "…", "poster": { "filename": "…" } }
+ * ```
+ *
+ * Keeping the poster *beside* the asset rather than nesting both under a
+ * wrapper is what makes such a field a drop-in for a plain `type: asset`:
+ * existing content stays valid and `value.filename` keeps working for consumers
+ * that ignore the poster. A field type storing that shape can therefore replace
+ * an asset field without a content migration.
+ *
+ * The narrowing is unavoidable: Storyblok has no JSONSchema for custom field
+ * types, so its type generator emits `unknown` for them no matter how the value
+ * is shaped.
+ *
+ * @example
+ * ```tsx
+ * const { asset, poster } = assetWithPoster(blok.asset)
+ * return asset && <Asset asset={asset} poster={poster} />
+ * ```
+ */
+export function assetWithPoster(value: unknown): AssetWithPoster {
+  if (typeof value !== 'object' || value === null) return { asset: undefined, poster: undefined }
+  const v = value as Record<string, unknown>
+  return { asset: coerceAsset(v), poster: coerceAsset(v.poster) }
+}
diff --git a/packages/storyblok-ui/components/Asset.tsx b/packages/storyblok-ui/components/Asset.tsx
index 966390d1886..e853c27841a 100644
--- a/packages/storyblok-ui/components/Asset.tsx
+++ b/packages/storyblok-ui/components/Asset.tsx
@@ -1,5 +1,5 @@
 import type { ImageProps } from '@graphcommerce/image'
-import { Image } from '@graphcommerce/image'
+import { Image, imageUrl } from '@graphcommerce/image'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import { memo } from 'react'
@@ -8,11 +8,24 @@ import { isSvg, isVideo, parseDimensions } from '../utils'
 
 export type AssetProps = {
   asset: StoryblokAssetData
+  /**
+   * Still shown until the video has buffered enough to paint its first frame,
+   * and the only thing shown at all when autoplay is blocked (iOS Low Power
+   * Mode). Ignored when `asset` isn't a video.
+   */
+  poster?: StoryblokAssetData
   sx?: SxProps<Theme>
 } & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>
 
 const Video = styled('video')({})
 
+// The poster only has to bridge the gap until the video paints, so it is
+// requested at a width that covers a full-bleed banner on common displays
+// rather than at the source resolution — a multi-MB still would compete with
+// the video for bandwidth and defeat its own purpose. 1200 is a default
+// `deviceSize`, so it survives `imageUrl`'s snapping unchanged.
+const POSTER_WIDTH = 1200
+
 // Storyblok encodes image dimensions in the CDN URL (`/WxH/`), but its image
 // processor only runs for uploads made through the web UI. Assets uploaded via
 // the Management API — which is what the CLI's `assets push` (used by our
@@ -29,13 +42,24 @@ const FALLBACK_WIDTH = 500
 const FALLBACK_HEIGHT = 500
 
 function AssetBase(props: AssetProps) {
-  const { asset, sx = [], ...imgProps } = props
+  const { asset, poster, sx = [], ...imgProps } = props
 
   if (!asset.filename) return null
 
   if (isVideo(asset.filename)) {
     return (
-      <Video src={asset.filename} autoPlay muted loop playsInline disableRemotePlayback sx={sx} />
+      <Video
+        src={asset.filename}
+        poster={
+          poster?.filename ? imageUrl(poster.filename, { width: POSTER_WIDTH }) : undefined
+        }
+        autoPlay
+        muted
+        loop
+        playsInline
+        disableRemotePlayback
+        sx={sx}
+      />
     )
   }
 
diff --git a/packages/storyblok-ui/index.ts b/packages/storyblok-ui/index.ts
index d0abb4503cb..fb16097d124 100644
--- a/packages/storyblok-ui/index.ts
+++ b/packages/storyblok-ui/index.ts
@@ -1,3 +1,4 @@
+export * from './assetWithPoster'
 export * from './components'
 export * from './lib'
 export * from './types'