Photo Fill Type

A word cut out of the stage opens onto a photo that fills the frame, followed by a caption.

Installation
$ pnpm dlx shadcn@latest add @remocn/photo-fill-type

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoFillType } from "@/components/remocn/photo-fill-type";
 
const PhotoFillTypeScene = () => (
  <PhotoFillType title="Dusk" caption="Not a photograph. Every pixel is code." src={staticFile("shots/dusk.jpg")} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PhotoFillType"
    component={PhotoFillTypeScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

The word sits as a cutout with the image visible through its letters, then expands until the image fills the frame and a caption fades in. Pass title and caption, and src with your own image to replace the built-in generated landscape; it ships light and dark through theme.

Props6

PropTypeDefault
title
string"Dusk"

Word cut out of the stage; shows the image inside

caption
string"Not a photograph. Every pixel is code."

Line that fades in after the image fills the frame

src
string—

Image shown through the word; defaults to a generated landscape

accent
string"#3B5BFD"

Accent color (any valid CSS color)

theme
"dark" | "light""dark"

Ships light and dark palettes

speed
number1

Playback speed multiplier

  • titlestring

    Word cut out of the stage; shows the image inside

    Default"Dusk"

  • captionstring

    Line that fades in after the image fills the frame

    Default"Not a photograph. Every pixel is code."

  • srcstring

    Image shown through the word; defaults to a generated landscape

  • accentstring

    Accent color (any valid CSS color)

    Default"#3B5BFD"

  • theme"dark" | "light"

    Ships light and dark palettes

    Default"dark"

  • speednumber

    Playback speed multiplier

    Default1