Skip to main content

roughenEdges()v4.0.487

Part of the @remotion/effects package.

Roughens the alpha boundary of canvas-based components such as <Video>, <HtmlInCanvas>, <CanvasImage> and <Solid>.

Use it on transparent logos, text, masks and cutouts to create an irregular paper-like edge without adding the full paper() texture.

Based on the open-source Paper Shaders noise helpers.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {roughenEdges} from '@remotion/effects/roughen-edges';
import {AbsoluteFill, CanvasImage, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <CanvasImage
        src={staticFile('logo-with-alpha.png')}
        width={1280}
        height={720}
        fit="contain"
        effects={[
          roughenEdges({
            border: 26.5,
            scale: 0.07,
            seed: 231.2,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

amount?​

Strength of the roughened edge from 0 to 1. Defaults to 1.

Use 0 to leave the layer unchanged.

border?​

Size of the roughened edge in pixels. Defaults to 26.5.

Higher values allow the edge to move farther inward and outward. Must be between 0 and 200.

scale?​

Scale of the generated edge noise from 0.01 to 4. Defaults to 0.07.

Smaller values create finer edge detail. Larger values create broader, wavier edges.

seed?​

Seed for the generated edge pattern from 0 to 1000. Defaults to 231.2.

Change it to get a different static edge pattern. To animate the edge, pass a value derived from useCurrentFrame().

disabled?​

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

Requirements​

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

See also​