ContextQMD
Back to Remotion

mirror()

packages/docs/docs/effects/mirror.mdx

4.0.4861.8 KB
Original Source

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

Part of the @remotion/effects package.

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

Preview

<EffectsDemo type="effects-mirror" />

Example

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

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          mirror({
            direction: 'horizontal',
            position: 0.5,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties.

direction?

Mirror direction. Defaults to 'horizontal'.

  • 'horizontal' mirrors left and right. The position is interpreted on the X axis.
  • 'vertical' mirrors top and bottom. The position is interpreted on the Y axis.

position?

Mirror position in UV coordinates from 0 to 1. Defaults to 0.5.

invert?

When true, mirrors the other side of the image. Defaults to false.

disabled?

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

Requirements

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

See also