Venetian Blinds

$ pnpm dlx shadcn@latest add @remocn/venetian-blinds

Usage

venetianBlinds() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The outgoing scene is cut into slats horizontal strips. Each strip rotates around its own horizontal axis until it is edge-on, picking up shadeColor as it turns away from the light, and fades out just before it becomes a hairline. The strips start one after another in a ripple whose spread is set by stagger. Behind them the incoming scene settles from a slight 1.06 zoom to rest.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { venetianBlinds } from "@/components/remocn/venetian-blinds";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 26 })}
      presentation={venetianBlinds({ direction: "center" })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

The outgoing scene is rendered once per slat (12 copies by default), so render cost grows with slats. Keep the outgoing scene light, or lower slats, if renders slow down.

Variations

• direction: "top-down" (default) starts at the top slat, "bottom-up" at the bottom, "center" opens from the middle outward.
• stagger: 0 turns every slat at once. Higher values stretch the ripple; at 0.9 each slat gets only a tenth of the transition to turn.
• A lighter shadeColor such as "#FFFFFF" makes the slats catch light instead of falling into shadow.

Props

venetianBlinds(props) accepts: