uvTranslate()<AvailableFrom v="4.0.467" />

Part of the @remotion/effects package.

A translate effect that moves a canvas-based component by normalized UV coordinates.

It can be applied to components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview

Example

tsx

import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {uvTranslate} from '@remotion/effects/translate';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[uvTranslate({u: 0.1, v: 0.05})]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties. You can also call uvTranslate() without arguments.

`u?`

Horizontal offset in UV coordinates. Defaults to 0.

1 equals the full canvas width. Positive values move the image to the right, negative values move it to the left.

`v?`

Vertical offset in UV coordinates. Defaults to 0.

1 equals the full canvas height. Positive values move the image down, negative values move it up.

`disabled?`

When true, the effect is skipped. Defaults to false.

uvTranslate()