# HeroMedia

> Full-bleed image, carousel, or video media layer for hero sections

Canonical URL: https://c22dfdd27662:3005/islands/commerce/hero-media

> Immersive media background for landing-page heroes, campaign headers, and collection banners.

## Preview

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| type | enum | yes | - | `image`, `carousel`, or `video` |
| src | string | no | - | Image source for image mode |
| mobileSrc | string | no | - | Mobile image source |
| alt | string | no | - | Accessible image description |
| effect | enum | no | none | `none`, `parallax`, `ken-burns`, or `zoom-on-scroll` |
| slides | array | no | - | Slide sources for carousel mode |
| autoplay | boolean | no | true | Auto-advance carousel slides |
| interval | number | no | 5000 | Carousel interval in milliseconds |
| videoSrc | string | no | - | Video source for video mode |
| poster | string | no | - | Poster shown while video loads |
| overlay | number | no | 0 | Overlay opacity from 0 to 100 |
| minHeight | string | no | 100vh | Minimum media height |

## Embed Example

```html
<lx-island name="HeroMedia">
  <script type="application/json">
{
  "type": "image",
  "src": "https://cdn.example.com/hero.jpg",
  "alt": "Product collection hero",
  "overlay": 45
}
  </script>
</lx-island>
```

## Usage

Use inside a parent hero section with `position: relative` and
`overflow: hidden`. Keep foreground copy and calls to action in normal HTML
so they remain independently editable and accessible.

## Related Islands

- [CountdownTimer](/islands/content/countdown-timer) — Overlay campaign urgency
- [EmailCapture](/islands/engagement/email-capture) — Overlay a lead form
- [ProductHero](/islands/commerce/product-hero) — Use for product-focused hero layouts