Blinds
Staggered slats sweeping open to reveal the next scene.
PrimitiveTransitions
$ npx remotion-ui@latest add transition-blindsThe arriving scene is masked by slats bands, each sweeping open along the
short axis with a cascading start. The outgoing scene holds whole beneath them —
cutting it into slats too would open every gap onto the background rather than
onto the next scene.
stagger is the share of the window the cascade spans. The per-slat window is
compressed so the last slat still finishes exactly at full coverage; a naive
delay leaves the tail of the stack short of open at the end of the transition,
which shows as permanent stripes over the scene for the rest of its sequence.
alternate reverses every second slat for a woven counter-sweep, and
edgeSoftness feathers each slat's leading edge. The feather is measured
outside the slat, so a slat at full progress is solid all the way across.
Exports transitionBlinds() and getTransitionBlindsDuration() for use with
TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-blinds- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, orientation, slats, stagger, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { transitionBlinds } from "@/remotion/primitives/transition-blinds";
<TransitionSeries.Transition {...transitionBlinds({ slats: 12, stagger: 0.45 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 24 | Transition overlap length. |
| orientation | "horizontal" | "vertical" | "horizontal" | Horizontal slats stack top to bottom and sweep sideways. |
| slats | number | 12 | Number of slats. Above ~24 it stops reading as slats at 1080p. |
| stagger | number | 0.45 | Share of the window the cascade spans. 0 opens every slat together. |
| alternate | boolean | false | Reverse alternate slats for a woven counter-sweep. |
| edgeSoftness | number | 0.06 | Soft leading edge per slat, as a share of its length. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |