diff --git a/apps/e2e/shared/fixtures/selectors.ts b/apps/e2e/shared/fixtures/selectors.ts
index 3740aa3f09..3528e2bd60 100644
--- a/apps/e2e/shared/fixtures/selectors.ts
+++ b/apps/e2e/shared/fixtures/selectors.ts
@@ -83,7 +83,7 @@ export const SELECTORS = {
     'time[data-type="remaining"]',
   ].join(', '),
   timeToggle: 'media-time[toggle], time[role="button"][data-type]',
-  poster: 'media-poster, img[data-loaded]',
+  poster: 'media-poster, .media-poster',
   bufferingIndicator: 'media-buffering-indicator, .media-buffering-indicator',
   thumbnail: 'media-slider-thumbnail, .media-slider-thumbnail-image, [role="img"]:has(> img[aria-hidden="true"])',
 
diff --git a/apps/e2e/suites/player/tests/skin-container.spec.ts b/apps/e2e/suites/player/tests/skin-container.spec.ts
index 828d8bac6b..6c75c46097 100644
--- a/apps/e2e/suites/player/tests/skin-container.spec.ts
+++ b/apps/e2e/suites/player/tests/skin-container.spec.ts
@@ -7,9 +7,9 @@ const SOURCE_SKINS = [
 
 const POSTER_SKINS = [
   { framework: 'packaged HTML', path: '/pages/html-video-mp4.html', selector: 'img[slot="poster"]' },
-  { framework: 'packaged React', path: '/pages/react-video-mp4.html', selector: '.media-skin > img' },
+  { framework: 'packaged React', path: '/pages/react-video-mp4.html', selector: '.media-poster img' },
   { framework: 'VJSC HTML', path: '/pages/source-html-video-mp4.html', selector: 'media-poster img' },
-  { framework: 'VJSC React', path: '/pages/source-react-video-mp4.html', selector: 'img.media-poster' },
+  { framework: 'VJSC React', path: '/pages/source-react-video-mp4.html', selector: '.media-poster img' },
 ] as const;
 
 for (const { framework, path } of SOURCE_SKINS) {
@@ -21,11 +21,11 @@ for (const { framework, path } of SOURCE_SKINS) {
 
     test('renders media and poster in one container composition', async ({ page }) => {
       const skin = page.locator('[data-source-skin]');
-      const posterImage = skin.locator('media-poster img, img.media-poster').first();
+      const posterImage = skin.locator('media-poster img, .media-poster img').first();
 
       await expect(skin).toBeAttached();
       await expect(page.locator('video')).toBeAttached();
-      await expect(skin.locator('media-poster, img.media-poster')).toBeAttached();
+      await expect(skin.locator('media-poster, .media-poster')).toBeAttached();
       await expect(skin.locator('media-controls-content, .video-controls')).toBeAttached();
       await expect(skin.locator('media-controls-backdrop, .video-controls-backdrop')).toBeAttached();
       await expect(skin.locator('media-seek-button, .media-seek-button')).toHaveCount(0);
@@ -33,7 +33,7 @@ for (const { framework, path } of SOURCE_SKINS) {
     });
 
     test('hides the poster once playback starts', async ({ page }) => {
-      const poster = page.locator('media-poster, img.media-poster').first();
+      const poster = page.locator('media-poster, .media-poster').first();
 
       await expect(poster).toHaveAttribute('data-visible', '');
       await expect(poster).toHaveCSS('opacity', '1');
diff --git a/apps/e2e/suites/skin-parity/tests/vjsc-video-skin-styling.spec.ts b/apps/e2e/suites/skin-parity/tests/vjsc-video-skin-styling.spec.ts
index 1311595af4..2dbf4410fb 100644
--- a/apps/e2e/suites/skin-parity/tests/vjsc-video-skin-styling.spec.ts
+++ b/apps/e2e/suites/skin-parity/tests/vjsc-video-skin-styling.spec.ts
@@ -725,7 +725,7 @@ async function preparePanel({ root }: SkinPanel, width: number) {
   await expect(root).toHaveAttribute('data-controls-visible', '');
   await expect(root.getByRole('button', { name: 'Play' })).toBeVisible();
 
-  const poster = root.locator('img[data-loaded], media-poster[data-loaded]').first();
+  const poster = root.locator('.media-poster[data-loaded], media-poster[data-loaded]').first();
 
   await expect(poster).toBeVisible();
   await expect(poster).toHaveCSS('opacity', '1');
@@ -1525,7 +1525,7 @@ async function sharedMotionContract(root: Locator) {
     });
   const controls = root.locator(CONTROLS_SELECTOR).first();
   const button = root.getByRole('button', { name: 'Play', exact: true });
-  const poster = root.locator(':scope > .media-poster, :scope > img, :scope > media-poster').first();
+  const poster = root.locator(':scope > .media-poster, :scope > media-poster').first();
   const settingsIcon = root.getByRole('button', { name: 'Settings', exact: true }).locator('svg, media-icon').first();
   const playIconCandidates = await root
     .getByRole('button', { name: 'Play', exact: true })
@@ -1872,7 +1872,7 @@ async function reducedMotionContract(root: Locator, menu: Locator, tooltipDurati
       })
     )
   );
-  const poster = root.locator(':scope > .media-poster, :scope > img, :scope > media-poster').first();
+  const poster = root.locator(':scope > .media-poster, :scope > media-poster').first();
   const settingsIcon = root.getByRole('button', { name: 'Settings', exact: true }).locator('svg, media-icon').first();
   const seekThumb = root.getByRole('slider', { name: 'Seek' });
   const seekSlider = seekThumb.locator('..');
@@ -1986,7 +1986,7 @@ async function layoutContract(root: Locator) {
 
     return {
       root: inspect(element),
-      poster: inspect(query('img[data-loaded], media-poster[data-loaded]'), { includeRadius: false }),
+      poster: inspect(query('.media-poster[data-loaded], media-poster[data-loaded]'), { includeRadius: false }),
       controls: inspect(query(controlsSelector), { includeGap: false }),
       primary: inspect(play?.parentElement ?? null, { includeGap: false }),
       timeline: inspect(seek?.parentElement?.parentElement ?? null, {
@@ -2469,7 +2469,7 @@ async function skinContract(root: Locator) {
     const mute = element.querySelector<HTMLElement>('[role="button"][aria-label="Mute"]');
     const seek = element.querySelector<HTMLElement>('[role="slider"][aria-label="Seek"]');
     const controls = play?.closest<HTMLElement>('[data-interactive], media-controls');
-    const poster = element.querySelector<HTMLElement>('img[data-visible], .media-poster, media-poster');
+    const poster = element.querySelector<HTMLElement>('.media-poster, media-poster');
 
     const inspect = (target: HTMLElement | null | undefined) => {
       if (!target) return null;
diff --git a/apps/sandbox/app/shared/html/registry-skins.ts b/apps/sandbox/app/shared/html/registry-skins.ts
index 562e5b78dc..8684dee10c 100644
--- a/apps/sandbox/app/shared/html/registry-skins.ts
+++ b/apps/sandbox/app/shared/html/registry-skins.ts
@@ -115,6 +115,10 @@ export function defineTemplateSkin(tagName: string, source: SkinTemplate): strin
 
       if (poster instanceof HTMLImageElement) {
         poster.removeAttribute('slot');
+
+        // The template's image carries the skin's image class, which a slotted poster takes over.
+        if (posterTarget) poster.classList.add(...posterTarget.classList);
+
         posterTarget?.replaceWith(poster);
       } else if (posterTarget instanceof HTMLSlotElement) {
         posterTarget.replaceWith(...posterTarget.childNodes);
diff --git a/internal/design/ui/poster.md b/internal/design/ui/poster.md
index 0800caefd0..fddb38a6ee 100644
--- a/internal/design/ui/poster.md
+++ b/internal/design/ui/poster.md
@@ -15,20 +15,20 @@ We want a simpler approach: keep the state small, let the user control the image
 
 ## Solution
 
-**HTML:** A controller that renders no image and sets `src` on the one that is already its child. `<picture>` is the loose precedent for the shape, though sourcing runs the other way around: `<picture>` treats the `src` on its `<img>` as the fallback, while here an image with no source of its own is the one we fill in.
-**React:** Renders `<img>` directly — no wrapper needed.
+**HTML:** A controller that sets `src` on the image that is its child, drawing a fallback `<img part="image">` in its shadow root only while no child image is supplied. `<picture>` is the loose precedent for the shape, though sourcing runs the other way around: `<picture>` treats the `src` on its `<img>` as the fallback, while here an image with no source of its own is the one we fill in.
+**React:** A compound component with a `Poster.Root` presentation boundary and one `Poster.Image` that supplies the image lifecycle. The root accepts other children so loading previews and overlays can respond to the same state without replacing the controlled image.
 
 The URL is player state on the metadata feature, not markup here, so a hand-authored layout resolves it the same way a skin does. Either binding fills in `src` only when the consumer supplied none — the [decision below](#component-managed-image-src-prop) still holds, so it is a default rather than a takeover. The packaged skins carry a plain `<img>` as poster-slot fallback content, which an `<img slot="poster">` displaces.
 
 Visibility: `visible = !playback.started`. The poster shows until playback starts. `started` persists — pausing doesn't reset it.
 
-`data-visible`, `data-loading`, `data-loaded`, and `data-error` are reported on `<media-poster>` rather than on the image, since the image may be the author's and a skin has no selector that reaches into it.
+`data-visible`, `data-loading`, `data-loaded`, and `data-error` are reported on `<media-poster>` and `Poster.Root` rather than on the image. The image may be the author's, and presentation layers around it need the same lifecycle state.
 
 ## Accessibility
 
-**HTML element (`<media-poster>`):** No ARIA role needed. Custom elements have no implicit role, so there's no semantics to hide or override. Do not add `aria-hidden` — the poster image may be informative.
+**Root (`<media-poster>` or the `div` rendered by `Poster.Root`):** No ARIA role is needed. Do not add `aria-hidden` — the poster image may be informative.
 
-**Image:** The one each binding renders carries `alt=""`. A resolved URL says nothing about what it depicts, and announcing the URL is worse than announcing nothing. Supply your own `alt` — as a prop in React, on your own `<img>` in HTML — to describe a poster that carries meaning. Whether a poster is informative or decorative is the author's judgment (per [WAI guidelines](https://www.w3.org/WAI/tutorials/images/decorative/)). This is an advantage over Media Chrome (which forces `aria-hidden="true"` on the internal image) and native `<video poster>` (which has no `alt` equivalent).
+**Image:** The one each binding renders carries `alt=""`. A resolved URL says nothing about what it depicts, and announcing the URL is worse than announcing nothing. Supply your own `alt` — on `Poster.Image` in React, or on your own `<img>` in HTML — to describe a poster that carries meaning. Whether a poster is informative or decorative is the author's judgment (per [WAI guidelines](https://www.w3.org/WAI/tutorials/images/decorative/)). This is an advantage over Media Chrome (which forces `aria-hidden="true"` on the internal image) and native `<video poster>` (which has no `alt` equivalent).
 
 ## Alternatives Considered
 
@@ -46,13 +46,13 @@ Like Media Chrome — component owns the `<img>` internally.
 
 Our approach makes the flexible path the default.
 
-### An `<img>` the HTML element owns in its shadow root
+### An `<img>` the HTML element always owns in its shadow root
 
 Considered so `<media-poster>` alone would render something once the URL came from the store.
 
-**Why not:** the owned image is stylable only through `::part(img)`, skins end up with two styling contracts instead of one, and two images sit in the tree with one hidden.
+**Why not as the only image:** an owned image is stylable only through `::part(image)`, so skins would end up with two styling contracts instead of one, and an image the author supplies would sit beside a hidden one.
 
-Two costs follow. `<media-poster>` renders nothing on its own, so a hand-authored layout supplies the image and a `__DEV__` warning fires when a poster resolves without one. And a skin reaches a slotted image through `::slotted(img)`, which matches only what is assigned directly — wrap one in a `<picture>` or a framework component and its sizing belongs to the author.
+**What we do instead:** the element draws its `<img part="image">` only while no child image is composed, and removes it the moment one arrives. A hand-authored `<media-poster>` renders on its own, while the packaged skins keep supplying a plain `<img>` as poster-slot fallback content so their styling stays class-based. A skin reaches a slotted image through `::slotted(img)`, which matches only what is assigned directly — wrap one in a `<picture>` or a framework component and its sizing belongs to the author.
 
 ## Future
 
diff --git a/packages/core/src/core/ui/poster/core.ts b/packages/core/src/core/ui/poster/core.ts
index 203653f9cb..c92b87335f 100644
--- a/packages/core/src/core/ui/poster/core.ts
+++ b/packages/core/src/core/ui/poster/core.ts
@@ -22,8 +22,8 @@ export interface PosterState {
   error: boolean;
 }
 
-/** Framework-neutral poster component props. */
-export interface PosterProps {
+/** Framework-neutral poster image props. */
+export interface PosterImageProps {
   src?: string | undefined;
 }
 
diff --git a/packages/core/src/core/ui/poster/poster-component.ts b/packages/core/src/core/ui/poster/poster-component.ts
index 95f0c7ce11..e21152109b 100644
--- a/packages/core/src/core/ui/poster/poster-component.ts
+++ b/packages/core/src/core/ui/poster/poster-component.ts
@@ -1,5 +1,14 @@
 import { defineComponent } from 'vjsc/components';
 
-import type { PosterProps } from './core';
+import type { PosterImageProps } from './core';
+import { PosterDataAttrs } from './data';
 
-export default defineComponent<PosterProps>({ name: 'Poster' });
+export default defineComponent({
+  name: 'Poster',
+  root: 'Root',
+  parts: {
+    Root: defineComponent(),
+    Image: defineComponent<PosterImageProps>(),
+  },
+  dataAttrs: PosterDataAttrs,
+});
diff --git a/packages/html/src/ui/poster/poster-element.ts b/packages/html/src/ui/poster/poster-element.ts
index 1832b1c2f9..b15843da43 100644
--- a/packages/html/src/ui/poster/poster-element.ts
+++ b/packages/html/src/ui/poster/poster-element.ts
@@ -6,6 +6,21 @@ import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';
 import { UIElement } from '../ui-element';
 
+const SHADOW_CSS = `\
+:host {
+  display: block;
+}
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+}
+img:not([src]) {
+  visibility: hidden;
+}`;
+
 /** What an element composes: whatever fills a slot, or the element's own children. */
 function composedChildren(element: Element): Element[] {
   if (element instanceof HTMLSlotElement) {
@@ -52,6 +67,20 @@ function hasOwnSource(img: HTMLImageElement): boolean {
   return !!img.getAttribute('src') || img.hasAttribute('srcset');
 }
 
+/**
+ * The image the element draws when none is supplied, reachable from outside as `::part(image)`. Decorative by default,
+ * like the one each skin carries: a resolved URL says nothing about what it depicts.
+ */
+function createFallbackImage(): HTMLImageElement {
+  const img = document.createElement('img');
+
+  img.alt = '';
+  img.setAttribute('part', 'image');
+  img.setAttribute('decoding', 'async');
+
+  return img;
+}
+
 /** How the current source is faring. */
 type ImageLoadState = 'pending' | 'loaded' | 'error';
 
@@ -62,13 +91,16 @@ type ImageLoadState = 'pending' | 'loaded' | 'error';
  * `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the
  * child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.
  *
- * Renders no image of its own, so include one: `<media-poster><img alt=""></media-poster>`. Inside a skin, an `<img
- * slot="poster">` of yours replaces the one the skin carries.
+ * Left empty, the element draws an image of its own in its shadow root. Supply one as a child to describe it or wrap
+ * it: `<media-poster><img alt="Keynote speaker"></media-poster>`. Inside a skin, an `<img slot="poster">` of yours
+ * replaces the one the skin carries.
  */
 export class PosterElement extends UIElement {
   static readonly tagName = 'media-poster';
 
   readonly #core = new PosterCore();
+  readonly #shadow = this.attachShadow({ mode: 'open' });
+  readonly #fallback = createFallbackImage();
   readonly #children = new MutationObserver(() => this.requestUpdate());
 
   readonly #playback = new PlayerController(this, playerContext, selectPlayback);
@@ -81,7 +113,15 @@ export class PosterElement extends UIElement {
 
   #imageEvents: AbortController | null = null;
   #disconnect: AbortController | null = null;
-  #warnedMissingImage = false;
+
+  constructor() {
+    super();
+
+    const style = document.createElement('style');
+
+    style.textContent = SHADOW_CSS;
+    this.#shadow.append(style, document.createElement('slot'), this.#fallback);
+  }
 
   override connectedCallback(): void {
     super.connectedCallback();
@@ -131,7 +171,7 @@ export class PosterElement extends UIElement {
 
     const { src } = this.#core.getState();
 
-    this.#adopt(findImage(this));
+    this.#adopt(findImage(this) ?? this.#fallback);
     this.#applySource(src);
 
     this.#core.setImageLoadState(this.#loadState);
@@ -155,6 +195,11 @@ export class PosterElement extends UIElement {
     this.#owned = next !== null && !hasSource(next);
     this.#imageLoadState = 'pending';
 
+    // The fallback only occupies the shadow root while it is the active image,
+    // so a supplied image never sits beside a hidden one.
+    if (next === this.#fallback) this.#shadow.append(this.#fallback);
+    else if (next) this.#fallback.remove();
+
     if (!next) return;
 
     // An image that finished before we started listening never fires again, so
@@ -176,20 +221,7 @@ export class PosterElement extends UIElement {
 
   #applySource(src: string): void {
     const img = this.#image;
-
-    if (!img) {
-      if (__DEV__ && src && !this.#warnedMissingImage) {
-        this.#warnedMissingImage = true;
-        console.warn(
-          `<${this.localName}> resolved a poster but has no image to put it in. ` +
-            `Add one as a child: <${this.localName}><img alt=""></${this.localName}>`
-        );
-      }
-
-      return;
-    }
-
-    if (!this.#owned) return;
+    if (!img || !this.#owned) return;
 
     if (!src) {
       this.#imageLoadState = 'pending';
diff --git a/packages/html/src/ui/poster/tests/poster-element.test.ts b/packages/html/src/ui/poster/tests/poster-element.test.ts
index 6d9b8969a6..2750435903 100644
--- a/packages/html/src/ui/poster/tests/poster-element.test.ts
+++ b/packages/html/src/ui/poster/tests/poster-element.test.ts
@@ -115,10 +115,37 @@ afterEach(() => {
 });
 
 describe('PosterElement', () => {
-  it('renders nothing of its own, working on the light DOM', async () => {
-    const { poster } = await mount();
+  it('sets its fallback image aside while a skin supplies one', async () => {
+    const { poster, skinImage, setPoster } = await mount();
+
+    await setPoster('poster.jpg');
+
+    expect(poster.shadowRoot!.querySelector('img')).toBeNull();
+    expect(skinImage.getAttribute('src')).toBe('poster.jpg');
+  });
+
+  it('fills a fallback image of its own when none is supplied', async () => {
+    ensureDefined(TestProviderElement);
+    ensureDefined(PosterElement);
+
+    const provider = document.createElement(TestProviderElement.tagName) as TestProviderElement;
 
-    expect(poster.shadowRoot).toBeNull();
+    provider.innerHTML = `<${PosterElement.tagName}></${PosterElement.tagName}>`;
+    document.body.appendChild(provider);
+
+    const poster = provider.querySelector(PosterElement.tagName) as PosterElement;
+
+    provider.store.attach({ media: document.createElement('video'), container: null });
+    setUserPoster(provider.store, 'poster.jpg');
+
+    const fallback = poster.shadowRoot!.querySelector('img')!;
+
+    // The player context resolves a tick after connect.
+    await vi.waitFor(() => expect(fallback.getAttribute('src')).toBe('poster.jpg'));
+
+    expect(fallback.getAttribute('part')).toBe('image');
+    expect(fallback.getAttribute('alt')).toBe('');
+    expect(poster.hasAttribute('data-loading')).toBe(true);
   });
 
   it('picks up a plain child image, including one added after mount', async () => {
@@ -140,6 +167,10 @@ describe('PosterElement', () => {
     await new Promise((resolve) => setTimeout(resolve, 0));
     await poster.updateComplete;
 
+    const fallback = poster.shadowRoot!.querySelector('img')!;
+
+    expect(fallback.getAttribute('src')).toBe('poster.jpg');
+
     // No slot is involved here, so nothing announces the image arriving.
     const image = document.createElement('img');
 
@@ -147,6 +178,11 @@ describe('PosterElement', () => {
     poster.appendChild(image);
 
     await vi.waitFor(() => expect(image.getAttribute('src')).toBe('poster.jpg'));
+
+    // The fallback steps out of the tree rather than sitting hidden beside
+    // the supplied image, and stops downloading what it was pointed at.
+    expect(fallback.isConnected).toBe(false);
+    expect(fallback.hasAttribute('src')).toBe(false);
   });
 
   it('fills the source of the image the skin supplied', async () => {
@@ -370,28 +406,4 @@ describe('PosterElement', () => {
     expect(poster.hasAttribute('data-loaded')).toBe(false);
     expect(poster.hasAttribute('data-loading')).toBe(true);
   });
-
-  it('warns when a poster resolves with no image to put it in', async () => {
-    ensureDefined(TestProviderElement);
-    ensureDefined(PosterElement);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-    const provider = document.createElement(TestProviderElement.tagName) as TestProviderElement;
-
-    document.body.appendChild(provider);
-
-    const poster = document.createElement(PosterElement.tagName) as PosterElement;
-
-    provider.appendChild(poster);
-    provider.store.attach({ media: document.createElement('video'), container: null });
-    await poster.updateComplete;
-
-    setUserPoster(provider.store, 'poster.jpg');
-    poster.requestUpdate();
-    await poster.updateComplete;
-
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('no image to put it in'));
-
-    warn.mockRestore();
-  });
 });
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 40b5c895d2..8c15e02c78 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -124,7 +124,9 @@ export {
 export { PlaybackRateButton, type PlaybackRateButtonProps } from './ui/playback-rate-button/playback-rate-button';
 export { PlaybackRateRadioGroupLegacy as PlaybackRateRadioGroup } from './ui/playback-rate-radio-group';
 export { Popover, type PopoverContextValue, usePopoverContext } from './ui/popover';
-export { Poster, type PosterProps } from './ui/poster/poster';
+export { Poster } from './ui/poster';
+export type { PosterImageProps } from './ui/poster/poster-image';
+export type { PosterRootProps } from './ui/poster/poster-root';
 export {
   type QualityOption,
   type QualityOptionsProps,
diff --git a/packages/react/src/presets/types.ts b/packages/react/src/presets/types.ts
index b42a01a190..1a6d67782b 100644
--- a/packages/react/src/presets/types.ts
+++ b/packages/react/src/presets/types.ts
@@ -28,5 +28,5 @@ export type BaseVideoSkinProps<T = unknown> = BaseSkinProps<T> & {
    *   />
    *   ```;
    */
-  renderPoster?: Poster.Props['render'];
+  renderPoster?: Poster.ImageProps['render'];
 };
diff --git a/packages/react/src/presets/video/tests/skin.test.tsx b/packages/react/src/presets/video/tests/skin.test.tsx
index dd5217ef74..df48d1e3d7 100644
--- a/packages/react/src/presets/video/tests/skin.test.tsx
+++ b/packages/react/src/presets/video/tests/skin.test.tsx
@@ -51,8 +51,7 @@ describe('VideoSkin', () => {
   it('draws its own poster image', () => {
     const { container } = render(<VideoSkin />, { wrapper: wrapper() });
 
-    // The skin reaches the poster as a direct child, so it carries no class of its own.
-    const img = container.querySelector('.media-skin[data-preset="video"] > img');
+    const img = container.querySelector('.media-poster > img.media-poster-image');
 
     expect(img?.getAttribute('src')).toBe('poster.jpg');
   });
@@ -67,7 +66,7 @@ describe('VideoSkin', () => {
 
     const custom = container.querySelector('[data-testid="custom"]');
 
-    expect(container.querySelectorAll('.media-skin[data-preset="video"] > img')).toHaveLength(1);
+    expect(container.querySelectorAll('.media-poster > img')).toHaveLength(1);
     expect(custom?.getAttribute('src')).toBe('poster.jpg');
     expect(custom?.getAttribute('style')).toContain('poster-placeholder.jpg');
   });
@@ -77,7 +76,7 @@ describe('VideoSkin', () => {
       wrapper: wrapper(),
     });
 
-    expect(container.querySelector('.media-skin[data-preset="video"] > img')).toBeNull();
+    expect(container.querySelector('.media-poster > img')).toBeNull();
 
     const custom = container.querySelector('[data-testid="custom"]');
 
diff --git a/packages/react/src/ui/poster/context.tsx b/packages/react/src/ui/poster/context.tsx
new file mode 100644
index 0000000000..9192b0877a
--- /dev/null
+++ b/packages/react/src/ui/poster/context.tsx
@@ -0,0 +1,20 @@
+import { type PosterImageLoadState, type PosterState } from '@videojs/core';
+import { createContext, type ProviderProps, useContext } from 'react';
+
+export interface PosterContextValue {
+  state: PosterState;
+  setImageLoadState: (state: PosterImageLoadState) => void;
+}
+
+const PosterContext = createContext<PosterContextValue | null>(null);
+
+export function PosterProvider({ value, children }: ProviderProps<PosterContextValue>) {
+  return <PosterContext.Provider value={value}>{children}</PosterContext.Provider>;
+}
+
+export function usePosterContext(): PosterContextValue {
+  const ctx = useContext(PosterContext);
+  if (!ctx) throw new Error('Poster compound components must be used within a Poster.Root');
+
+  return ctx;
+}
diff --git a/packages/react/src/ui/poster/index.parts.ts b/packages/react/src/ui/poster/index.parts.ts
new file mode 100644
index 0000000000..621070011f
--- /dev/null
+++ b/packages/react/src/ui/poster/index.parts.ts
@@ -0,0 +1,2 @@
+export { PosterImage as Image, type PosterImageProps as ImageProps } from './poster-image';
+export { PosterRoot as Root, type PosterRootProps as RootProps } from './poster-root';
diff --git a/packages/react/src/ui/poster/index.ts b/packages/react/src/ui/poster/index.ts
index c915ed2506..8ef6dec18c 100644
--- a/packages/react/src/ui/poster/index.ts
+++ b/packages/react/src/ui/poster/index.ts
@@ -1 +1 @@
-export { Poster, type PosterProps } from './poster';
+export * as Poster from './index.parts';
diff --git a/packages/react/src/ui/poster/poster-image.tsx b/packages/react/src/ui/poster/poster-image.tsx
new file mode 100644
index 0000000000..b36117df91
--- /dev/null
+++ b/packages/react/src/ui/poster/poster-image.tsx
@@ -0,0 +1,125 @@
+import type { PosterCore, PosterImageLoadState } from '@videojs/core';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+import type { UIComponentProps } from '../../utils/types';
+import { useComposedRefs } from '../../utils/use-composed-refs';
+import { useLatestRef } from '../../utils/use-latest-ref';
+import { renderElement } from '../../utils/use-render';
+import { usePosterContext } from './context';
+
+export interface PosterImageProps extends UIComponentProps<'img', PosterCore.State> {}
+
+/** The source currently requested from the image, and how it is faring. */
+interface ImageRequest {
+  src: string;
+  srcSet: string | undefined;
+  state: PosterImageLoadState;
+}
+
+/**
+ * Displays the poster image managed by `Poster.Root`.
+ *
+ * Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.
+ * Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.
+ */
+export const PosterImage = forwardRef(function PosterImage(
+  componentProps: PosterImageProps,
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  const { render, className, style, ...elementProps } = componentProps;
+  const { state, setImageLoadState } = usePosterContext();
+
+  const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;
+
+  // Either authored source makes the image yours, matching `hasSource` in the
+  // HTML element. Filling `src` alongside a `srcset` would inject the player's
+  // poster into your candidate set as the 1x entry.
+  const src = authoredSrc ?? (authoredSrcSet === undefined ? state.src : '');
+
+  const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';
+  const [request, setRequest] = useState<ImageRequest>(() => ({
+    src,
+    srcSet: authoredSrcSet,
+    state: initialLoadState,
+  }));
+  const didCheckInitialImageRef = useRef(false);
+  const requested = useLatestRef({ src, srcSet: authoredSrcSet });
+
+  // Keep only the active request. Retaining a settled source by value would
+  // resurrect its old state when the image moved A -> B -> A, even though the
+  // second A is a new request. `srcSet` is part of the identity because `src`
+  // stays empty when it is the only source.
+  const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;
+
+  if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });
+
+  const loadState = matchesRequest ? request.state : initialLoadState;
+
+  // Before paint, so the root's first frame already carries `data-loading` for a
+  // source that is resolving instead of flashing the layers keyed off that state.
+  // The reset lives in the same effect: a passive cleanup would run after this
+  // layout write when Strict Mode re-runs effects, leaving the root at `none`.
+  useLayoutEffect(() => {
+    setImageLoadState(loadState);
+
+    return () => setImageLoadState('none');
+  }, [authoredSrcSet, loadState, setImageLoadState, src]);
+
+  // An image can already be settled when we first see it — hydrated from server
+  // markup, say — in which case neither `load` nor `error` ever fires. Decoded
+  // pixels stand on their own; the absence of them only means failure once
+  // `complete` can be trusted, which takes a source on the image itself, since one
+  // sourced by a `<picture>` an override wrapped it in is `complete` regardless.
+  //
+  // Only when we first see it. A later source change leaves the previous request's
+  // pixels in place until the new one settles, so reading them again would call
+  // the new source loaded while it is still fetching. `load` and `error` cover
+  // every source after this one, the way the HTML element reads an image once.
+  // The check rides on the ref, so an override that renders nothing until a
+  // source resolves is still read the moment its image mounts.
+  const checkInitialImage = useCallback(
+    (img: HTMLImageElement | null) => {
+      if (!img || didCheckInitialImageRef.current) return;
+
+      didCheckInitialImageRef.current = true;
+
+      const { src, srcSet } = requested.current;
+
+      if (img.naturalWidth > 0) setRequest({ src, srcSet, state: 'loaded' });
+      else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {
+        setRequest({ src, srcSet, state: 'error' });
+      }
+    },
+    [requested]
+  );
+  const ref = useComposedRefs(forwardedRef, checkInitialImage);
+
+  // Recorded against the source this render asked for, not the one on the
+  // element: a `render` override is free to rewrite it.
+  const handleLoad = () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });
+  const handleError = () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' });
+
+  return renderElement(
+    'img',
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [
+        { alt: '' },
+        elementProps,
+        {
+          // An empty `src` requests the document URL, so leave the attribute off.
+          src: src || undefined,
+          onLoad: handleLoad,
+          onError: handleError,
+        },
+      ],
+    }
+  );
+});
+
+export namespace PosterImage {
+  export type Props = PosterImageProps;
+}
diff --git a/packages/react/src/ui/poster/poster-root.tsx b/packages/react/src/ui/poster/poster-root.tsx
new file mode 100644
index 0000000000..2ebd953f48
--- /dev/null
+++ b/packages/react/src/ui/poster/poster-root.tsx
@@ -0,0 +1,70 @@
+import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';
+import { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useState } from 'react';
+
+import { usePlayer } from '../../player/context';
+import type { UIComponentProps } from '../../utils/types';
+import { renderElement } from '../../utils/use-render';
+import { PosterProvider } from './context';
+
+export interface PosterRootProps extends UIComponentProps<'div', PosterCore.State> {}
+
+/**
+ * Manages poster visibility and image loading state.
+ *
+ * Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer
+ * in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.
+ */
+export const PosterRoot = forwardRef(function PosterRoot(
+  componentProps: PosterRootProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const { render, className, style, ...elementProps } = componentProps;
+
+  const playback = usePlayer(selectPlayback);
+  const metadata = usePlayer(selectMetadata);
+
+  const [core] = useState(() => new PosterCore());
+  const [reportedLoadState, setImageLoadState] = useState<PosterImageLoadState | null>(null);
+
+  if (!playback) {
+    if (__DEV__) logMissingFeature('Poster.Root', 'playback');
+
+    return null;
+  }
+
+  // The metadata feature is optional: without it nothing resolves a URL, and
+  // this stays a visibility wrapper around whatever source the image supplies.
+  core.setMedia({
+    started: playback.started,
+    poster: metadata?.poster ?? '',
+  });
+
+  // Until the image reports, a resolved poster is on its way. Server markup then
+  // already carries `data-loading`, and hydration lands on the state the image
+  // reports first rather than flashing the layers keyed off that attribute.
+  core.setImageLoadState(reportedLoadState ?? (metadata?.poster ? 'loading' : 'none'));
+
+  const state = core.getState();
+
+  return (
+    <PosterProvider value={{ state, setImageLoadState }}>
+      {renderElement(
+        'div',
+        { render, className, style },
+        {
+          state,
+          stateAttrMap: PosterDataAttrs,
+          ref: forwardedRef,
+          props: elementProps,
+        }
+      )}
+    </PosterProvider>
+  );
+});
+
+export namespace PosterRoot {
+  export type Props = PosterRootProps;
+  export type State = PosterCore.State;
+}
diff --git a/packages/react/src/ui/poster/poster.tsx b/packages/react/src/ui/poster/poster.tsx
deleted file mode 100644
index 2784040c77..0000000000
--- a/packages/react/src/ui/poster/poster.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';
-import { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';
-import type { ForwardedRef } from 'react';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-
-import { usePlayer } from '../../player/context';
-import type { UIComponentProps } from '../../utils/types';
-import { renderElement } from '../../utils/use-render';
-
-export interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
-
-/** The source currently requested from the image, and how it is faring. */
-interface ImageRequest {
-  src: string;
-  srcSet: string | undefined;
-  state: PosterImageLoadState;
-}
-
-/**
- * Displays the video poster image. Shows before playback starts, hides after.
- *
- * Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source
- * off and the player's resolved `poster` fills it in.
- *
- * The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
- *
- * @example
- *   ```tsx
- *   <VideoPlayer poster="poster.jpg">
- *   <Poster />
- *   </VideoPlayer>
- *
- *   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
- *
- *   <Poster
- *   render={({ src, ...props }: ComponentProps<'img'>) =>
- *   src ? <Image {...props} src={src} alt="" fill /> : null
- *   }
- *   />
- *   ```;
- */
-export const Poster = forwardRef(function Poster(
-  componentProps: PosterProps,
-  forwardedRef: ForwardedRef<HTMLImageElement>
-) {
-  const { render, className, style, ...elementProps } = componentProps;
-
-  const playback = usePlayer(selectPlayback);
-  const metadata = usePlayer(selectMetadata);
-
-  const [core] = useState(() => new PosterCore());
-
-  // The metadata feature is optional: without it nothing resolves a URL, and
-  // this stays a visibility wrapper around whatever `src` was passed.
-  if (playback) {
-    core.setMedia({
-      started: playback.started,
-      poster: metadata?.poster ?? '',
-    });
-  }
-
-  const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };
-
-  // Either authored source makes the image yours, matching `hasSource` in the
-  // HTML element. Filling `src` alongside a `srcset` would inject the player's
-  // poster into your candidate set as the 1x entry.
-  const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');
-
-  const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';
-  const [request, setRequest] = useState<ImageRequest>(() => ({
-    src,
-    srcSet: authoredSrcSet,
-    state: initialLoadState,
-  }));
-  const imgRef = useRef<HTMLImageElement | null>(null);
-
-  // Keep only the active request. Retaining a settled source by value would
-  // resurrect its old state when the image moved A -> B -> A, even though the
-  // second A is a new request. `srcSet` is part of the identity because `src`
-  // stays empty when it is the only source.
-  const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;
-
-  if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });
-
-  const loadState = matchesRequest ? request.state : initialLoadState;
-
-  if (playback) core.setImageLoadState(loadState);
-
-  const state = playback ? core.getState() : null;
-
-  // An image can already be settled when we first see it — hydrated from server
-  // markup, say — in which case neither `load` nor `error` ever fires. Decoded
-  // pixels stand on their own; the absence of them only means failure once
-  // `complete` can be trusted, which takes a source on the image itself, since one
-  // sourced by a `<picture>` an override wrapped it in is `complete` regardless.
-  //
-  // Only when we first see it. A later source change leaves the previous request's
-  // pixels in place until the new one settles, so reading them again would call
-  // the new source loaded while it is still fetching. `load` and `error` cover
-  // every source after this one, the way the HTML element reads an image once.
-  // oxlint-disable-next-line react/exhaustive-deps -- reads the first source only, at mount
-  useEffect(() => {
-    const img = imgRef.current;
-    if (!img) return;
-
-    if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });
-    else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {
-      setRequest({ src, srcSet: authoredSrcSet, state: 'error' });
-    }
-  }, []);
-
-  // Recorded against the source this render asked for, not the one on the
-  // element: a `render` override is free to rewrite it.
-  const handleLoad = useCallback(
-    () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),
-    [src, authoredSrcSet]
-  );
-  const handleError = useCallback(
-    () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),
-    [src, authoredSrcSet]
-  );
-
-  if (!playback || !state) {
-    if (__DEV__) logMissingFeature('Poster', 'playback');
-
-    return null;
-  }
-
-  return renderElement(
-    'img',
-    { render, className, style },
-    {
-      state,
-      stateAttrMap: PosterDataAttrs,
-      ref: [forwardedRef, imgRef],
-      props: [
-        { alt: '' },
-        elementProps,
-        {
-          // An empty `src` requests the document URL, so leave the attribute off.
-          src: src || undefined,
-          onLoad: handleLoad,
-          onError: handleError,
-        },
-      ],
-    }
-  );
-});
-
-export namespace Poster {
-  export type Props = PosterProps;
-  export type State = PosterCore.State;
-}
diff --git a/packages/react/src/ui/poster/tests/poster.test.tsx b/packages/react/src/ui/poster/tests/poster.test.tsx
index 4d84e4c947..d7dde918c1 100644
--- a/packages/react/src/ui/poster/tests/poster.test.tsx
+++ b/packages/react/src/ui/poster/tests/poster.test.tsx
@@ -1,8 +1,9 @@
 import { cleanup, fireEvent, render } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
 import { afterEach, describe, expect, it, vi } from 'vite-plus/test';
 
+import { Poster } from '..';
 import { createPlayerWrapper } from '../../../testing/mocks';
-import { Poster } from '../poster';
 
 afterEach(cleanup);
 
@@ -23,114 +24,139 @@ function wrapper(state: { started?: boolean; poster?: string } = {}) {
   }).Wrapper;
 }
 
-describe('Poster', () => {
-  it('renders one image carrying the resolved poster', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" />, {
-      wrapper: wrapper({ poster: 'poster.jpg' }),
-    });
+function DefaultPoster(props: Poster.ImageProps = {}) {
+  return (
+    <Poster.Root data-testid="poster">
+      <Poster.Image data-testid="image" {...props} />
+    </Poster.Root>
+  );
+}
 
-    const element = getByTestId('poster');
+describe('Poster', () => {
+  it('renders a root around the image carrying the resolved poster', () => {
+    const { getByTestId } = render(<DefaultPoster />, { wrapper: wrapper({ poster: 'poster.jpg' }) });
 
-    expect(element.tagName).toBe('IMG');
-    expect(element.getAttribute('src')).toBe('poster.jpg');
+    expect(getByTestId('poster').tagName).toBe('DIV');
+    expect(getByTestId('image').tagName).toBe('IMG');
+    expect(getByTestId('image').getAttribute('src')).toBe('poster.jpg');
   });
 
   it('leaves the src attribute off when nothing resolved one', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" />, { wrapper: wrapper() });
+    const { getByTestId } = render(<DefaultPoster />, { wrapper: wrapper() });
 
     // An empty `src` requests the document URL.
-    expect(getByTestId('poster').hasAttribute('src')).toBe(false);
+    expect(getByTestId('image').hasAttribute('src')).toBe(false);
   });
 
-  it('prefers a src passed to it over the resolved one', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" src="mine.jpg" />, {
+  it('prefers a src passed to the image over the resolved one', () => {
+    const { getByTestId } = render(<DefaultPoster src="mine.jpg" />, {
       wrapper: wrapper({ poster: 'poster.jpg' }),
     });
 
-    expect(getByTestId('poster').getAttribute('src')).toBe('mine.jpg');
+    expect(getByTestId('image').getAttribute('src')).toBe('mine.jpg');
   });
 
-  it('is decorative by default and takes an alt you supply', () => {
-    const { getByTestId, rerender } = render(<Poster data-testid="poster" />, {
+  it('makes the image decorative by default and takes an alt you supply', () => {
+    const { getByTestId, rerender } = render(<DefaultPoster />, {
       wrapper: wrapper({ poster: 'poster.jpg' }),
     });
 
-    expect(getByTestId('poster').getAttribute('alt')).toBe('');
+    expect(getByTestId('image').getAttribute('alt')).toBe('');
 
-    rerender(<Poster data-testid="poster" alt="Keynote speaker" />);
+    rerender(<DefaultPoster alt="Keynote speaker" />);
 
-    expect(getByTestId('poster').getAttribute('alt')).toBe('Keynote speaker');
+    expect(getByTestId('image').getAttribute('alt')).toBe('Keynote speaker');
   });
 
   it('keeps the image attributes it does not own', () => {
-    const { getByTestId } = render(
-      <Poster data-testid="poster" srcSet="poster-480.jpg 480w" sizes="100vw" loading="lazy" />,
-      { wrapper: wrapper({ poster: 'poster.jpg' }) }
-    );
+    const { getByTestId } = render(<DefaultPoster srcSet="poster-480.jpg 480w" sizes="100vw" loading="lazy" />, {
+      wrapper: wrapper({ poster: 'poster.jpg' }),
+    });
 
-    const element = getByTestId('poster');
+    const image = getByTestId('image');
 
-    expect(element.getAttribute('srcset')).toBe('poster-480.jpg 480w');
-    expect(element.getAttribute('sizes')).toBe('100vw');
-    expect(element.getAttribute('loading')).toBe('lazy');
+    expect(image.getAttribute('srcset')).toBe('poster-480.jpg 480w');
+    expect(image.getAttribute('sizes')).toBe('100vw');
+    expect(image.getAttribute('loading')).toBe('lazy');
   });
 
   it('leaves the source alone when only a srcSet is authored', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" srcSet="poster@2x.jpg 2x" />, {
+    const { getByTestId } = render(<DefaultPoster srcSet="poster@2x.jpg 2x" />, {
       wrapper: wrapper({ poster: 'poster.jpg' }),
     });
 
     // `src` would join the candidate set as the 1x entry.
-    expect(getByTestId('poster').hasAttribute('src')).toBe(false);
+    expect(getByTestId('image').hasAttribute('src')).toBe(false);
   });
 
-  it('reports loading again when the srcSet changes', () => {
-    const { getByTestId, rerender } = render(<Poster data-testid="poster" srcSet="poster-480.jpg 480w" />, {
+  it('reports loading again on the root when the srcSet changes', () => {
+    const { getByTestId, rerender } = render(<DefaultPoster srcSet="poster-480.jpg 480w" />, {
       wrapper: wrapper({ poster: 'poster.jpg' }),
     });
 
-    fireEvent.load(getByTestId('poster'));
+    fireEvent.load(getByTestId('image'));
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(true);
 
-    rerender(<Poster data-testid="poster" srcSet="other-480.jpg 480w" />);
+    rerender(<DefaultPoster srcSet="other-480.jpg 480w" />);
 
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(false);
   });
 
-  it('hides once playback starts', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" />, {
+  it('hides the root once playback starts', () => {
+    const { getByTestId } = render(<DefaultPoster />, {
       wrapper: wrapper({ started: true, poster: 'poster.jpg' }),
     });
 
     expect(getByTestId('poster').hasAttribute('data-visible')).toBe(false);
   });
 
-  it('reports the image lifecycle, matching the attributes the HTML element reports', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" />, {
+  it('reports the image lifecycle on the root, matching the HTML element', () => {
+    const { getByTestId } = render(<DefaultPoster />, {
       wrapper: wrapper({ poster: 'poster.jpg' }),
     });
 
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(false);
 
-    fireEvent.load(getByTestId('poster'));
+    fireEvent.load(getByTestId('image'));
 
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(false);
   });
 
+  it('lets sibling presentation react to the image lifecycle', () => {
+    const { getByTestId } = render(
+      <Poster.Root data-testid="poster">
+        <div data-testid="blur" />
+        <Poster.Image data-testid="image" />
+        <div data-testid="overlay" />
+      </Poster.Root>,
+      { wrapper: wrapper({ poster: 'poster.jpg' }) }
+    );
+
+    const root = getByTestId('poster');
+
+    expect(root.contains(getByTestId('blur'))).toBe(true);
+    expect(root.contains(getByTestId('overlay'))).toBe(true);
+    expect(root.hasAttribute('data-loading')).toBe(true);
+
+    fireEvent.load(getByTestId('image'));
+
+    expect(root.hasAttribute('data-loaded')).toBe(true);
+  });
+
   it('reports the lifecycle of a render override that rewrote the src', () => {
-    // What an optimizing image component does: the resolved URL goes in, a
-    // rewritten one lands on the element.
     const { getByTestId } = render(
-      <Poster render={(props) => <img {...props} src="/optimized.jpg" data-testid="poster" alt="" />} />,
+      <Poster.Root data-testid="poster">
+        <Poster.Image render={(props) => <img {...props} src="/optimized.jpg" data-testid="image" alt="" />} />
+      </Poster.Root>,
       { wrapper: wrapper({ poster: 'poster.jpg' }) }
     );
 
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
 
-    fireEvent.load(getByTestId('poster'));
+    fireEvent.load(getByTestId('image'));
 
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(false);
@@ -141,7 +167,9 @@ describe('Poster', () => {
     const naturalWidth = vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(1280);
 
     const { getByTestId } = render(
-      <Poster render={(props) => <img {...props} src={undefined} data-testid="poster" alt="" />} />,
+      <Poster.Root data-testid="poster">
+        <Poster.Image render={(props) => <img {...props} src={undefined} data-testid="image" alt="" />} />
+      </Poster.Root>,
       { wrapper: wrapper({ poster: 'poster.jpg' }) }
     );
 
@@ -151,73 +179,121 @@ describe('Poster', () => {
     naturalWidth.mockRestore();
   });
 
+  it('reads a cached image that an override mounts only once a source resolved', () => {
+    const naturalWidth = vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(1280);
+    const { getByTestId, rerender } = render(
+      <Poster.Root data-testid="poster">
+        <Poster.Image render={() => null} />
+      </Poster.Root>,
+      { wrapper: wrapper({ poster: 'poster.jpg' }) }
+    );
+
+    expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
+
+    // What the documented `renderPoster` pattern does: nothing until `src` arrives,
+    // then an image the browser may already have, which never fires `load`.
+    rerender(
+      <Poster.Root data-testid="poster">
+        <Poster.Image render={(props) => <img {...props} data-testid="image" alt="" />} />
+      </Poster.Root>
+    );
+
+    expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(true);
+    expect(getByTestId('poster').hasAttribute('data-loading')).toBe(false);
+
+    naturalWidth.mockRestore();
+  });
+
   it('waits on an override that sources the image some other way', () => {
-    // What a `<picture>` override leaves behind: an `<img>` with no source of its
-    // own, which is `complete` on its own terms while a candidate is fetching.
     const { getByTestId } = render(
-      <Poster render={(props) => <img {...props} src={undefined} data-testid="poster" alt="" />} />,
+      <Poster.Root data-testid="poster">
+        <Poster.Image render={(props) => <img {...props} src={undefined} data-testid="image" alt="" />} />
+      </Poster.Root>,
       { wrapper: wrapper({ poster: 'poster.jpg' }) }
     );
 
-    const element = getByTestId('poster') as HTMLImageElement;
-
-    expect(element.complete).toBe(true);
-    expect(element.hasAttribute('data-loading')).toBe(true);
-    expect(element.hasAttribute('data-error')).toBe(false);
+    expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
+    expect(getByTestId('poster').hasAttribute('data-error')).toBe(false);
   });
 
   it('waits again when a previous source is requested again', () => {
-    const { getByTestId, rerender } = render(<Poster data-testid="poster" src="a.jpg" />, {
+    const { getByTestId, rerender } = render(<DefaultPoster src="a.jpg" />, {
       wrapper: wrapper({ poster: 'poster.jpg' }),
     });
 
-    fireEvent.load(getByTestId('poster'));
+    fireEvent.load(getByTestId('image'));
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(true);
 
     // A browser holds the previous request's pixels while the next one fetches.
-    Object.defineProperty(getByTestId('poster'), 'naturalWidth', { value: 1280, configurable: true });
+    Object.defineProperty(getByTestId('image'), 'naturalWidth', { value: 1280, configurable: true });
 
-    rerender(<Poster data-testid="poster" src="b.jpg" />);
+    rerender(<DefaultPoster src="b.jpg" />);
 
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(false);
 
-    rerender(<Poster data-testid="poster" src="a.jpg" />);
+    rerender(<DefaultPoster src="a.jpg" />);
 
     expect(getByTestId('poster').hasAttribute('data-loading')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(false);
   });
 
   it('reports an image that failed', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" />, {
+    const { getByTestId } = render(<DefaultPoster />, {
       wrapper: wrapper({ poster: 'missing.jpg' }),
     });
 
-    fireEvent.error(getByTestId('poster'));
+    fireEvent.error(getByTestId('image'));
 
     expect(getByTestId('poster').hasAttribute('data-error')).toBe(true);
     expect(getByTestId('poster').hasAttribute('data-loaded')).toBe(false);
   });
 
   it('reports nothing to load when no source resolved', () => {
-    const { getByTestId } = render(<Poster data-testid="poster" />, { wrapper: wrapper() });
+    const { getByTestId } = render(<DefaultPoster />, { wrapper: wrapper() });
 
-    const element = getByTestId('poster');
+    const root = getByTestId('poster');
 
-    expect(element.hasAttribute('data-loading')).toBe(false);
-    expect(element.hasAttribute('data-loaded')).toBe(false);
-    expect(element.hasAttribute('data-error')).toBe(false);
+    expect(root.hasAttribute('data-loading')).toBe(false);
+    expect(root.hasAttribute('data-loaded')).toBe(false);
+    expect(root.hasAttribute('data-error')).toBe(false);
   });
 
-  it('hands the resolved src to a render override', () => {
+  it('hands the resolved src to an image render override', () => {
     const { getByTestId } = render(
-      <Poster render={(props) => <img {...props} data-testid="custom" alt="Keynote speaker" />} />,
+      <Poster.Root>
+        <Poster.Image render={(props) => <img {...props} data-testid="custom" alt="Keynote speaker" />} />
+      </Poster.Root>,
       { wrapper: wrapper({ poster: 'poster.jpg' }) }
     );
 
-    const element = getByTestId('custom');
+    const image = getByTestId('custom');
+
+    expect(image.getAttribute('src')).toBe('poster.jpg');
+    expect(image.getAttribute('alt')).toBe('Keynote speaker');
+  });
+
+  it('requires the image to be inside a root', () => {
+    expect(() => render(<Poster.Image />)).toThrow('Poster compound components must be used within a Poster.Root');
+  });
 
-    expect(element.getAttribute('src')).toBe('poster.jpg');
-    expect(element.getAttribute('alt')).toBe('Keynote speaker');
+  it('marks a resolved poster as loading in server markup, before the image can report', () => {
+    const Loading = wrapper({ poster: 'poster.jpg' });
+    const Idle = wrapper();
+
+    expect(
+      renderToString(
+        <Loading>
+          <DefaultPoster />
+        </Loading>
+      )
+    ).toContain('data-loading');
+    expect(
+      renderToString(
+        <Idle>
+          <DefaultPoster />
+        </Idle>
+      )
+    ).not.toContain('data-loading');
   });
 });
diff --git a/packages/skins/build/target/html.tsx b/packages/skins/build/target/html.tsx
index 326a0de25b..0fcb6166e6 100644
--- a/packages/skins/build/target/html.tsx
+++ b/packages/skins/build/target/html.tsx
@@ -65,6 +65,9 @@ const componentParts: ComponentPartNameMap = {
     Popup: 'Popover',
     Arrow: 'Popover',
   },
+  Poster: {
+    Root: 'Poster',
+  },
   PlaybackRateRadioGroup: {
     Options: 'PlaybackRateRadioGroup',
   },
@@ -245,13 +248,9 @@ export const htmlComponentTarget: ComponentTarget<CoreSchema> = defineComponentT
             </target.VolumePopover.Popup>,
           ];
         },
-        Poster: ({ props }) => (
-          <target.Poster {...props}>
-            <Slot name="poster">
-              <Img alt="" decoding="async" />
-            </Slot>
-          </target.Poster>
-        ),
+        Poster: {
+          Image: ({ props }) => <Img alt="" decoding="async" {...props} />,
+        },
         PlaybackRateRadioGroup: {
           Root: unwrap(),
           Value: ({ props }) => <Span data-part="value" {...props} />,
diff --git a/packages/skins/build/target/react.tsx b/packages/skins/build/target/react.tsx
index d0c2a5b39c..0156cd7ec4 100644
--- a/packages/skins/build/target/react.tsx
+++ b/packages/skins/build/target/react.tsx
@@ -66,7 +66,7 @@ export const reactComponentTarget: ComponentTarget<CoreSchema> = defineComponent
             from: source,
             name: component,
             path: propsPath,
-            children: component === 'Poster' && path.length === 0 ? 'render' : undefined,
+            children: component === 'Poster' && path.at(-1) === 'Image' ? 'render' : undefined,
           },
         });
       },
@@ -86,7 +86,9 @@ export const reactComponentTarget: ComponentTarget<CoreSchema> = defineComponent
         VolumePopover: {
           Trigger: ({ props, children }) => <target.VolumePopover.Trigger render={children} {...props} />,
         },
-        Poster: ({ props, children }) => <target.Poster render={children} {...props} />,
+        Poster: {
+          Image: ({ props, children }) => <target.Poster.Image render={children} {...props} />,
+        },
         Slider: {
           Thumbnail: {
             Root: Div,
diff --git a/packages/skins/build/tests/vite.test.ts b/packages/skins/build/tests/vite.test.ts
index c923b12ff5..98c878402b 100644
--- a/packages/skins/build/tests/vite.test.ts
+++ b/packages/skins/build/tests/vite.test.ts
@@ -22,6 +22,8 @@ const htmlAudioSettingsMenuUrl =
 const volumePopoverUrl = `/../src/components/controls/volume-popover.tsx${reactTarget}`;
 const htmlPosterUrl = '/../src/components/layout/poster.tsx?style=tailwind&target=html&skin=default-video';
 const reactPosterUrl = '/../src/components/layout/poster.tsx?style=tailwind&target=react&skin=default-video';
+// The Minimal controls reach across to the volume popover trigger with `group-has-*`, a tracked parity gap.
+const minimalControlsUrl = '/../src/skins/minimal/video/controls.tsx?style=tailwind&target=react&skin=minimal-video';
 const buttonStyles = resolve(packageDir, 'src/styles/buttons/button.styles.ts');
 const controlsStyles = resolve(packageDir, 'src/skins/default/video/controls.styles.ts');
 const designStyles = resolve(packageDir, 'src/styles/base.css');
@@ -129,7 +131,7 @@ describe('Skins Vite workflow', () => {
   }, 30_000);
 
   it('reports VJSC style diagnostics through the Vite logger', async () => {
-    await server.transformRequest(`${reactPosterUrl}&diagnostics=1`);
+    await server.transformRequest(`${minimalControlsUrl}&diagnostics=1`);
     const warnings = [...warn.mock.calls, ...warnOnce.mock.calls].flat().join('\n');
 
     expect(warnings).toContain('[VJSC_STYLE_COMPLEX_SELECTOR]');
@@ -239,11 +241,10 @@ describe('Skins Vite workflow', () => {
     const html = await server.transformRequest(htmlPosterUrl);
     const react = await server.transformRequest(reactPosterUrl);
 
-    expect(html?.code).toContain('[&:is(img):not([src]):not([srcset])]:invisible');
-    expect(html?.code).toContain('[&>slot>img:not([src]):not([srcset])]:invisible');
+    expect(html?.code).toContain('[&:not([src]):not([srcset])]:invisible');
     expect(html?.code).toContain('[&>slot::slotted(img:not([src]):not([srcset]))]:invisible');
-    expect(react?.code).toContain('[&:is(img):not([src]):not([srcset])]:invisible');
-    expect(react?.code).not.toContain('&>slot>img');
+    expect(react?.code).toContain('[&:not([src]):not([srcset])]:invisible');
+    expect(react?.code).not.toContain('::slotted');
   }, 30_000);
 
   it('invalidates transformed owners for component, style, and design changes', async () => {
diff --git a/packages/skins/src/components/layout/poster.tsx b/packages/skins/src/components/layout/poster.tsx
index 892c98acce..89f2242508 100644
--- a/packages/skins/src/components/layout/poster.tsx
+++ b/packages/skins/src/components/layout/poster.tsx
@@ -1,15 +1,25 @@
-import type { PosterProps as CoreProps } from '@videojs/core';
+import type { PosterImageProps as CoreProps } from '@videojs/core';
 import * as $ from '@videojs/core/vjsc';
-import { type PropsWithChildren, Slot } from 'vjsc/components';
+import { type PropsOf, type PropsWithChildren, Slot } from 'vjsc/components';
 
 import type { SkinComponentDescription } from '../../meta';
 import styles from '../../styles/layout/poster.styles';
 
-export function Poster({ children, className, src, ...props }: PropsWithChildren<CoreProps> = {}) {
+export interface PosterProps extends CoreProps {
+  /** Draws the poster image in place of the one the skin renders. */
+  renderImage?: PropsOf<typeof $.Poster.Image>['children'];
+}
+
+export function Poster({ children, className, renderImage, ...props }: PropsWithChildren<PosterProps> = {}) {
   return (
-    <$.Poster className={[styles.root, className]} src={src} {...props}>
-      <Slot name="poster">{children}</Slot>
-    </$.Poster>
+    <$.Poster.Root className={[styles.root, className]}>
+      <Slot name="poster">
+        <$.Poster.Image className={styles.image} {...props}>
+          {renderImage}
+        </$.Poster.Image>
+      </Slot>
+      {children}
+    </$.Poster.Root>
   );
 }
 
diff --git a/packages/skins/src/gaps.md b/packages/skins/src/gaps.md
index 15f6e62813..92f557e574 100644
--- a/packages/skins/src/gaps.md
+++ b/packages/skins/src/gaps.md
@@ -20,13 +20,6 @@ This file tracks known parity and anatomy work carried forward from the retired
 
 These selectors currently preserve observable parity. Keep them as known ownership concerns rather than introducing new anatomy solely to remove a diagnostic warning.
 
-### Poster image ownership
-
-- Source: `6c8472118` / #2453 and `packages/skins/src/styles/layout/poster.styles.ts`
-- Gap: No observable parity gap is known, but the VJSC Poster root sizes authored `img` and Shadow DOM `::slotted(img)` descendants through structural selectors. An explicit image part would need to preserve target-specific and optional Shadow DOM rendering.
-- Affected: Default and Minimal skins; HTML and React targets; CSS and Tailwind outputs.
-- Recommendation: Hold the current selectors until Poster target markup and Shadow DOM requirements are settled. If ownership becomes a practical problem, evaluate `Poster.Image` across both targets rather than adding a styling-only wrapper.
-
 ### Thumbnail loading ownership
 
 - Source: `e20e54255` / #2259 and `packages/skins/src/styles/sliders/thumbnail.styles.ts`
diff --git a/packages/skins/src/skins/default/live-video/skin.tsx b/packages/skins/src/skins/default/live-video/skin.tsx
index eb3f6deeb2..2d8cc0808a 100644
--- a/packages/skins/src/skins/default/live-video/skin.tsx
+++ b/packages/skins/src/skins/default/live-video/skin.tsx
@@ -13,14 +13,14 @@ import { DefaultLiveVideoControls } from './controls';
 
 export interface DefaultLiveVideoSkinProps extends Omit<PropsOf<typeof Container>, 'children'> {
   children?: VjscNode;
-  renderPoster?: PropsOf<typeof Poster>['children'];
+  renderPoster?: PropsOf<typeof Poster>['renderImage'];
 }
 
 export function DefaultLiveVideoSkin({ children, className, renderPoster, ...props }: DefaultLiveVideoSkinProps = {}) {
   return (
     <Container className={[videoSkinStyles.root, className]} data-theme="default" data-preset="live-video" {...props}>
       <Slot>{children}</Slot>
-      <Poster>{renderPoster}</Poster>
+      <Poster renderImage={renderPoster} />
       <BufferingIndicator />
       <ErrorDialog />
       <DefaultLiveVideoControls />
diff --git a/packages/skins/src/skins/default/video/skin.tsx b/packages/skins/src/skins/default/video/skin.tsx
index 43249e87e2..9ae600a838 100644
--- a/packages/skins/src/skins/default/video/skin.tsx
+++ b/packages/skins/src/skins/default/video/skin.tsx
@@ -13,14 +13,14 @@ import { DefaultVideoControls } from './controls';
 
 export interface DefaultVideoSkinProps extends Omit<PropsOf<typeof Container>, 'children'> {
   children?: VjscNode;
-  renderPoster?: PropsOf<typeof Poster>['children'];
+  renderPoster?: PropsOf<typeof Poster>['renderImage'];
 }
 
 export function DefaultVideoSkin({ children, className, renderPoster, ...props }: DefaultVideoSkinProps = {}) {
   return (
     <Container className={[videoSkinStyles.root, className]} data-theme="default" data-preset="video" {...props}>
       <Slot>{children}</Slot>
-      <Poster>{renderPoster}</Poster>
+      <Poster renderImage={renderPoster} />
       <BufferingIndicator />
       <ErrorDialog />
 
diff --git a/packages/skins/src/skins/minimal/live-video/skin.tsx b/packages/skins/src/skins/minimal/live-video/skin.tsx
index 6e80d55488..b879066845 100644
--- a/packages/skins/src/skins/minimal/live-video/skin.tsx
+++ b/packages/skins/src/skins/minimal/live-video/skin.tsx
@@ -13,14 +13,14 @@ import { MinimalLiveVideoControls } from './controls';
 
 export interface MinimalLiveVideoSkinProps extends Omit<PropsOf<typeof Container>, 'children'> {
   children?: VjscNode;
-  renderPoster?: PropsOf<typeof Poster>['children'];
+  renderPoster?: PropsOf<typeof Poster>['renderImage'];
 }
 
 export function MinimalLiveVideoSkin({ children, className, renderPoster, ...props }: MinimalLiveVideoSkinProps = {}) {
   return (
     <Container className={[videoSkinStyles.root, className]} data-theme="minimal" data-preset="live-video" {...props}>
       <Slot>{children}</Slot>
-      <Poster>{renderPoster}</Poster>
+      <Poster renderImage={renderPoster} />
       <BufferingIndicator />
       <ErrorDialog />
       <MinimalLiveVideoControls />
diff --git a/packages/skins/src/skins/minimal/video/skin.tsx b/packages/skins/src/skins/minimal/video/skin.tsx
index 2c63ceb854..d16ef259a0 100644
--- a/packages/skins/src/skins/minimal/video/skin.tsx
+++ b/packages/skins/src/skins/minimal/video/skin.tsx
@@ -13,14 +13,14 @@ import { MinimalVideoControls } from './controls';
 
 export interface MinimalVideoSkinProps extends Omit<PropsOf<typeof Container>, 'children'> {
   children?: VjscNode;
-  renderPoster?: PropsOf<typeof Poster>['children'];
+  renderPoster?: PropsOf<typeof Poster>['renderImage'];
 }
 
 export function MinimalVideoSkin({ children, className, renderPoster, ...props }: MinimalVideoSkinProps = {}) {
   return (
     <Container className={[videoSkinStyles.root, className]} data-theme="minimal" data-preset="video" {...props}>
       <Slot>{children}</Slot>
-      <Poster>{renderPoster}</Poster>
+      <Poster renderImage={renderPoster} />
       <BufferingIndicator />
       <ErrorDialog />
 
diff --git a/packages/skins/src/styles/layout/poster.styles.ts b/packages/skins/src/styles/layout/poster.styles.ts
index d8c3e5cf04..3419248da2 100644
--- a/packages/skins/src/styles/layout/poster.styles.ts
+++ b/packages/skins/src/styles/layout/poster.styles.ts
@@ -6,18 +6,19 @@ export default styles({
   rules: {
     root: {
       utilities: [
-        'pointer-events-none layer-media object-media',
+        'pointer-events-none layer-media',
         'transition-opacity duration-media-slower not-data-visible:opacity-0',
-        '[&:is(img):not([src]):not([srcset])]:invisible',
-        '[&_img]:layer-media [&_img]:object-media',
       ],
       variants: {
+        // An image slotted in from outside the skin cannot carry the image class, so the root sizes it.
         'shadow-dom': [
-          '[&>slot>img:not([src]):not([srcset])]:invisible',
           '[&>slot::slotted(img:not([src]):not([srcset]))]:invisible',
           '[&>slot::slotted(img)]:layer-media [&>slot::slotted(img)]:object-media',
         ],
       },
     },
+    image: {
+      utilities: ['layer-media object-media', '[&:not([src]):not([srcset])]:invisible'],
+    },
   },
 });
diff --git a/packages/skins/src/tests/poster.test.ts b/packages/skins/src/tests/poster.test.ts
index 7817230e0d..cb0d542891 100644
--- a/packages/skins/src/tests/poster.test.ts
+++ b/packages/skins/src/tests/poster.test.ts
@@ -5,16 +5,15 @@ import { describe, expect, it } from 'vite-plus/test';
 const posterStyles = new URL('../styles/layout/poster.styles.ts', import.meta.url);
 
 describe('poster styles', () => {
-  it('hides rendered images while they have no source', async () => {
+  it('hides the image part while it has no source', async () => {
     const source = await readFile(posterStyles, 'utf8');
 
-    expect(source).toContain('[&:is(img):not([src]):not([srcset])]:invisible');
+    expect(source).toContain('[&:not([src]):not([srcset])]:invisible');
   });
 
-  it('hides source-less fallback and slotted images in the Shadow DOM', async () => {
+  it('hides source-less slotted images in the Shadow DOM', async () => {
     const source = await readFile(posterStyles, 'utf8');
 
-    expect(source).toContain('[&>slot>img:not([src]):not([srcset])]:invisible');
     expect(source).toContain('[&>slot::slotted(img:not([src]):not([srcset]))]:invisible');
   });
 });
diff --git a/packages/vjsc/src/plugins/target-type.ts b/packages/vjsc/src/plugins/target-type.ts
index 24e7f9fe79..ba3c8d21d8 100644
--- a/packages/vjsc/src/plugins/target-type.ts
+++ b/packages/vjsc/src/plugins/target-type.ts
@@ -1,5 +1,6 @@
 import type {
   JSXOpeningElement,
+  Node,
   Function as OxcFunction,
   Program,
   TSInterfaceDeclaration,
@@ -94,13 +95,27 @@ export function targetTypePlugin(options: ComponentTargetPluginOptions): Plugin
             const props = targetProps(root, imports, typeImports);
             if (!props) return;
 
+            // Children are typed by the part that renders them. That is usually the root, but a
+            // compound wrapper may hand them to a nested part instead, such as an image's `render`.
+            const childrenPart = helper.includesChildren ? childrenTarget(node, node.params[0], bindings) : undefined;
+            const childrenProps =
+              childrenPart && !sameTargetElement(root, childrenPart)
+                ? targetProps(childrenPart, imports, typeImports)
+                : undefined;
+
             const interfaceName = helper.sourceInterface?.declaration.id.name ?? `${node.id.name}Props`;
-            const heritage = targetHeritage(props, helper.includesChildren);
+            const heritage = targetHeritage(props, helper.includesChildren && !childrenProps);
             const members = helper.inlineMembers
               .map((type) => rewriteSourceTypeText(code, type, bindings, targets, imports, typeImports))
               .filter(Boolean);
 
-            if (helper.includesChildren && props.children && props.children !== 'children') {
+            if (declaresChildren(helper)) {
+              // The authored props already say what children are; only the heritage needs to make room.
+            } else if (childrenProps) {
+              members.push(
+                `children?: ${childrenProps.type}[${JSON.stringify(childrenProps.children ?? 'children')}];`
+              );
+            } else if (helper.includesChildren && props.children && props.children !== 'children') {
               members.push(`children?: ${props.type}[${JSON.stringify(props.children)}];`);
             }
 
@@ -186,7 +201,7 @@ function transformSourceTypes(
   let changed = false;
 
   walk(ast, {
-    enter(node) {
+    enter(node, parent) {
       if (
         node.type === 'TSInterfaceHeritage' &&
         node.expression.type === 'Identifier' &&
@@ -209,10 +224,11 @@ function transformSourceTypes(
 
       if (sourceType === 'PropsOf') {
         const query = node.typeArguments?.params[0];
-        const props = propsOfType(query, bindings, targets, imports, typeImports);
+        const props = propsOfReference(query, bindings, targets, imports, typeImports);
         if (!props) return;
 
-        magicString.overwrite(node.start, node.end, props);
+        for (const edit of propsOfEdits(node, parent, props)) magicString.overwrite(edit.start, edit.end, edit.content);
+
         changed = true;
         this.skip();
         return;
@@ -269,6 +285,19 @@ function propsHelper(
   return undefined;
 }
 
+/** Whether the authored props declare `children` themselves, inline or on the source interface. */
+function declaresChildren(helper: PropsHelper): boolean {
+  const members = [
+    ...helper.inlineMembers.flatMap((type) => (type.type === 'TSTypeLiteral' ? type.members : [])),
+    ...(helper.sourceInterface?.declaration.body.body ?? []),
+  ];
+
+  return members.some(
+    (member) =>
+      member.type === 'TSPropertySignature' && member.key.type === 'Identifier' && member.key.name === 'children'
+  );
+}
+
 function collectSourceInterfaces(ast: Program): ReadonlyMap<string, SourcePropsInterface> {
   const interfaces = new Map<string, SourcePropsInterface>();
 
@@ -315,21 +344,17 @@ function rewriteSourceTypeText(
   const edits: SourceEdit[] = [];
 
   walk(type, {
-    enter(node) {
+    enter(node, parent) {
       if (node.type !== 'TSTypeReference' || node.typeName.type !== 'Identifier') return;
 
       const name = bindings.sourceTypes.get(node.typeName.name);
 
       if (name === 'PropsOf') {
         const query = node.typeArguments?.params[0];
-        const props = propsOfType(query, bindings, targets, imports, typeImports);
+        const props = propsOfReference(query, bindings, targets, imports, typeImports);
         if (!props) return;
 
-        edits.push({
-          start: node.start,
-          end: node.end,
-          content: props,
-        });
+        edits.push(...propsOfEdits(node, parent, props));
         this.skip();
         return;
       }
@@ -353,6 +378,16 @@ function propsOfType(
   imports: ModuleImports,
   typeImports: ModuleImports
 ): string | undefined {
+  return propsOfReference(type, bindings, targets, imports, typeImports)?.type;
+}
+
+function propsOfReference(
+  type: TSType | undefined,
+  bindings: TypeBindings,
+  targets: readonly ComponentTarget[],
+  imports: ModuleImports,
+  typeImports: ModuleImports
+): ResolvedProps | undefined {
   if (type?.type !== 'TSTypeQuery') return undefined;
 
   const path = typeQueryPath(type.exprName);
@@ -363,7 +398,7 @@ function propsOfType(
     const rule = isTargetElement(configured) ? configured : canonical.target.components.resolve(canonical);
     if (!isTargetElement(rule)) return undefined;
 
-    return targetProps({ target: canonical.target, element: rule }, imports, typeImports)?.type;
+    return targetProps({ target: canonical.target, element: rule }, imports, typeImports);
   }
 
   if (path.length !== 1) return undefined;
@@ -373,7 +408,33 @@ function propsOfType(
 
   const componentProps = typeImports.reference(target);
 
-  return `NonNullable<${componentProps}<typeof ${path[0]}>>`;
+  return { type: `NonNullable<${componentProps}<typeof ${path[0]}>>` };
+}
+
+/**
+ * Replace a `PropsOf<typeof Part>` reference, and when it indexes `['children']` on a part whose target calls children
+ * something else, such as `render`, the index follows the target's name.
+ */
+function propsOfEdits(node: TSTypeReference, parent: Node | null | undefined, props: ResolvedProps): SourceEdit[] {
+  const edits: SourceEdit[] = [{ start: node.start, end: node.end, content: props.type }];
+
+  if (
+    props.children &&
+    props.children !== 'children' &&
+    parent?.type === 'TSIndexedAccessType' &&
+    parent.objectType === node &&
+    parent.indexType.type === 'TSLiteralType' &&
+    parent.indexType.literal.type === 'Literal' &&
+    parent.indexType.literal.value === 'children'
+  ) {
+    edits.push({
+      start: parent.indexType.start,
+      end: parent.indexType.end,
+      content: JSON.stringify(props.children),
+    });
+  }
+
+  return edits;
 }
 
 function typeQueryPath(name: TSTypeQuery['exprName']): string[] {
@@ -393,6 +454,58 @@ function forwardedBinding(parameter: OxcFunction['params'][number] | undefined):
   return rest?.type === 'RestElement' && rest.argument.type === 'Identifier' ? rest.argument.name : undefined;
 }
 
+/** The local name the component destructures its `children` prop into, if any. */
+function childrenBinding(parameter: OxcFunction['params'][number] | undefined): string | undefined {
+  const pattern = parameter?.type === 'AssignmentPattern' ? parameter.left : parameter;
+  if (pattern?.type !== 'ObjectPattern') return undefined;
+
+  for (const property of pattern.properties) {
+    if (property.type !== 'Property' || property.key.type !== 'Identifier' || property.key.name !== 'children') {
+      continue;
+    }
+
+    const value = property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
+
+    return value.type === 'Identifier' ? value.name : undefined;
+  }
+
+  return undefined;
+}
+
+/** The single target element that renders the component's `children`, when exactly one does. */
+function childrenTarget(
+  declaration: OxcFunction,
+  parameter: OxcFunction['params'][number] | undefined,
+  bindings: TypeBindings
+): { readonly target: ComponentTarget; readonly element: TargetElement } | undefined {
+  const binding = childrenBinding(parameter);
+  if (!binding) return undefined;
+
+  const matches: Array<{ target: ComponentTarget; element: TargetElement }> = [];
+
+  walk(declaration, {
+    enter(node, parent) {
+      if (
+        node.type !== 'JSXExpressionContainer' ||
+        node.expression.type !== 'Identifier' ||
+        node.expression.name !== binding ||
+        parent?.type !== 'JSXElement'
+      ) {
+        return;
+      }
+
+      const resolved = openingTarget(parent.openingElement, bindings);
+
+      if (resolved) matches.push(resolved);
+    },
+  });
+
+  const first = matches[0];
+  if (!first) return undefined;
+
+  return matches.every((match) => sameTargetElement(first, match)) ? first : undefined;
+}
+
 function forwardedTarget(
   declaration: OxcFunction,
   binding: string,
diff --git a/packages/vjsc/src/plugins/tests/target-type.test.ts b/packages/vjsc/src/plugins/tests/target-type.test.ts
index c554bb2a2f..6ea9ba5c6f 100644
--- a/packages/vjsc/src/plugins/tests/target-type.test.ts
+++ b/packages/vjsc/src/plugins/tests/target-type.test.ts
@@ -24,6 +24,14 @@ const schema = defineSchema('@fixture/components', {
       Trigger: defineComponent(),
     },
   }),
+  Poster: defineComponent({
+    name: 'Poster',
+    root: 'Root',
+    parts: {
+      Root: defineComponent(),
+      Image: defineComponent<{ src?: string | undefined }>(),
+    },
+  }),
 });
 
 const target = defineComponentTarget<typeof schema>()(({ element, imported }) => ({
@@ -34,7 +42,12 @@ const target = defineComponentTarget<typeof schema>()(({ element, imported }) =>
         from: '@fixture/react',
         name: component,
         path: part ? [part] : undefined,
-        props: { from: '@fixture/react', name: component, path: [part ? `${part}Props` : 'Props'] },
+        props: {
+          from: '@fixture/react',
+          name: component,
+          path: [part ? `${part}Props` : 'Props'],
+          children: component === 'Poster' && part === 'Image' ? 'render' : undefined,
+        },
       }),
     rules: {
       Menu: {
@@ -51,6 +64,7 @@ const target = defineComponentTarget<typeof schema>()(({ element, imported }) =>
     ClassNameValue: { from: 'clsx', name: 'ClassValue' },
     PropsOf: { from: 'react', name: 'ComponentProps' },
     VjscNode: { from: 'react', name: 'ReactNode' },
+    VjscElement: { from: 'react', name: 'ReactElement' },
   },
   jsx: { importSource: 'react', attributes: 'react' },
 }));
@@ -141,6 +155,55 @@ describe('targetTypePlugin', () => {
     expect(source).not.toContain("from './build-only'");
     expect(source.indexOf(`'use client'`)).toBeLessThan(source.indexOf('import type'));
   });
+
+  it('types children by the part that renders them', async () => {
+    const source = await transform(`
+      import * as $ from '@fixture/components';
+      import { type PropsOf, type PropsWithChildren } from 'vjsc/components';
+
+      export interface PosterProps {
+        renderImage?: PropsOf<typeof $.Poster.Image>['children'];
+      }
+
+      export function Poster({ children, className, renderImage, ...props }: PropsWithChildren<PosterProps> = {}) {
+        return (
+          <$.Poster.Root className={className}>
+            <$.Poster.Image {...props}>{renderImage}</$.Poster.Image>
+            {children}
+          </$.Poster.Root>
+        );
+      }
+    `);
+
+    expect(source).toContain(
+      'export interface PosterProps extends Omit<PosterPrimitive.ImageProps, "children" | "render">'
+    );
+    expect(source).toContain('renderImage?: PosterPrimitive.ImageProps["render"];');
+    expect(source).toContain('children?: PosterPrimitive.RootProps["children"];');
+  });
+
+  it('leaves children alone when the authored props declare them', async () => {
+    const source = await transform(`
+      import * as $ from '@fixture/components';
+      import { type PropsWithChildren, type VjscElement } from 'vjsc/components';
+
+      export interface FramedPosterProps {
+        children: VjscElement;
+      }
+
+      export function FramedPoster({ children, ...props }: PropsWithChildren<FramedPosterProps>) {
+        return (
+          <$.Poster.Root {...props}>
+            <$.Poster.Image>{children}</$.Poster.Image>
+          </$.Poster.Root>
+        );
+      }
+    `);
+
+    expect(source).toContain('export interface FramedPosterProps extends Omit<Poster.RootProps, "children">');
+    expect(source).toContain('children: ReactElement;');
+    expect(source).not.toContain('children?:');
+  });
 });
 
 async function transform(source: string): Promise<string> {
diff --git a/site/src/components/docs/demos/poster/react/css/BasicUsage.css b/site/src/components/docs/demos/poster/react/css/BasicUsage.css
index 134ca93169..8b8a8f0d78 100644
--- a/site/src/components/docs/demos/poster/react/css/BasicUsage.css
+++ b/site/src/components/docs/demos/poster/react/css/BasicUsage.css
@@ -12,7 +12,6 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
-  object-fit: cover;
   transition: opacity 0.25s;
 }
 
@@ -20,6 +19,12 @@
   opacity: 0;
 }
 
+.media-poster-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .media-play-button {
   position: absolute;
   bottom: 10px;
diff --git a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
index e916a741d4..2d7b8e2a0c 100644
--- a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
@@ -9,7 +9,9 @@ export default function BasicUsage() {
       <Container className="media-container">
         <Video src="{{VJS10_DEMO_VIDEO_MP4}}" playsInline />
 
-        <Poster className="media-poster" />
+        <Poster.Root className="media-poster">
+          <Poster.Image className="media-poster-image" />
+        </Poster.Root>
 
         <PlayButton
           className="media-play-button"
diff --git a/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx b/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx
index b33163cbd0..339f9bdde4 100644
--- a/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx
+++ b/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx
@@ -267,23 +267,25 @@ Ejecting a skin changes nothing about the first two approaches: the player's `po
 
 <FrameworkCase frameworks={["react"]}>
 
-Poster renders an `<img>` and fills its `src` from the player, so `srcSet`, `sizes`, `loading`, and the rest of the image attributes are yours. Provide your own `src` or `srcSet` and Video.js leaves the image alone.
+`Poster.Root` owns visibility and loading state. `Poster.Image` renders the image and fills its `src` from the player, so `srcSet`, `sizes`, `loading`, and the rest of the image attributes are yours. Provide your own `src` or `srcSet` and Video.js leaves the image alone.
 
-When your UI already includes Poster, apply a placeholder through its `render` prop:
+When your UI already includes Poster, apply a placeholder through the image's `render` prop:
 
 ```tsx
-<Poster
-  render={(props) => (
-    <img
-      {...props}
-      style={{
-        ...props.style,
-        background:
-          "url('data:image/webp;base64,…') var(--media-object-position, center) / contain no-repeat",
-      }}
-    />
-  )}
-/>
+<Poster.Root>
+  <Poster.Image
+    render={(props) => (
+      <img
+        {...props}
+        style={{
+          ...props.style,
+          background:
+            "url('data:image/webp;base64,…') var(--media-object-position, center) / contain no-repeat",
+        }}
+      />
+    )}
+  />
+</Poster.Root>
 ```
 
 </FrameworkCase>
diff --git a/site/src/content/docs/how-to/migrate-from-media-chrome.mdx b/site/src/content/docs/how-to/migrate-from-media-chrome.mdx
index 23e6b6303e..27affc264b 100644
--- a/site/src/content/docs/how-to/migrate-from-media-chrome.mdx
+++ b/site/src/content/docs/how-to/migrate-from-media-chrome.mdx
@@ -231,12 +231,14 @@ React buttons do not include visible content either. Use a button's `render` pro
 <FrameworkCase frameworks={["react"]}>
 These are PascalCase components rather than tags — `TimeSlider`, `VolumeSlider`, `BufferingIndicator`, `Poster`, `QualityRadioGroup` — and the compound parts are namespaced, so `media-slider-track` becomes `TimeSlider.Track`. See the <DocsLink slug="concepts/ui-components">UI components</DocsLink> concept for the full set.
 
-`Poster` is the one rename that changes shape. Put the poster URL on `VideoPlayer`; `Poster` renders the image and accepts image attributes such as `alt`, `srcSet`, and `sizes`:
+`Poster` is the one rename that changes shape. Put the poster URL on `VideoPlayer`; `Poster.Root` owns its state and `Poster.Image` accepts image attributes such as `alt`, `srcSet`, and `sizes`:
 
 ```tsx
 <VideoPlayer poster="/poster.jpg">
   <Container>
-    <Poster alt="" />
+    <Poster.Root>
+      <Poster.Image alt="" />
+    </Poster.Root>
   </Container>
 </VideoPlayer>
 ```
diff --git a/site/src/content/docs/reference/poster.mdx b/site/src/content/docs/reference/poster.mdx
index 8dd4913325..53c1bfe25e 100644
--- a/site/src/content/docs/reference/poster.mdx
+++ b/site/src/content/docs/reference/poster.mdx
@@ -30,7 +30,9 @@ import basicUsageHtmlTs from "@/components/docs/demos/poster/html/css/BasicUsage
 
 <FrameworkCase frameworks={["react"]}>
   ```tsx
-  <Poster />
+  <Poster.Root>
+    <Poster.Image />
+  </Poster.Root>
   ```
 </FrameworkCase>
 
@@ -46,6 +48,10 @@ import basicUsageHtmlTs from "@/components/docs/demos/poster/html/css/BasicUsage
 
 The poster shows before playback starts. Once the user plays or seeks, it hides; pausing does not bring it back. Loading a new source shows it again.
 
+<FrameworkCase frameworks={["html"]}>
+The `<img>` child is optional. Leave it out and `<media-poster>` draws one of its own in its shadow DOM.
+</FrameworkCase>
+
 You can set the poster URL on the player. This is useful when you want to change the poster from inside a skin, or keep all your media metadata in one place:
 
 <FrameworkCase frameworks={["react"]}>
@@ -65,20 +71,24 @@ You can set the poster URL on the player. This is useful when you want to change
 The component fills in a source only when you leave one out. `srcset`, `sizes`, `loading`, `<picture>`, and framework image components all stay available.
 
 <FrameworkCase frameworks={["react"]}>
-The component is the `<img>`, so image attributes go straight on it:
+`Poster.Root` owns visibility and loading state. Image attributes go on `Poster.Image`:
 
 ```tsx
-<Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
+<Poster.Root>
+  <Poster.Image srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
+</Poster.Root>
 ```
 
-To render something else, use `render`. It receives the poster URL as `src`, undefined until one resolves:
+To render a different image component, use `render` on `Poster.Image`. It receives the poster URL as `src`, undefined until one resolves:
 
 ```tsx
-<Poster
-  render={({ src, ...props }: ComponentProps<'img'>) =>
-    src ? <Image {...props} src={src} alt="" fill /> : null
-  }
-/>
+<Poster.Root>
+  <Poster.Image
+    render={({ src, ...props }: ComponentProps<'img'>) =>
+      src ? <Image {...props} src={src} alt="" fill /> : null
+    }
+  />
+</Poster.Root>
 ```
 
 Inside a skin, pass the same function as `renderPoster`. The skin draws your image in place of its own:
@@ -95,7 +105,7 @@ A skin styles the `<img>` it draws directly. Render something that is not an `<i
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
-`<media-poster>` renders no image of its own. It fills in the `src` of the image you put inside it:
+`<media-poster>` draws a fallback image in its shadow DOM and fills in its `src`. Put an `<img>` inside it and the element uses yours instead, filling in its `src` the same way:
 
 ```html
 <media-poster>
@@ -141,9 +151,10 @@ media-poster:not([data-visible]) {
 }
 ```
 
-The image is an ordinary child, so style it as a descendant:
+The image the element draws is exposed as a part. An image you supply is an ordinary child, so style it as a descendant:
 
 ```css
+media-poster::part(image),
 media-poster img {
   object-fit: cover;
 }
@@ -153,12 +164,24 @@ From inside a skin's shadow root, an image slotted from outside needs `::slotted
 </FrameworkCase>
 
 <FrameworkCase frameworks={["react"]}>
-React renders an `<img>` element. Add a `className` to style it:
+React renders a root `<div>` around the `<img>`. The state attributes are on `Poster.Root`, so other presentation layers can use the same lifecycle:
+
+```tsx
+<Poster.Root className="media-poster">
+  <img className="media-poster-blur" src={blurDataURL} alt="" aria-hidden />
+  <Poster.Image className="media-poster-image" />
+  <div className="media-poster-overlay" aria-hidden />
+</Poster.Root>
+```
 
 ```css
 .media-poster:not([data-visible]) {
   opacity: 0;
 }
+
+.media-poster:not([data-loading]) .media-poster-blur {
+  opacity: 0;
+}
 ```
 </FrameworkCase>
 
@@ -170,7 +193,9 @@ The image is decorative by default (`alt=""`), since a URL says nothing about wh
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-<Poster alt="Keynote speaker at a conference" />
+<Poster.Root>
+  <Poster.Image alt="Keynote speaker at a conference" />
+</Poster.Root>
 ```
 </FrameworkCase>