Image Expand
A still opens from a card to full frame, then takes its caption.
CompositionAdvanced
image-expand30fps · 960×540
Install
$ npx remotion-ui@latest add image-expandTwo beats. The frame opens from a small card to the full canvas on a perceptual
scale ramp, and once it has landed the caption block rises over a scrim at the
bottom: eyebrow, title, subtitle.
src is the point of the component. Without one the frame expands as a tinted
plate, which is useful as a transition card but is not what the name promises.
Any <Img>-compatible source works; use staticFile() for local media.
1920×1080 thumbnail expands to full frame.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/image-expand- Use when: complete video templates that can be customized as source.
- Customize: accentColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { ImageExpand } from "@/compositions/image-expand";
<ImageExpand accentColor="#e8b86d" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#e8b86d" | Thumbnail accent color. |