Kinetic Type Mask

A transition primitive that turns a giant headline into a window into the next scene. The text is rendered as an SVG <clipPath> over the incoming scene, so its interior literally shows what's underneath. After a brief hold, the text scales exponentially until the inside of one letter expands past the screen edges and fully reveals the new 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

Prop	Type	Default	Description
`from`	`ReactNode`	—	The outgoing scene rendered behind the text. Falls back to a labeled colored panel.
`to`	`ReactNode`	—	The 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`	`number`	`durationInFrames * 0.3`	Frame at which the hold (pre-zoom) begins.
`holdFrames`	`number`	`12`	How long the text sits at rest before the zoom kicks in.
`transitionDuration`	`number`	`24`	Length of the exponential scale-up in frames.
`maxScale`	`number`	`120`	Final scale value applied to the text. Must be large enough that one letter's interior covers the screen.
`className`	`string`	—	Optional className for the outer container.

Notes

Use a heavy display weight

The mask works best with the boldest weight you have on hand (Geist 900 or similar). Heavy letterforms have generous interior space, so the camera has somewhere to fly through before the reveal.