@techthrives/remotion-compositions

@remotion-x/compositions

A library of pre-built Remotion compositions to easily create engaging video content.

Installation

npm install @remotion-x/compositions @remotion/player remotion react react-dom
# or
yarn add @remotion-x/compositions @remotion/player remotion react react-dom

Note: This library has peer dependencies on remotion, react, and react-dom because it is built using these technologies internally. Make sure you have these installed in your Remotion project. You will also need to install @remotion/player in your consuming project to render the compositions provided by this library.

Usage

Here's how to use the composition provided by this library.

FacelessShortComposition

import React from 'react';
import { Player } from '@remotion/player';
import { FacelessShortComposition, IFacelessShortConfig } from '@remotion-x/compositions';

const durationInSec = 10; // Example duration in seconds
const durationInFrames = 30 * durationInSec;

// Define the configuration for the FacelessShortComposition
const facelessShortConfig: IFacelessShortConfig = {
  videoSource: 'AiImage', // Choose 'AiImage' for image sequences or 'Video' for a single video
  caption: {
    text: 'This is an example caption for the video.',
    segments: [
      {
        index: 0,
        start: 0,
        end: durationInFrames,
        text: 'This is an example caption for the video.',
        words: [
          { start: 0, end: durationInFrames / 4, text: 'This' },
          { start: durationInFrames / 4, end: durationInFrames / 2, text: 'is' },
          { start: durationInFrames / 2, end: (3 * durationInFrames) / 4, text: 'an' },
          { start: (3 * durationInFrames) / 4, end: durationInFrames, text: 'example caption.' },
        ],
      },
    ],
    language: 'en',
  },
  voice: 'your-voice-url.mp3', // Voice for your video
  imageSegments: [ // Required if videoSource is 'AiImage'
    { index: 0, image: 'your-image-url-1.jpg', start: 0, end: durationInFrames / 2 },
    { index: 1, image: 'your-image-url-2.jpg', start: durationInFrames / 2, end: durationInFrames },
  ],
  video: 'your-video-url.mp4', // Only if videoSource is 'Video'
  bgSong: 'your-background-music.mp3', // Optional: Background music URL
  bgSongVol: 0.5, // Optional: Background music volume (0-1)
  captionStyle: {
    captionType: 'Line', // Choose from 'Line', 'WordByWord', 'Spotlight', 'Segment', 'Karaoke'
    textColor: '#ffffff',
    bgColor: 'rgba(0, 0, 0, 0.7)',
    font: 'Arial',
    fontSize: 48,
  },
  transition: { // Optional: Transition effect
    transitionDuration: 15,
    transitionType: 'Dissolve', // Choose from 'Dissolve', 'FadeToColor', 'Wipe', 'Slide', 'Zoom', 'Shake', 'Glitch'
    params: {}, // Specific parameters for the chosen transition type
  },
  applyCaption: true, // Set to false to disable caption rendering
};

function MyVideo() {
  return (
    <Player
      component={FacelessShortComposition}
      inputProps={facelessShortConfig}
      durationInFrames={durationInFrames}
      compositionWidth={1080}
      compositionHeight={1920}
      style={{
        width: 9 * 36,
        height: 16 * 36,
      }}
      className="rounded-lg"
      fps={30}
      controls
      acknowledgeRemotionLicense
    />
  );
}

export default MyVideo;