compositions

A `` defines the component, width, height, fps and duration of a renderable video.

It normally is placed in the src/Root.tsx file.

  return (
    
  );
};

Default Props

Pass defaultProps to provide initial values for your component. Values must be JSON-serializable (Date, Map, Set, and staticFile() are supported).

  return (
    
  );
};

Use type declarations for props rather than interface to ensure defaultProps type safety.

Folders

Use `` to organize compositions in the sidebar. Folder names can only contain letters, numbers, and hyphens.

  return (
    <>
      
        
        
      
      
        
          
          
        
      
    </>
  );
};

Stills

Use `` for single-frame images. It does not require durationInFrames or fps.

  return (
    
  );
};

Calculate Metadata

Use calculateMetadata to make dimensions, duration, or props dynamic based on data.

const calculateMetadata: CalculateMetadataFunction = async ({
  props,
  abortSignal,
}) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
    signal: abortSignal,
  }).then((res) => res.json());

  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: {
      ...props,
      videoUrl: data.url,
    },
  };
};

  return (
    
  );
};

The function can return props, durationInFrames, width, height, fps, and codec-related defaults. It runs once before rendering begins.