Matrix Decode
Matrix Decode text animation for Remotion.
PrimitiveAdvanced
$ npx remotion-ui@latest add matrix-decodeA resolve front sweeps the string left to right at a constant rate: everything
behind it is the target text, everything ahead of it is a scrambled glyph, and
the one character sitting on the front is tinted hotColor. A deterministic
±2 character jitter (hashed off the character index, never Math.random)
keeps the front from landing as a perfectly straight edge.
glyphs is the pool the unresolved characters are drawn from. It has to be
monospace-width in whatever fontFamily you pass: the classic full-width
katakana are twice a latin advance, so a line rendered in them is twice as wide
while it is still scrambled as it is once it has resolved, and it runs off the
frame.
The window matches the preview at 120 frames so the docs <Player> shows the
same sweep the tile does.
The front sweeps at a constant rate with a deterministic ±2 character jitter, so glyphs lock in roughly, not exactly, left to right. No `Math.random`: the jitter is hashed off the character index.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/matrix-decode- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, delayInFrames, durationInFrames, color, 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 { MatrixDecode } from "@/remotion/primitives/matrix-decode";
<MatrixDecode text="DECODED" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | - | Target string. |
| delayInFrames | number | 0 | Frame the resolve front starts sweeping. |
| durationInFrames | number | 50 | Frames the front takes to cross the whole string. |
| color | string | "#2dd4bf" | Resolved and scrambled glyph colour. |
| hotColor | string | "#5eead4" | Colour of the single character sitting on the decode front. |
| glyphs | string | - | Pool the unresolved characters are drawn from. Must be monospace-width in `fontFamily`: full-width katakana are twice a latin advance, so the line changes width as it resolves. |