Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View sourceVideoRemotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup

Sizing and positioning

Use the style prop to control size and position:

tsx
<Img  src={staticFile("photo.png")}  style={{    width: 500,    height: 300,    position: "absolute",    top: 100,    left: 50,    objectFit: "cover",  }}/>

Dynamic image paths

Use template literals for dynamic file references:

tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
const frame = useCurrentFrame();
// Image sequence<Img src={staticFile(`frames/frame${frame}.png`)} />
// Selecting based on props<Img src={staticFile(`avatars/${props.userId}.png`)} />
// Conditional images<Img  src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)}/>

This pattern is useful for:

  • Image sequences (frame-by-frame animations)
  • User-specific avatars or profile images
  • Theme-based icons
  • State-dependent graphics

Getting image dimensions

Use getImageDimensions() from @remotion/media-utils to get the dimensions of an image:

tsx
import { getImageDimensions } from "@remotion/media-utils";import { staticFile } from "remotion";
const { width, height } = await getImageDimensions(staticFile("photo.png"));

This is useful for calculating aspect ratios or sizing compositions:

tsx
import { getImageDimensions } from "@remotion/media-utils";import { staticFile, CalculateMetadataFunction } from "remotion";
const calculateMetadata: CalculateMetadataFunction = async () => {  const { width, height } = await getImageDimensions(staticFile("photo.png"));  return {    width,    height,  };};