Typed Split Wipe
A centered cursorless type build exits through opposing fixed-layout glyph wipes
Installation
$ pnpm dlx shadcn@latest add @remocn/typed-split-wipeUsage
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.
// 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.
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}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
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 | number | 30 | Frames used to type the complete line |
exitAt | number | 50 | Frame on which the segmented exit begins |
exitFrames | number | 20 | Frames used by the prefix wipe and final anchor close |
wordStagger | number | 4 | Delay in frames between suffix word wipes |
anchorShift | number | -72 | Horizontal anchor travel in pixels during the prefix wipe |
fontSize | number | 42 | Font size in pixels |
fontWeight | number | 400 | CSS font-weight |
color | string | "#e8e8e8" | Text color |
speed | number | 1 | Playback speed multiplier |
className | string | — | Optional className passed to the text container |