Skip to main content

tile()v4.0.513

Part of the @remotion/effects package.

Repeats the non-transparent area of a canvas source across the canvas. Every other copy is mirrored so neighboring tiles meet at matching edges.

Place scale() before tile() to expand a texture beyond its original edges.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {tile} from '@remotion/effects/tile';
import {scale} from '@remotion/effects/scale';

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

Effects are applied in array order. tile() finds the non-transparent bounds left by scale() and alternates mirrored copies along each enabled axis.

API​

You can call tile() without arguments or pass an object with the following properties.

horizontal?​

Whether to repeat the tile horizontally. Defaults to true.

vertical?​

Whether to repeat the tile vertically. Defaults to true.

disabled?​

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

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​