Images & Media

Image filters

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

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

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

Presets: none, blur, grayscale, sepia, brightness, contrast, saturate, hue-rotate, invert, opacity, drop-shadow.

Anything else, pass CSS directly:

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

Colour overlays

Tint an image to match the deck:

<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

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

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

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:

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.