Kinetic Type Mask
Use giant typography as a window into the next scene
Installation
$ pnpm dlx shadcn@latest add @remocn/kinetic-type-maskUsage
// 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 |