@ugcinc/remotion

Unified Remotion rendering package for UGC Inc. Provides shared types, components, and compositions for pixel-perfect client/server rendering using the same Chromium engine.

Why This Package?

Traditional canvas-based rendering has a fundamental problem: different canvas implementations (browser Canvas API vs server-side libraries like skia-canvas) produce subtly different results. This leads to:

- Text positioned differently between preview and final render
- Font metrics varying between engines
- Antialiasing and rendering differences

This package solves that by using Remotion, which renders everything through Chromium. The same browser engine runs on both:
- Client preview: @remotion/player - React component for preview
- Server render: @remotion/renderer - Headless Chromium for final output

Result: 100% pixel-perfect consistency between preview and render.

Installation

``bash
npm install @ugcinc/remotion remotion @remotion/player react
`

Quick Start

$3

`tsx
import { Player } from '@remotion/player';
import { ImageEditorComposition, type ImageEditorConfig } from '@ugcinc/remotion';

function ImageEditorPreview({ config }: { config: ImageEditorConfig }) {
const sources = {
background: 'https://example.com/bg.jpg',
'image-1': 'https://example.com/image1.jpg',
};

return (
component={ImageEditorComposition}
inputProps={{ config, sources }}
durationInFrames={1}
fps={1}
compositionWidth={config.width}
compositionHeight={config.height}
style={{ width: '100%', height: 'auto' }}
/>
);
}
`

$3

`ts
import { bundle } from '@remotion/bundler';
import { renderStill } from '@remotion/renderer';
import { ImageEditorComposition } from '@ugcinc/remotion';

async function renderImage(config: ImageEditorConfig) {
const bundled = await bundle({
entryPoint: './remotion/index.ts',
});

const output = await renderStill({
composition: {
id: 'ImageEditor',
component: ImageEditorComposition,
width: config.width,
height: config.height,
fps: 1,
durationInFrames: 1,
defaultProps: { config, sources },
},
serveUrl: bundled,
output: 'output.png',
chromiumOptions: {
gl: 'angle', // GPU acceleration
},
});

return output;
}
`

Types

All types are exported from the main package:

`ts
import type {
// Editor configs
ImageEditorConfig,
VideoEditorConfig,
EditorConfig,
Channel,

// Segments
TextSegment,
ImageSegment,
VideoSegment,
AudioSegment,
StaticSegment,

// Base types
TimeValue,
BorderRadiusConfig,
FitMode,
FontType,
FontWeight,

// Position types
RelativePositionConfigX,
RelativePositionConfigY,

// Crop types
DynamicCropConfig,
CropAxisConfig,
} from '@ugcinc/remotion';
`

Components

Individual element components for building custom compositions:

`tsx
import { TextElement, ImageElement, VideoElement } from '@ugcinc/remotion/components';

// Text with all styling options
segment={{
id: 'title',
type: 'text',
text: 'Hello World',
xOffset: 100,
yOffset: 100,
width: 800,
height: 200,
fontSize: 72,
fontType: 'tiktok',
fontWeight: 'bold',
color: '#ffffff',
strokeWidth: 4,
strokeColor: '#000000',
alignment: 'center',
verticalAlign: 'middle',
}}
/>

// Image with fit mode and border radius
segment={{
id: 'photo',
type: 'image',
xOffset: 50,
yOffset: 50,
width: 400,
height: 400,
fit: 'cover',
borderRadius: 20,
rotation: 5,
}}
src="https://example.com/photo.jpg"
/>
`

Compositions

Pre-built compositions for complete editor rendering:

$3

Renders a static image from an ImageEditorConfig.

`tsx
import { ImageEditorComposition } from '@ugcinc/remotion/compositions';

config={imageEditorConfig}
sources={{
background: 'https://...',
'image-1': 'https://...',
}}
scale={2} // 2x resolution for retina
/>
`

$3

Renders a video from a VideoEditorConfig with timeline support.

`tsx
import { VideoEditorComposition } from '@ugcinc/remotion/compositions';

config={videoEditorConfig}
sources={{
'video-1': 'https://...',
'audio-1': 'https://...',
}}
textContent={{
'text-1': 'Dynamic text content',
}}
/>
`

Utilities

Helper functions for font loading and calculations:

`ts
import {
preloadFonts,
areFontsLoaded,
getFontFamily,
calculateFitDimensions,
wrapText,
getBorderRadii,
} from '@ugcinc/remotion/utils';
`

Hooks

React hooks for common operations:

`ts
import { useFontsLoaded, useImageLoader, useImagePreloader } from '@ugcinc/remotion/hooks';

function MyComponent() {
const fontsReady = useFontsLoaded();
const { loaded, images } = useImagePreloader(sources);

if (!fontsReady || !loaded) {
return

return ;
}
`

GPU Acceleration

When rendering on a server with GPU, use the --gl=angle flag for faster frame rendering:

`ts
await renderMedia({
// ...
chromiumOptions: {
gl: 'angle', // Enable GPU acceleration
},
});
``

License

MIT