scale()<AvailableFrom v="4.0.466" />

Part of the @remotion/effects package.

A scale effect that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview

Example

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

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[scale({scale: 0.8})]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties.

scale

The scale factor. Defaults to 1. Must be greater than 0.

horizontal?

Whether to apply horizontal scaling. Defaults to true.

vertical?

Whether to apply vertical scaling. Defaults to true.

Set one axis to false for a directional scaling:

effects={[scale({scale: 0.9, horizontal: true, vertical: false})]}

disabled?

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

See also

• @remotion/effects
• blur()
• Source code for this effect