Typed Split Wipe

A centered cursorless type build exits through opposing fixed-layout glyph wipes

Installation

$ pnpm dlx shadcn@latest add @remocn/typed-split-wipe

Usage

The enter renders only the currently typed substring, so every hard character step remains centered. At exitAt, the component switches to a visually identical fixed layout. The prefix clips from right to left and suffix words clip from left to right with a stagger. While those gaps open, the anchor travels left by anchorShift, making the empty spaces on its two sides deliberately uneven before it closes last from both sides.

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";
 
const TypedSplitWipeScene = () => (
  <TypedSplitWipe
    prefix="Introducing"
    anchor="X"
    suffix="Ads MCP"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TypedSplitWipe"
    component={TypedSplitWipeScene}
    durationInFrames={75}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

The component is transparent. The reference uses warm white text on an almost-black field.

tsx

import { Composition } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";
 
const TypedSplitWipeScene = () => (
  <Backdrop fill={{ type: "color", value: "#101010" }}>
    <TypedSplitWipe
      prefix="Introducing"
      anchor="X"
      suffix="Ads MCP"
    />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="TypedSplitWipe"
    component={TypedSplitWipeScene}
    durationInFrames={75}
    fps={30}
    width={1280}
    height={720}
  />
);

Props13

Prop	Type	Default
prefixrequired	string— Leading text typed first and clipped right-to-left on exit
anchorrequired	string— Central segment that remains visible longest
suffixrequired	string— Space-delimited trailing words clipped left-to-right with a stagger
typeFrames	number30 Frames used to type the complete line
exitAt	number50 Frame on which the segmented exit begins
exitFrames	number20 Frames used by the prefix wipe and final anchor close
wordStagger	number4 Delay in frames between suffix word wipes
anchorShift	number-72 Horizontal anchor travel in pixels during the prefix wipe
fontSize	number42 Font size in pixels
fontWeight	number400 CSS font-weight
color	string"#e8e8e8" Text color
speed	number1 Playback speed multiplier
className	string— Optional className passed to the text container

prefixrequiredstring
Leading text typed first and clipped right-to-left on exit
anchorrequiredstring
Central segment that remains visible longest
suffixrequiredstring
Space-delimited trailing words clipped left-to-right with a stagger
typeFramesnumber
Frames used to type the complete line
Default30
exitAtnumber
Frame on which the segmented exit begins
Default50
exitFramesnumber
Frames used by the prefix wipe and final anchor close
Default20
wordStaggernumber
Delay in frames between suffix word wipes
Default4
anchorShiftnumber
Horizontal anchor travel in pixels during the prefix wipe
Default-72
fontSizenumber
Font size in pixels
Default42
fontWeightnumber
CSS font-weight
Default400
colorstring
Text color
Default"#e8e8e8"
speednumber
Playback speed multiplier
Default1
classNamestring
Optional className passed to the text container