# Images & Media

> Filters, overlays, backgrounds, video, and embeds

## Image filters

`Image` applies CSS filters directly, so a photo can be tuned to a deck's
palette without an editor in the loop.

```tsx
import { Image } from "@getnarro/shared-ui";

<Image src="/photo.jpg" alt="The team" filter="grayscale" />;
```

Presets: <!-- generated:list:ImageFilter -->`none`, `blur`, `grayscale`, `sepia`, `brightness`, `contrast`, `saturate`, `hue-rotate`, `invert`, `opacity`, `drop-shadow`<!-- /generated:list:ImageFilter -->.

Anything else, pass CSS directly:

```tsx
<Image src="/photo.jpg" alt="Tuned" customFilter="brightness(80%) contrast(110%)" />
```

## Colour overlays

Tint an image to match the deck:

```tsx
<Image src="/photo.jpg" alt="Tinted" overlay="#3b82f6" overlayOpacity={0.4} />
```

Overlays are also the practical way to get readable text over a photo — a dark
overlay at 0.5 will rescue almost any background.

## Full-bleed backgrounds

```tsx
import { ImageBackground } from "@getnarro/shared-ui";

<Slide id="cover">
  <ImageBackground src="/hero.jpg" overlay="dark">
    <Heading level={1}>Over the image</Heading>
  </ImageBackground>
</Slide>;
```

## Large and zoomable images

- `ScrollableImage` — a tall screenshot the audience scrolls through
- `ZoomImage` — click to magnify, for dense diagrams
- `ImageSpotlight` — Keynote-style Magic Move between framings of one image
  across slides, by giving each a shared `spotlightId`

## Video

```tsx
import { Video } from "@getnarro/shared-ui";

<Video src="/demo.mp4" autoPlay loop muted />;
```

Browsers block autoplay with sound, so `autoPlay` needs `muted` to be reliable.
For a demo you will narrate over, that is what you want anyway.

## Embeds

```tsx
import { Embed } from "@getnarro/shared-ui";

<Embed url="https://example.com" title="Live site" aspectRatio="16:9" />

<Embed url="https://www.youtube.com/watch?v=VIDEO_ID" title="Talk" />
```

YouTube and Vimeo URLs are converted to their embed form automatically. Sites
that send `X-Frame-Options: DENY` cannot be framed at all — no library can work
around that, so screenshot those with `narro capture-website <url>`.

Embedded pages need the network. If the venue's wifi is a gamble, capture a
screenshot as a fallback slide.

## Animated backgrounds

`@getnarro/core` ships three, all of which pause when their slide is off screen:

```tsx
import { MasonryBackground, NebulaBackground, TrustedByMarquee } from "@getnarro/core";

<NebulaBackground isActive>
  <Heading level={1}>Starfield behind the title</Heading>
</NebulaBackground>

<MasonryBackground
  images={["/a.jpg", "/b.jpg", "/c.jpg"]}
  gridColumns={12}
  gridRows={6}
  swapMinIntervalMs={3000}
  swapMaxIntervalMs={6000}
/>

<TrustedByMarquee
  rows={[[{ name: "Acme", color: "#ffffff" }], [{ name: "Globex", color: "#60a5fa" }]]}
  isActive
  baseSpeed={40}
/>
```

Full prop tables: [component reference](/docs/components).