Skip to main content

skew()v4.0.491

Part of the @remotion/effects package.

Skews a canvas-based component horizontally and vertically with a WebGL2 shader.

Pixels moved outside the canvas are clipped. Newly uncovered regions are transparent.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {Video} from '@remotion/media';
import {AbsoluteFill, staticFile} from 'remotion';
import {skew} from '@remotion/effects/skew';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src={staticFile('video.mp4')}
        effects={[skew({x: 24, y: 0, origin: [0.25, 0.5]})]}
      />
    </AbsoluteFill>
  );
};

API​

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

x?​

Horizontal skew angle in degrees. Defaults to 20.

Must be greater than -89 and less than 89.

y?​

Vertical skew angle in degrees. Defaults to 0.

Must be greater than -89 and less than 89.

origin?​

The origin of the skew as a UV coordinate. Defaults to [0.5, 0.5].

[0, 0] is the top-left corner and [1, 1] is the bottom-right corner.

disabled?​

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

Requirements​

skew() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer('angle'). See Using WebGL during renders.

See also​