🖼️ Images & Media

How do I use an image as a background, tint it, or embed a video?

2 min readView as markdown

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.

IntroductionWhat is Narro, and should I be writing markdown or React?
InstallationWhat do I install, and what does the project look like afterwards?
First DeckWhat does a working React deck look like, end to end?
Markdown ModeHow do I split a slide, style one word, or reveal a line — without leaving the markdown file?
Writing AI PromptsWhat do I tell an AI so the deck it writes actually builds?
Rules for AI AgentsWhat do I paste into my repo so an agent stops writing decks that build wrong?
React APIWhich component or hook do I import, and what does it take?
CLIWhich command do I run, and what are its flags?
Markdown APIHow do I read, edit, or validate a deck file from my own code instead of by hand?
Component ReferenceWhat props does this component take, and which package do I import it from?
Verifying a deckHow do I know my deck is actually correct?
AnimationHow do I reveal a list one line at a time, or move between slides with something other than a cut?
NavigationHow does the audience move through the deck, and how do I present it?
Canvas & PositioningHow do I put something at an exact position instead of in the flow?
Images & MediaHow do I use an image as a background, tint it, or embed a video?
ArchitectureWhich package owns what, and why is the seam where it is?
Transform ModeHow do I zoom and pan across one big canvas instead of cutting between slides?
Import & ExportHow do I get this deck out as PPTX, PDF, or one file I can email?
AI IntegrationHow do I wire an AI assistant up to Narro so it can write and build decks?
ThemingHow do I change the colours, fonts, and overall look of a deck?
Deck TemplatesHow do I define one house style with named layouts my slides can reference, like a PowerPoint master?
TroubleshootingSomething is wrong with my deck. What is it, and how do I fix it?
LimitationsWhat can't Narro do, and what do I do instead?