Skip to main content

emboss()v4.0.479

Part of the @remotion/effects package.

Adds a procedural raised-line relief 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 onto a layer in the Studio

Example​

MyComp.tsx
import {emboss} from '@remotion/effects/emboss';
import {Video} from '@remotion/media';
import {useCurrentFrame} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          emboss({
            amount: 0.85,
            size: 24,
            lineWidth: 6,
            depth: 0.85,
            angle: 0,
            lightAngle: 135,
            offset: frame * 0.6,
          }),
        ]}
      />
    </>
  );
};

API​

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

amount?​

Strength from 0 to 1. Defaults to 0.7.

Use 0 to leave the layer unchanged.

size?​

Size of the repeated relief cells in pixels. Defaults to 26.

Must be greater than 0. Smaller values create a tighter relief pattern.

lineWidth?​

Width of each raised dash in pixels. Defaults to 7.

Must be greater than 0. Values larger than the cell size are clamped by the shader.

depth?​

Height of the virtual relief from 0 to 1. Defaults to 0.75.

Use lower values for flatter shading.

angle?​

Rotates the repeated relief pattern in degrees. Defaults to 0.

lightAngle?​

Direction of the virtual light in degrees. Defaults to 135.

Change this value to move the highlight and shadow edges of the raised pattern.

offset?​

Offset in pixels. Defaults to 0.

Animate this value with useCurrentFrame() to scroll the relief pattern.

disabled?​

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

Requirements​

emboss() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.

See also​