Skip to main content

venetianBlinds()v4.0.485

Part of the @remotion/effects package.

Reveals a canvas-based component through vertical or horizontal blinds.

Use it for slatted wipes, intro animations, and outro animations on <Video>, <HtmlInCanvas> and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
import {Video} from '@remotion/media';
import {venetianBlinds} from '@remotion/effects/venetian-blinds';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 45], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          venetianBlinds({
            progress,
            direction: 'vertical',
            slats: 14,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

progress?​

Reveal progress from 0 (fully hidden) to 1 (fully revealed). Defaults to 0.5.

direction?​

Orientation of the blinds. Defaults to vertical.

Possible values: vertical, horizontal.

slats?​

Number of blinds across the source. Must be a positive integer. Defaults to 12.

disabled?​

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

Requirements​

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

See also​