Frosted Glass Wipe
A pane of frosted glass crosses the frame and leaves the next scene behind it.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add frosted-glass-wipeOne panel of blurred glass travels across the frame, and the scene changes behind it. Because the panel covers the seam, the cut underneath can be hard — the outgoing scene holds whole until the glass has passed over it.
direction takes any of the four edges, panelWidth is the pane's width as a
share of the frame, and frostColor tints the glass. The pane parks off-frame
at both ends, so it never sits over a scene that is not moving.
Exports transitionFrostedGlassWipe() and getTransitionFrostedGlassWipeDuration()
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/frosted-glass-wipe- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, blur, panelWidth, direction, 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 { transitionFrostedGlassWipe } from "@/remotion/primitives/frosted-glass-wipe";
<TransitionSeries.Transition {...transitionFrostedGlassWipe({ blur: 20 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 24 | Transition overlap length. |
| blur | number | 20 | Frost panel blur radius. |
| panelWidth | number | 0.14 | Sweep panel width as fraction of frame. |
| direction | "from-left" | "from-right" | "from-top" | "from-bottom" | "from-left" | Sweep direction. |
| frostColor | string | "rgba(255,255,255,0.12)" | Tint of the glass panel. |