emocn

Caret Wipe

Sweep a typing caret across the frame, wiping the outgoing scene into the next

Installation

$ pnpm dlx shadcn@latest add @remocn/caret-wipe

Usage

caretWipe() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. A text caret sweeps across the frame — the outgoing scene is erased behind it and the incoming scene is typed in ahead of it, like a cursor rewriting the screen.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { caretWipe } from "@/components/remocn/caret-wipe";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 40 })}
      presentation={caretWipe({ direction: "right" })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Props

caretWipe(props) accepts:

PropTypeDefaultDescription
direction
"left" | "right""right"Sweep direction. `right` types the screen left→right; `left` reverses it.
caretColor
string"#C3E88D"The caret's color — the remocn lime by default.
caretWidth
number3Caret bar width, in pixels.
caretHeight
number0.5Caret bar height as a fraction of frame height (0–1), vertically centered.

ASCII DissolveNEW

Dissolve one scene into the next through a drifting field of ASCII glyphs

Icon ScatterNEW

Scatter a field of icons over the cut, hiding the scene swap at the field's peak