Transition Clock Wipe
A sweep hand travels the frame and leaves the next scene behind it.
PrimitiveTransitionsAdvanced
transition-clock-wipe30fps · 960×540
Install
$ npx remotion-ui@latest add transition-clock-wipewidth and height are optional: the presentation reads the composition size
itself. Previously every caller had to reach for useVideoConfig() before it
could build a transition config — including in places where hooks are not
available. Pass them explicitly only to sweep a different radius than the frame.
<TransitionSeries.Transition {...transitionClockWipe()} />Exports transitionClockWipe() and getTransitionClockWipeDuration() 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 →
Import
@/remotion/primitives/transition-clock-wipe- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, width, height, 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
Example
import { transitionClockWipe } from "@/remotion/primitives/transition-clock-wipe";
<TransitionSeries.Transition {...transitionClockWipe({ width: 1920, height: 1080 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 26 | Transition overlap length. |
| width | number | - | Sweep width. Defaults to the composition width. |
| height | number | - | Sweep height. Defaults to the composition height. |