Skip to main content

burlap()v4.0.478

Part of the @remotion/effects package.

Adds a procedural woven burlap texture to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

The effect preserves the source colors and alpha mask. Transparent regions stay transparent.

Preview​

Drag current effect into a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill, Solid} from 'remotion';
import {burlap} from '@remotion/effects/burlap';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Solid
        width={1280}
        height={720}
        color="#c7a060"
        effects={[
          burlap({
            amount: 0.75,
            size: 4,
            roughness: 0.85,
            seed: 1,
            color: '#3b2818',
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

amount?​

Strength from 0 to 1. Defaults to 0.55.

Use 0 to leave the layer unchanged.

size?​

Distance between weave strands in pixels. Defaults to 5.

Must be greater than 0. Smaller values create a tighter weave.

roughness?​

Irregularity of the fibers from 0 to 1. Defaults to 0.7.

Use 0 for a cleaner grid. Higher values add more mottling and broken fibers.

seed?​

Seed for the procedural fiber pattern. Defaults to 0.

Change it to get a different static weave.

color?​

Color of the darker weave fibers. Defaults to #000000.

Use a brown color for a natural burlap look, or another color to tint the fiber marks. Alpha in the color controls how strongly the fiber color is mixed in.

disabled?​

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

Requirements​

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

See also​