Photo Fill Type
A word cut out of the stage opens onto a photo that fills the frame, followed by a caption.
$ pnpm dlx shadcn@latest add @remocn/photo-fill-typeUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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
Default
1