Track Matte
After Effects track mattes: reveal any child through any other with alpha, inverted alpha, luma or inverted luma. Install with npx remotion-ui@latest add track-matte.
PrimitiveMotion graphicsAdvanced
$ npx remotion-ui@latest add track-matteThe content shows through the matte by the matte's alpha, inverted alpha, luminance or inverted luminance — AE's four track-matte modes. The preview runs two at once, in opposite directions: behind, flight footage is the matte, and its own luminance reveals a turning gradient, so roads and coastlines glow in colour; in front, a headline is the matte and the letters are windows onto the lane's glowing MoGraph floor.
What can be a matte. Anything SVG, in a width × height space: shapes, <text>, <image>, and whole nested SVGs — a ShapeLayer drops straight in. For footage, use <MatteVideo src=…>: each frame arrives through onVideoFrame, is drawn to a canvas and placed in the mask, and during a render the frame is held until its matte is in place, so matte and content never drift. Arbitrary HTML cannot be a matte — browsers do not paint <foreignObject> inside a mask — so HTML content goes on the revealed side, which can be anything.
This generalises text-mask-video, which stays as the one-line way to put footage in a headline.
Usage
import { MatteVideo, TrackMatte } from "@/remotion/primitives/track-matte";
// Footage through type.
<TrackMatte
mode="alpha"
matte={<text x={480} y={340} textAnchor="middle" fontSize={230} fontWeight={800} fill="white">MATTE</text>}
>
<OffthreadVideo src={staticFile("clip.mp4")} />
</TrackMatte>
// Everything except a shape.
<TrackMatte mode="alpha-inverted" matte={<ShapeLayer shapes={[{ type: "star", points: 5, outerRadius: 200, innerRadius: 80 }]} fill="white" stroke={null} width={960} height={540} />}>
<MyScene />
</TrackMatte>
// A colour field revealed by footage luminance.
<TrackMatte mode="luma" matte={<MatteVideo src={staticFile("clip.mp4")} />}>
<div style={{ width: 960, height: 540, background: "linear-gradient(90deg, #e8b86d, #f472b6)" }} />
</TrackMatte>The matte must be SVG (browsers do not paint <foreignObject> in masks); footage mattes use <MatteVideo>, which holds each rendered frame until its matte is drawn.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/track-matte- Use when: After Effects-style motion graphics built from composable, keyframeable operators.
- Customize: mode, matte, width, height, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { MatteVideo, TrackMatte } from "@/remotion/primitives/track-matte";
<TrackMatte mode="alpha" matte={<text x={480} y={330} textAnchor="middle" fontSize={220} fill="white">WORD</text>}>
<OffthreadVideo src={staticFile("clip.mp4")} />
</TrackMatte>
// Footage as the matte:
<TrackMatte mode="luma" matte={<MatteVideo src={staticFile("clip.mp4")} />}>
<Gradient />
</TrackMatte>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "alpha" | "alpha-inverted" | "luma" | "luma-inverted" | "alpha" | How the matte decides visibility. |
| matte* | ReactNode (SVG) | - | SVG content in the width × height space: shapes, <text>, <image>, a nested <svg>, or <MatteVideo>. |
| children* | ReactNode | - | What is revealed — any HTML. |
| width | number | 960 | Matte and content width in px. |
| height | number | 540 | Matte and content height in px. |
Related
IK Rig
A lit, shadowed two-bone IK arm that reaches for any target or plots SVG strokes with a pen, laying ink exactly where the solved hand is. Install with npx remotion-ui@latest add ik-rig.
Follow Through
Overlapping action along a chain: every element follows one leader track with its own delay, drag, overshoot and settle. Install with npx remotion-ui@latest add follow-through.