Kinetic Type Mask

Use giant typography as a window into the next scene

Installation

$ pnpm dlx shadcn@latest add @remocn/kinetic-type-mask

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { KineticTypeMask } from "@/components/remocn/kinetic-type-mask";

const KineticTypeMaskScene = () => (
  <KineticTypeMask
    from={<SceneA />
);

export const RemotionRoot = () => (
  <Composition
    id="KineticTypeMask"
    component={KineticTypeMaskScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

PropTypeDefaultDescription
from
ReactNodeThe outgoing scene rendered behind the text. Falls back to a labeled colored panel.
to
ReactNodeThe incoming scene revealed through the text mask. Falls back to a labeled colored panel.
text
string"NEXT"The headline used as a clipping mask
transitionStart
numberdurationInFrames * 0.3Frame at which the hold (pre-zoom) begins
holdFrames
number12How long the text sits at rest before the zoom kicks in
transitionDuration
number24Length of the exponential scale-up in frames
maxScale
number120Final scale value applied to the text. Must be large enough that one letter's interior covers the screen.
className
stringOptional className for the outer container